## Adaptive Layout
All pages in the frontend of CabloyJS adopt the strategy of `mobile first`, and at the same time, it perfectly adapts to `PC layout`
1. CabloyJS dynamically monitors the change of web page width. When the width is less than the `threshold`, it displays `Mobile layout`. When the width is greater than the `threshold`, it displays `PC layout`
2. `PC layout` adopts special layout management mode to realize the style of `PC = mobile + pad`
> This adaptive strategy can seamlessly bring the operation experience and development mode of `mobile scene` into `PC scene`, and only one set of code can be developed for mobile and PC scenes
## Layout
CabloyJS has a set of `mobile layout` and `PC layout` built-in. You can also completely customize your own layout
To develop a layout is to develop a layout component, and then modify the `config` of the frontend
`src/front/config/config.{scene}.js`
``` javascript
export default{
layout: {
"breakpoint": 800,
"items": {
"mobile": {
"module": "a-layoutmobile",
"component": "layout"
},
"pc": {
"module": "a-layoutpc",
"component": "layout"
}
}
},
};
```
|名称|说明|
|--|--|
|breakpoint|Threshold: for layout switching|
|module|layout module name|
|component|layout component name|
> Best practice: Based on the module `a-layoutmobile` or `a-layoutpc`, adjust the layout logic according to your own intention
## Mobile Layout
Module `a-layoutmobile` implements a set of `mobile layout`
### Preview
![layout-mobile](https://portal.cabloy.com/api/a/file/file/download/1aa84beb8e4340aba56b994f1d5a0aa1.gif)
### Config
You can customize the layout by modifying the module's `config`
`a-layoutmobile/front/src/config/config.js`
``` javascript
export default {
layout: {
login: '/a/login/login',
loginOnStart: true,
toolbar: {
tabbar: true, labels: true, bottomMd: true,
},
tabs: [
{ name: 'Home', tabLinkActive: true, iconMaterial: 'home', url: '/a/base/menu/list' },
{ name: 'Atom', tabLinkActive: false, iconMaterial: 'group_work', url: '/a/base/atom/list' },
{ name: 'Mine', tabLinkActive: false, iconMaterial: 'person', url: '/a/user/user/mine' },
],
},
};
```
|Name|Default|Description|
|--|--|--|
|layout.login|/a/login/login|page component path for login|
|layout.loginOnStart|true|Whether open the login page, when an anonymous user enter the system|
|layout.toolbar||toolbar's config|
|layout.tabs||tabs's config|
## PC Layout
Module `a-layoutpc` implements a set of `PC layout`
### Preview
![layout-pc](https://portal.cabloy.com/api/a/file/file/download/e5db62a0fd7b4e168ac1b5ab02a4c254.gif)
### Config
You can customize the layout by modifying the module's `config`
`a-layoutpc/front/src/config/config.js`
``` javascript
export default {
layout: {
login: '/a/login/login',
loginOnStart: true,
header: {
buttons: [
{ name: 'Home', iconMaterial: 'dashboard', url: '/a/base/menu/list', target: '_dashboard' },
{ name: 'Atom', iconMaterial: 'group_work', url: '/a/base/atom/list' },
],
mine:
{ name: 'Mine', iconMaterial: 'person', url: '/a/user/user/mine' },
},
size: {
small: 320,
top: 60,
spacing: 10,
},
},
};
```
|Name|Default|Description|
|--|--|--|
|layout.login|/a/login/login|page component path for login|
|layout.loginOnStart|true|Whether open the login page, when an anonymous user enter the system|
|layout.header||header's config|
|layout.size||page size|
### Page Size
There are three types of page sizes: `small`, `medium`, `large`. The default is `small`
#### Specify the Page Size
The page size can be specified through the `meta` of the page component
``` javascript
```
### Page Title
The module `a-layoutpc` will automatically extract the `title` of the `eb-navbar` in the page component and display it in the header navigation bar
Of course, the page title can also be specified through the `meta` of the page component
``` javascript
```
### Page Opening Ways
Generally speaking, the new page component will be opened on the right side of the current page component. In addition to this default way, there are two other ways to open:
1. `_self`: open in the current `View`
2. `_view`: open in a new `View`
You can use the method `$view.navigate` to pass the `target` and specify the page opening way
``` javascript
this.$view.navigate('/test/party/kitchen-sink/about', { target: '_self' });
```