semantic ui框架学习笔记三

网格系统

基本网格

<div class="ui grid">
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

网格将水平空间划分为不可分割的单元，称为“列”。网格中的所有列必须指定其宽度作为总宽度的比例。所有网格系统每行有任意列，Semantic 默认主题有 16 列.默认是one wide。可自己指定每一列站多少wide。当不给网格指定行时，行是“隐式的”，当前面没有更多的空间时，自动转换。

<div class="ui grid">
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
  <div class="four wide column"></div>
</div>

当然也可以指定一个显示的行元素，行是列的水平分组，指定网格的列数。

<div class="ui four column grid">
  <div class="row">
    <div class="column"></div>
    <div class="column"></div>
    <div class="column"></div>
  </div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
  <div class="column"></div>
</div>

自动列计数

如果你不知道你要设置几列，可以使用equal width可以自动划分列宽度。

<div class="ui equal width grid">
  <div class="column">1</div>
  <div class="column">2</div>
  <div class="column">3</div>
  <div class="equal width row">
    <div class="column">4</div>
    <div class="column">5</div>
  </div>
</div>

分割

网格可以用分隔符分割，列与列之间有分割(divided)，行与行之间有分割(vertically divided)，单元分割(celled)，内部单元分割(internally celled)。

<div class="ui celled grid">
  <div class="two column row">
    <div class="column">
      <p>1</p>
    </div>
    <div class="column">
      <p>2</p>
    </div>
  </div>
  <div class="three column row">
    <div class="column">
      <p>3</p>
    </div>
    <div class="column">
      <p>4</p>
    </div>
    <div class="column">
      <p>5</p>
    </div>
  </div>
</div>

这样就能使列栏均匀占满网格了。

可堆叠（Stackable）

可自动将行堆叠到移动设备上的列。

<div class="ui right aligned stackable grid">
  <div class="three column row">
    <div class="column green">1</div>
    <div class="column orange">2</div>
    <div class="column pink">3</div>
  </div>
  <div class="eight column row">
    <div class="column green">4</div>
    <div class="column orange">5</div>
    <div class="column pink">6</div>
    <div class="column grey">7</div>
    <div class="column green">8</div>
    <div class="column orange">9</div>
    <div class="column pink">10</div>
    <div class="column grey">11</div>
  </div>
</div>

居中

如果一行没有占满所设置的列数，可以使用centered这个变量来使列居中。

<div class="ui two column centered grid">
  <div class="column grey">0</div>
  <div class="four column row">
    <div class="column green">1</div>
    <div class="column orange">2</div>
  </div>
</div>

浮动

列可以在每一行的左或者右对齐。left floated, right floated。

拉伸

行可以拉伸内容以占据整个列高度

<div class="ui three column divided grid">
  <div class="stretched row">
    <div class="column">
      <div class="ui segment">
        1
      </div>
    </div>
    <div class="column">
      <div class="ui segment">
        1
      </div>
      <div class="ui segment">
        2
      </div>
    </div>
    <div class="column">
      <div class="ui segment">
        1
      </div>
      <div class="ui segment">
        2
      </div>
      <div class="ui segment">
        3
      </div>
    </div>
  </div>
</div>

内边距

padded，vertically padded，horizontally padded。

与React结合

semantic-ui-react

例如：

import { Menu, Item, Container, Image } from 'semantic-ui-react'
...

export default class MenuExampleInverted extends Component {
  state = {}

  handleItemClick = (e, { name }) => this.setState({ activeItem: name })

  render() {
    const { activeItem } = this.state

    return (
      <Menu inverted attached>
        <Container>
          <Menu.Menu position="left">
            <Item>
              <Image src={iconImg} style={{width: 100}} />
            </Item>
          </Menu.Menu>
          <Menu.Menu position="right">
            <Item as="a" name='index' active={activeItem === 'index'} onClick={this.handleItemClick}>
              首页
            </Item>
            <Item as="a" name='getstart' active={activeItem === 'getstart'} onClick={this.handleItemClick}>
              新手入门
            </Item>
            <Item as="a" name='login' active={activeItem === 'login'} onClick={this.handleItemClick}>
              登录
            </Item>
            <Item as="a" name='register' active={activeItem === 'register'} onClick={this.handleItemClick}>
              注册
            </Item>
          </Menu.Menu>
        </Container>
      </Menu>
    )
  }
}