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.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

layout-mobile

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

layout-pc

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

  1. In the mobile scenario, all page sizes are of the small type
  2. In the PC scenario, there are three types of page sizes: small, middle, 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 three other ways to open:

  1. _self: open in the current view
  2. _group: open a new Tab Group

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' });