View Size

Whether Layout Mobile or Layout PC, CabloyJS will automatically adjust the view size according to the size of the current browsing window

View size is one of the following three types: small, medium, large

CabloyJS will automatically inject props into the Vue component corresponding to the view and ClassName into the DOM component corresponding to the view, so that we can carry out adaptive layout in two ways: JS and CSS

Way One: JS

1. Background: Vue component eb-view

CabloyJS uses the view as a container for displaying content. A view can contain multiple pages, and a page contains the actual content. Specifically, module a-components provides a global Vue component eb-view, which is the actual view container component

The Vue component eb-view provides two props values: size、sizeExtent

Name Description
size small/medium/large
sizeExtent.width view’s width
sizeExtent.height view’s height

2. Example

We take the module test-party as an example to show how to respond to the change of view size

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/layout/adaptive.vue

export default {
  data() {
    return {
      currentViewSize: null,
      _unwatch: null,
    };
  },
  mounted() {
    this._unwatch = this.$view.$watch('size', () => {
      this.onSize();
    });
    this.onSize();
  },
  beforeDestroy() {
    if (this._unwatch) {
      this._unwatch();
      this._unwatch = null;
    }
  },
  methods: {
    onSize() {
      this.currentViewSize = this.$view.size;
    },
  },
};

Get the Vue component instance corresponding to the view through this.$view

Way Two: CSS

1. Background: DOM component

CabloyJS will automatically inject ClassName into the DOM component corresponding to the view, as follows:

View Size ClassName
small .eb-view-size-small
medium .eb-view-size-small.eb-view-size-medium
large .eb-view-size-small.eb-view-size-medium.eb-view-size-large

Through the combination strategy of ClassName, we can easily carry out adaptive layout and degradation processing (when the large style does not exist, use the medium style; when the medium style does not exist, use the small style)

2. Example

We still take the module test-party as an example to show how to add adaptive styles

src/suite-vendor/test-party/modules/test-party/front/src/kitchen-sink/pages/layout/adaptive.vue

.eb-view-size-small {
  .adaptive-demo {
    font-size: x-small;
  }
}

.eb-view-size-small.eb-view-size-medium {
  .adaptive-demo {
    font-size: medium;
  }
}

.eb-view-size-small.eb-view-size-medium.eb-view-size-large {
  .adaptive-demo {
    font-size: x-large;
  }
}

Because .eb-view-size-small is generally the default style, we can often omit .eb-view-size-small, which can be simplified as:

.adaptive-demo {
  font-size: x-small;
}

.eb-view-size-medium {
  .adaptive-demo {
    font-size: medium;
  }
}

.eb-view-size-medium.eb-view-size-large {
  .adaptive-demo {
    font-size: x-large;
  }
}

Grid Layout

In order to simplify the writing of adaptive style, CabloyJS has adjusted and optimized [framework7 grid] (https://framework7.io/vue/grid.html), so as to support the adaptive mechanism of view

  <f7-row>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
    <f7-col width="100" medium="50" large="25">.small-100.medium-50.large-25</f7-col>
  </f7-row>

f7-col only supports the attributes of width/medium/large, which adapts to the view sizes: small/medium/large

f7-col’s width supports the following values: 5, 10, 15, 20, 25, 30, 33, 35, 40, 45, 50, 55, 60, 65, 66, 70, 75, 80, 85, 90, 95, 100