Layout 布局

基于 Flex 栅格化系统，利用 Row 和列 Col 来定义信息区块的外部框架，以保证页面的每个区域能够稳健地排布起来。

import { TaRow, TaCol, TaGroup } from '@/index'

export default function ExpLayout() {
  return (
    <>
      <TaGroup title="基础用法">
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col">col-24</TaCol>
        </TaRow>
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col" span="12">
            col-12
          </TaCol>
          <TaCol className="exp-layout-col" span="12">
            col-12
          </TaCol>
        </TaRow>
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col" span="8">
            col-8
          </TaCol>
          <TaCol className="exp-layout-col" span="8">
            col-8
          </TaCol>
          <TaCol className="exp-layout-col" span="8">
            col-8
          </TaCol>
        </TaRow>
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col" span="6">
            col-6
          </TaCol>
          <TaCol className="exp-layout-col" span="6">
            col-6
          </TaCol>
          <TaCol className="exp-layout-col" span="6">
            col-6
          </TaCol>
          <TaCol className="exp-layout-col" span="6">
            col-6
          </TaCol>
        </TaRow>
      </TaGroup>
      <TaGroup title="区块间隔">
        <TaRow className="exp-layout-row" gutter="10">
          <TaCol className="exp-layout-col" span="8">
            col-8
          </TaCol>
          <TaCol className="exp-layout-col" span="8">
            col-8
          </TaCol>
          <TaCol className="exp-layout-col" span="8">
            col-8
          </TaCol>
        </TaRow>
      </TaGroup>
      <TaGroup title="左右偏移">
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col" span="8">
            col-8
          </TaCol>
          <TaCol className="exp-layout-col" span="8" offset="8">
            col-8 offset-8
          </TaCol>
        </TaRow>
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col" span="6" offset="6">
            col-6 offset-6
          </TaCol>
          <TaCol className="exp-layout-col" span="6" offset="6">
            col-6 offset-6
          </TaCol>
        </TaRow>
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col" span="12" offset="6">
            col-12 offset-6
          </TaCol>
        </TaRow>
      </TaGroup>
      <TaGroup title="栅格排序">
        <TaRow className="exp-layout-row">
          <TaCol className="exp-layout-col" span="18" push="6">
            col-18 push-6
          </TaCol>
          <TaCol className="exp-layout-col" span="6" pull="18">
            col-6 pull-18
          </TaCol>
        </TaRow>
      </TaGroup>
      <TaGroup title="水平对齐方式">
        <div className="exp-layout-title">justify: start</div>
        <TaRow className="exp-layout-row" justify="start">
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
        </TaRow>
        <div className="exp-layout-title">justify: center</div>
        <TaRow className="exp-layout-row" justify="center">
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
        </TaRow>
        <div className="exp-layout-title">justify: end</div>
        <TaRow className="exp-layout-row" justify="end">
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
        </TaRow>
        <div className="exp-layout-title">justify: space-around</div>
        <TaRow className="exp-layout-row" justify="space-around">
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
        </TaRow>
        <div className="exp-layout-title">justify: space-between</div>
        <TaRow className="exp-layout-row" justify="space-between">
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col" span="4">
            col-4
          </TaCol>
        </TaRow>
      </TaGroup>
      <TaGroup title="垂直对齐方式">
        <div className="exp-layout-title">align: top</div>
        <TaRow className="exp-layout-row" justify="space-around" align="top">
          <TaCol className="exp-layout-col exp-layout-h-80" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-40" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-100" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-60" span="4">
            col-4
          </TaCol>
        </TaRow>
        <div className="exp-layout-title">align: middle</div>
        <TaRow className="exp-layout-row" justify="space-around" align="middle">
          <TaCol className="exp-layout-col exp-layout-h-80" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-40" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-100" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-60" span="4">
            col-4
          </TaCol>
        </TaRow>
        <div className="exp-layout-title">align: bottom</div>
        <TaRow className="exp-layout-row" justify="space-around" align="bottom">
          <TaCol className="exp-layout-col exp-layout-h-80" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-40" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-100" span="4">
            col-4
          </TaCol>
          <TaCol className="exp-layout-col exp-layout-h-60" span="4">
            col-4
          </TaCol>
        </TaRow>
      </TaGroup>
    </>
  )
}

Import

import { TaRow, TaCol } from 'tantalum-ui-mobile-react'

具体的引入方式可以参考引入组件。

Row

Row Props

属性	类型	默认值	必填	说明
gutter	string \| number \| number[]	0	否	栅格间隔，通过数值设置水平间隔，也可以通过数组的形式设置水平和垂直间隔 [水平间隔, 垂直间隔]
justify	RowJustify	'start'	否	水平排列方式，可选值：'start', 'end', 'center', 'space-around', 'space-between'
align	RowAlign	'top'	否	水平排列方式，可选值：'top', 'middle', 'bottom'

Row Slots

<TaRow className="exp-layout-row">
  <TaCol className="exp-layout-col" span="12">
    col-12
  </TaCol>
  <TaCol className="exp-layout-col" span="12">
    col-12
  </TaCol>
</TaRow>

Col

Col Props

属性	类型	默认值	必填	说明
span	string \| number	24	否	栅格占据的列数，可选 1-24
offset	string \| number	0	否	栅格左侧的间隔格数，可选 1-24
push	string \| number	0	否	栅格向右移动格数，可选 1-24
pull	string \| number	0	否	栅格向左移动格数，可选 1-24

Col Slots

<TaCol className="exp-layout-col" span="8">
  col-8
</TaCol>

Pagination

Cell

Layout 布局 #

Import #

Row #

Row Props #

Row Slots #

Col #

Col Props #

Col Slots #

Layout 布局

Import

Row

Row Props

Row Slots

Col

Col Props

Col Slots