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 用于登录的页面组件路径
layout.loginOnStart true 进入系统时,如果是匿名用户,是否要打开登录页面
layout.header 头部导航栏配置
layout.size 页面尺寸配置

页面尺寸

  1. Mobile场景下,所有页面尺寸都是small类型
  2. PC场景下,页面尺寸有三种类型:smallmiddlelarge,默认是small

指定页面尺寸

可通过页面组件的meta元数据指定页面尺寸

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

页面标题

模块a-layoutpc会自动提取页面组件中eb-navbar元素的title属性,然后显示在头部导航栏中

当然也可通过页面组件的meta元数据指定页面标题

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

页面打开方式

一般而言,新页面组件会依次在当前页面组件右侧打开。除此默认方式外,还有其他三种打开方式:

  1. _self: 在当前View中打开
  2. _group: 在导航栏打开一个新的Tab Group
  3. _dashboard: 也会在导航栏打开一个新的Tab Group,但与_group不同的是,_dashboard页面里面所有的页面链接都会以_group方式打开

可以通过方法$view.navigate传递target属性,指定页面打开方式

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