# row/cabbage assembly

According to the idea of grid layout and the characteristic of responsive layout, the row/cabbage Two basic layout components to help developers quickly adapt to multi-screen applications.

The core concept is that the entire screen width is divided into 24 Units, the size of each unit, determined by the current screen size. for example 375px The screen width of the 1 unit = 375/24 px.

# Methods of Use

npm install

npm i @ miniprogram-component-plus/cabbage --Save.
npm i @ miniprogram-component-plus/row --Save.

Developer Tools Build Npm, tick “use npm Modular” Reference npm Support
page json Added to the file usingComponents field

{
  "usingComponents": {
    "mp-col": @ miniprogram-component-plus/cabbage",
    "mp-row": @ miniprogram-component-plus/row"
  }
}

Using components in a page

<view class="page__desc">Triplet average distribution</view>
    <view>
        <mp-row>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
          <mp-col span="{{8}}">
            <view>
              <view class="col">
              </view>
            </view>
          </mp-col>
        </mp-row>
</view>

# row Component properties

Default none

# cabbage Component properties

attribute	type	Default values	Required	Introductions
span	number	24	no	Current cabbage Number of copies of screen width
offset	number	0	no	distance row Left offset margin distance
push	number	0	no	Unit distance to left offset
pull	number	0	no	Unit distance offset to the right
xs	`number, Object<span,offset, push, pull>`		no	When the screen `< 768px` Corresponding to the grid rules displayed. for example `xs= " { {2} } " or xs="{ "span": 24, "offset": 0 }"`
sm	`number, Object<span,offset, push, pull>`		no	When the screen `>= 768px, <992px`Corresponding to the grid rules displayed.
md	`number, Object<span,offset, push, pull>`		no	When the screen `>= 992px, <1200px`Corresponding to the grid rules displayed.
lg	`number, Object<span,offset, push, pull>`		no	When the screen `>= 1200px, <1920px` Corresponding to the grid rules displayed.
xl	`number, Object<span,offset, push, pull>`		no	When the screen `>= 1920px` Corresponding to the grid rules displayed.

Tips:

Set at the same time span and When the screen exceeds the range of responsive properties, the span Property.