閱讀(4.8k) 書(shū)簽贊(0) 我要糾錯(cuò)

Element-React Layout 布局

2021-09-06 15:48 更新

通過(guò)基礎(chǔ)的 24 分欄，迅速簡(jiǎn)便地創(chuàng)建布局。

基礎(chǔ)布局

使用單一分欄創(chuàng)建基礎(chǔ)的柵格布局。

通過(guò) Row 和 Col 組件，并通過(guò) Col 組件的 span 屬性我們就可以自由地組合布局。

render() {
  return (
    <div>
      <Layout.Row>
        <Layout.Col span="24"><div className="grid-content bg-purple-dark"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row>
        <Layout.Col span="12"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="12"><div className="grid-content bg-purple-light"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row>
        <Layout.Col span="8"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="8"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="8"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row>
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple-light"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row>
        <Layout.Col span="4"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple-light"></div></Layout.Col>
      </Layout.Row>
    </div>
  )
}

分欄間隔

分欄之間存在間隔。

Row 組件提供 gutter 屬性來(lái)指定每一欄之間的間隔，默認(rèn)間隔為 0。

render() {
  return (
    <Layout.Row gutter="20">
      <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
      <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
      <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
      <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
    </Layout.Row>
  )
}

混合布局

通過(guò)基礎(chǔ)的 1/24 分欄任意擴(kuò)展組合形成較為復(fù)雜的混合布局。

render() {
  return (
    <div>
      <Layout.Row gutter="20">
        <Layout.Col span="16"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="8"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row gutter="20">
        <Layout.Col span="8"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="8"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row gutter="20">
        <Layout.Col span="4"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="16"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="4"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
    </div>
  )
}

分欄偏移

支持偏移指定的欄數(shù)。

通過(guò)制定 Col 組件的 offset 屬性可以指定分欄偏移的欄數(shù)。

render() {
  return (
    <div>
      <Layout.Row gutter="20">
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6" offset="6"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row gutter="20">
        <Layout.Col span="6" offset="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6" offset="6"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row gutter="20">
        <Layout.Col span="12" offset="6"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
    </div>
  )
}

對(duì)齊方式

對(duì)分欄進(jìn)行靈活的對(duì)齊。

將 type 屬性賦值為 'flex'，可以啟用 flex 布局，并可通過(guò) justify 屬性來(lái)指定 start, center, end, space-between, space-around 其中的值來(lái)定義子元素的排版方式。

render() {
  return (
    <div>
      <Layout.Row type="flex" className="row-bg">
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row type="flex" className="row-bg" justify="center">
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row type="flex" className="row-bg" justify="end">
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row type="flex" className="row-bg" justify="space-between">
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
      <Layout.Row type="flex" className="row-bg" justify="space-around">
        <Layout.Col span="6"><div className="grid-content bg-purple"></div></Layout.Col>
        <Layout.Col span="6"><div className="grid-content bg-purple-light"></div></Layout.Col>
        <Layout.Col span={6}><div className="grid-content bg-purple"></div></Layout.Col>
      </Layout.Row>
    </div>
  )
}

響應(yīng)式布局

參照了 Bootstrap 的響應(yīng)式設(shè)計(jì)，預(yù)設(shè)了四個(gè)響應(yīng)尺寸：xs、sm、md和lg。

render() {
  return (
    <Layout.Row gutter="10">
      <Layout.Col xs="8" sm="6" md="4" lg="3"><div className="grid-content bg-purple"></div></Layout.Col>
      <Layout.Col xs="4" sm="6" md="8" lg="9"><div className="grid-content bg-purple-light"></div></Layout.Col>
      <Layout.Col xs="4" sm="6" md="8" lg="9"><div className="grid-content bg-purple"></div></Layout.Col>
      <Layout.Col xs="8" sm="6" md="4" lg="3"><div className="grid-content bg-purple-light"></div></Layout.Col>
    </Layout.Row>
  )
}

基于斷點(diǎn)的隱藏類

Element Plus 額外提供了一系列類名，用于在某些條件下隱藏元素。這些類名可以添加在任何 DOM 元素或自定義組件上。如果需要，請(qǐng)自行引入以下文件：

import 'element-plus/lib/theme-chalk/display.css'

包含的類名及其含義為：

hidden-xs-only?- 當(dāng)視口在?xs?尺寸時(shí)隱藏
hidden-sm-only?- 當(dāng)視口在?sm?尺寸時(shí)隱藏
hidden-sm-and-down?- 當(dāng)視口在?sm?及以下尺寸時(shí)隱藏---hidden-sm-and-up?- 當(dāng)視口在?sm?及以上尺寸時(shí)隱藏- hidden-md-only?- 當(dāng)視口在?md?尺寸時(shí)隱藏 hidden-md-and-down?- 當(dāng)視口在?md?及以下尺寸時(shí)隱藏hidden-md-and-up?- 當(dāng)視口在?md?及以上尺寸時(shí)隱藏hidden-lg-only?- 當(dāng)視口在?lg?尺寸時(shí)隱藏 hidden-lg-and-down?- 當(dāng)視口在?lg?及以下尺寸時(shí)隱藏hidden-lg-and-up?- 當(dāng)視口在?lg?及以上尺寸時(shí)隱藏hidden-xl-only?- 當(dāng)視口在?xl?尺寸時(shí)隱藏
Row Attributes

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
gutter	柵格間隔	number	—	0
type	布局模式，可選 flex，現(xiàn)代瀏覽器下有效	string	—	—
justify	flex 布局下的水平排列方式	string	start/end/center/space-around/space-between	start
align	flex 布局下的垂直排列方式	string	top/middle/bottom	top
tag	自定義元素標(biāo)簽	string	*	div

Col Attributes

參數(shù)	說(shuō)明	類型	可選值	默認(rèn)值
span	柵格占據(jù)的列數(shù)，必選參數(shù)	number	—	—
offset	柵格左側(cè)的間隔格數(shù)	number	—	0
push	柵格向右移動(dòng)格數(shù)	number	—	0
pull	柵格向左移動(dòng)格數(shù)	number	—	0
xs	`<768px` 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object (例如： {span: 4, offset: 4})	—	—
sm	`≥768px` 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object (例如： {span: 4, offset: 4})	—	—
md	`≥992` 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object (例如： {span: 4, offset: 4})	—	—
lg	`≥1200` 響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object (例如： {span: 4, offset: 4})	—	—
xl	`≥1920px`?響應(yīng)式柵格數(shù)或者柵格屬性對(duì)象	number/object (例如： {span: 4, offset: 4})	——	——
tag	自定義元素標(biāo)簽	string	*	div