布局 Layout

Layout 提供了 TiRow 和 TiCol 两个组件来进行行列布局。

使用

API

安装使用

import { TiRow, TiCol } from '@titian-design/mobile-react'

用法示例

栅格配置

span-24

span-12

span-12

span-8

span-8

span-8

span-6

span-6

span-6

span-6

栅格占位格数，为 0 时相当于 display: none

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiRow, TiCol } from 'titian-h5-react';
import './style.scss';

export default function App() {
  return (
    <div className="code-container layout-container">
      <TiRow>
        <TiCol span={24}>
          <div>span-24</div>
        </TiCol>
      </TiRow>

      <TiRow>
        <TiCol span={12}>
          <div>span-12</div>
        </TiCol>
        <TiCol span={12}>
          <div>span-12</div>
        </TiCol>
      </TiRow>

      <TiRow>
        <TiCol span={8}>
          <div>span-8</div>
        </TiCol>
        <TiCol span={8}>
          <div>span-8</div>
        </TiCol>
        <TiCol span={8}>
          <div>span-8</div>
        </TiCol>
      </TiRow>

      <TiRow>
        <TiCol span={6}>
          <div>span-6</div>
        </TiCol>
        <TiCol span={6}>
          <div>span-6</div>
        </TiCol>
        <TiCol span={6}>
          <div>span-6</div>
        </TiCol>
        <TiCol span={6}>
          <div>span-6</div>
        </TiCol>
      </TiRow>
    </div>
  );
}

codesanbox

copy

code

.layout-container {
  ti-row {
    width: 100%;
  }

  ti-col > div {
    background-color: #fa2c19;
    text-align: center;
    color: #fff;
    font-weight: 600;
  }
  ti-col:nth-child(2n + 1) > div {
    opacity: 0.49;
  }
}

布局间隙

span-12

span-12

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiRow, TiCol } from 'titian-h5-react';
import './style.scss';

export default function App() {
  return (
    <div className="code-container layout-container">
      <TiRow gutter={12} flex={false}>
        <TiCol span={12}>
          <div>span-12</div>
        </TiCol>
        <TiCol span={12}>
          <div>span-12</div>
        </TiCol>
      </TiRow>
    </div>
  );
}

codesanbox

copy

code

.layout-container {
  ti-row {
    width: 100%;
  }

  ti-col > div {
    background-color: #fa2c19;
    text-align: center;
    color: #fff;
    font-weight: 600;
  }
  ti-col:nth-child(2n + 1) > div {
    opacity: 0.49;
  }
}

偏移量设置

span-12

span-8

span-8

span-6

span-6

栅格左侧的偏移格数

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiRow, TiCol } from 'titian-h5-react';
import './style.scss';

export default function App() {
  return (
    <div className="code-container layout-container">
      <TiRow>
        <TiCol offset={12} span={12}>
          <div>span-12</div>
        </TiCol>
      </TiRow>

      <TiRow>
        <TiCol span={8}>
          <div>span-8</div>
        </TiCol>
        <TiCol offset={8} span={8}>
          <div>span-8</div>
        </TiCol>
      </TiRow>

      <TiRow>
        <TiCol offset={6} span={6}>
          <div>span-6</div>
        </TiCol>
        <TiCol offset={6} span={6}>
          <div>span-6</div>
        </TiCol>
      </TiRow>
    </div>
  );
}

codesanbox

copy

code

.layout-container {
  ti-row {
    width: 100%;
  }

  ti-col > div {
    background-color: #fa2c19;
    text-align: center;
    color: #fff;
    font-weight: 600;
  }
  ti-col:nth-child(2n + 1) > div {
    opacity: 0.49;
  }
}

浮动布局

span-12

span-12

• App.jsx
• style.scss

code

codesanbox

copy

code

import React from 'react';
import { TiRow, TiCol } from 'titian-h5-react';
import './style.scss';

export default function App() {
  return (
    <div className="code-container layout-container">
      <TiRow flex={false}>
        <TiCol span={12}>
          <div>span-12</div>
        </TiCol>
        <TiCol span={12}>
          <div>span-12</div>
        </TiCol>
      </TiRow>
    </div>
  );
}

codesanbox

copy

code

.layout-container {
  ti-row {
    width: 100%;
  }

  ti-col > div {
    background-color: #fa2c19;
    text-align: center;
    color: #fff;
    font-weight: 600;
  }
  ti-col:nth-child(2n + 1) > div {
    opacity: 0.49;
  }
}

TiRow API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
flex	boolean	否	true	是否启用 flex 布局, 当值为false时，使用浮动布局	-
gutter	number	否	0	列元素之间的距离	-

可扩展样式名 External Class

类名	说明	备注
extClass	根节点可扩展的类名	-

TiCol API

属性 Properties

名称	类型	是否必填	默认值	说明	备注
span	number	是	-	栅格占位格数，为 0 时相当于 display: none	-
offset	number	否	-	栅格左侧的偏移格数	-

可扩展样式名 External Class

类名	说明	备注
extClass	根节点可扩展的类名	-