Adaptive Layout: PC = Mobile + Pad

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

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

Config

You can customize the layout by modifying the module’s config

a-layoutmobile/front/src/config/config.js

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

Config

You can customize the layout by modifying the module’s config

a-layoutpc/front/src/config/config.js

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

<template>
</template>
<script>
export default {
  meta: {
    size: 'small',
  },
  data() {
    return {};
  },
  methods: {
  },
};
</script>
<style scoped>
</style>

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

<template>
</template>
<script>
export default {
  meta: {
    title: 'Sign in',
  },
  data() {
    return {};
  },
  methods: {
  },
};
</script>
<style scoped>
</style>

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

this.$view.navigate('/test/party/kitchen-sink/about', { target: '_self' });