跳到主要内容

Gird 栅格

介绍​

24 栅格系统。

用法​

基本引入​

import { FQCol, FQRow } from '@fq/fq-weapp-ui';

组件依赖的样式文件（仅按需引用时需要）

import '@fq/fq-weapp-ui/dist/styles/components/row.scss';
import '@fq/fq-weapp-ui/dist/styles/components/col.scss';

基础栅格​

<FQRow>
  <FQCol span={24}>col</FQCol>
</FQRow>

<FQRow>
  <FQCol span={12}>col</FQCol>
  <FQCol span={12}>col</FQCol>
</FQRow>

<FQRow>
  <FQCol span={8}>col</FQCol>
  <FQCol span={8}>col</FQCol>
  <FQCol span={8}>col</FQCol>
</FQRow>

<FQRow>
  <FQCol span={6}>col</FQCol>
  <FQCol span={6}>col</FQCol>
  <FQCol span={6}>col</FQCol>
  <FQCol span={6}>col</FQCol>
</FQRow>

区块间隔​

<FQRow gutter={16}>
  <FQCol span={6}>col</FQCol>
  <FQCol span={6}>col</FQCol>
  <FQCol span={6}>col</FQCol>
  <FQCol span={6}>col</FQCol>
</FQRow>

<FQRow gutter={[16, 24]}>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>
  <FQCol className='gutter-row' span={6}>
    <View style={style}>col</View>
  </FQCol>  
</FQRow>

左右偏移​

<FQRow>
  <FQCol span={8}>col-8</FQCol>
  <FQCol span={8} offset={8}>col-8</FQCol>
</FQRow>

<FQRow>
  <FQCol span={6} offset={6}>col-6 col-offset-6</FQCol>
  <FQCol span={6} offset={6}>col-6 col-offset-6</FQCol>
</FQRow>

<FQRow>
  <FQCol span={12} offset={6}>col-12 col-offset-6</FQCol>
</FQRow>

排版​

<FQRow justify='start'>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
</FQRow>

<FQRow justify='center'>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
</FQRow>

<FQRow justify='end'>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
</FQRow>

<FQRow justify='space-between'>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
</FQRow>

<FQRow justify='space-around'>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
</FQRow>

<FQRow justify='space-evenly'>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
  <FQCol span={4}>col-4</FQCol>
</FQRow>

对齐​

<FQRow justify='center' align='top'>
  <FQCol span={4}><DemoBox value={100}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={50}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={120}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={80}>col-4</DemoBox></FQCol>
</FQRow>

<FQRow justify='space-around' align='middle'>
  <FQCol span={4}><DemoBox value={100}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={50}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={120}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={80}>col-4</DemoBox></FQCol>
</FQRow>

<FQRow justify='space-between' align='bottom'>
  <FQCol span={4}><DemoBox value={100}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={50}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={120}>col-4</DemoBox></FQCol>
  <FQCol span={4}><DemoBox value={80}>col-4</DemoBox></FQCol>
</FQRow>

Flex填充​

<FQRow>
  <FQCol flex={2}>2 / 5</FQCol>
  <FQCol flex={3}>3 / 5</FQCol>
</FQRow>

<FQRow>
  <FQCol flex='100rpx'>100rpx</FQCol>
  <FQCol flex='auto'>Fill Rest</FQCol>
</FQRow>

<FQRow>
  <FQCol flex='1 1 200rpx'>1 1 200rpx</FQCol>
  <FQCol flex='0 1 300rpx'>0 1 300rpx</FQCol>
</FQRow>

<FQRow wrap={false}>
  <FQCol flex='none'>none</FQCol>
  <FQCol flex='auto'>auto with no-wrap</FQCol>
</FQRow>

API​

Row​

参数说明类型默认值版本
align垂直对齐方式top | middle | bottom | stretchtop
gutter栅格间隔，可以写成像素值或者使用数组形式同时设置 [水平间距, 垂直间距]number | array0
justify水平排列方式start | end | center | space-around | space-between | space-evenlystart
wrap是否自动换行boolean / numbertrue

Col​

参数说明类型默认值版本
flexflex 布局属性string | number-
offset栅格左侧的间隔格数，间隔内不可以有栅格number0
order栅格顺序number0
pull栅格向左移动格数number0
push栅格向右移动格数number0
span栅格占位格数，为 0 时相当于 display: nonenumber0