UNPKG

omega-ui

Version:

一套基于React实现的企业级响应式UI设计方案

268 lines (263 loc) 13.4 kB
/** * * @Demo: Grids * @User: Longjun.Qu * @Date: 2018-06-26 * @Time: 12:51 * */ import React, {Component, Fragment} from 'react'; import {Content, Div, Portlet, Section, Grid, GridItem, Text, Code, Demo, SubHeader} from 'omega'; export default class Grids extends Component { constructor(props) { super(props); } render() { return ( <Fragment> <SubHeader {...{ header: { show: true, name: '栅格系统', separator: true }, breadcrumbs: { items: [ { icon: { show: true, name: 'la la-home' } }, { text: { value: '页面布局', href: 'javascript:;' } }, { text: { value: '栅格系统', href: 'javascript:;' } } ], separator: { show: true, text: { value: '-' } } } }}/> <Content> <Div _includeClass="row"> <Div _includeClass="col-xl-6"> <Portlet {...{ header: { show: true, title: '基础示例' } }} > <Section describe={ <Text>通过 <Code>Grid</Code> 组件和 <Code>GridItem</Code> 组件可以快速构建 <Code>Flex</Code> 布局。</Text>}> <Demo> <Grid {...{ direction: 'ver' }}> <GridItem {...{ fluid: true }}>Item 1</GridItem> <GridItem {...{ fluid: true }}>Item 2</GridItem> <GridItem {...{ fluid: true }}>Item 3</GridItem> </Grid> </Demo> <Demo> <Grid {...{ direction: 'hor' }}> <GridItem {...{ fluid: true }}>Item 1</GridItem> <GridItem {...{ fluid: true }}>Item 2</GridItem> <GridItem {...{ fluid: true }}>Item 3</GridItem> </Grid> </Demo> </Section> </Portlet> <Portlet {...{ header: { show: true, title: '排列顺序' } }} > <Section describe={<Text>通过指定 <Code>order</Code> 属性可以设置排列顺序。</Text>}> <Demo> <Grid {...{ direction: 'ver' }}> <GridItem {...{ fluid: true, order: 2 }}>Item 1</GridItem> <GridItem {...{ fluid: true, order: 3 }}>Item 2</GridItem> <GridItem {...{ fluid: true, order: 1 }}>Item 3</GridItem> </Grid> </Demo> <Demo> <Grid {...{ direction: 'hor' }}> <GridItem {...{ fluid: true, order: 2 }}>Item 1</GridItem> <GridItem {...{ fluid: true, order: 3 }}>Item 2</GridItem> <GridItem {...{ fluid: true, order: 1 }}>Item 3</GridItem> </Grid> </Demo> </Section> </Portlet> </Div> <Div _includeClass="col-xl-6"> <Portlet {...{ header: { show: true, title: '对齐方式' } }} > <Section describe={ <Text>通过在 <Code>GridItem</Code> 组件上设置 <Code>align</Code> 属性可以指定该元素在主轴上对齐方式。</Text>}> <Demo> <Grid {...{ direction: 'ver', _includeStyle: { height: '200px' } }}> <GridItem {...{ fluid: true, order: 2, align: 'center' }}>Item 1</GridItem> <GridItem {...{ fluid: true, order: 3, align: 'flex-end' }}>Item 2</GridItem> <GridItem {...{ fluid: true, order: 1, align: 'flex-start' }}>Item 3</GridItem> </Grid> </Demo> <Demo> <Grid {...{ direction: 'hor' }}> <GridItem {...{ order: 1, align: 'flex-start', _includeStyle: { width: '33%' } }}>Item 1</GridItem> <GridItem {...{ order: 2, align: 'center', _includeStyle: { width: '33%' } }}>Item 2</GridItem> <GridItem {...{ order: 3, align: 'flex-end', _includeStyle: { width: '33%' } }}>Item 3</GridItem> </Grid> </Demo> </Section> </Portlet> <Portlet {...{ header: { show: true, title: '占位比例' } }} > <Section describe={ <Text>通过 <Code>GridItem</Code> 组件的 <Code>flex</Code> 属性可以对不同元素的占比进行调整。</Text>}> <Demo> <Grid {...{ direction: 'ver' }}> <GridItem {...{ flex: '1 1 auto' }}>Item 1</GridItem> <GridItem {...{ flex: '2 1 auto' }}>Item 2</GridItem> <GridItem {...{ flex: '3 1 auto' }}>Item 3</GridItem> </Grid> </Demo> <Demo> <Grid {...{ direction: 'hor', _includeStyle: { height: '200px' } }}> <GridItem {...{ flex: '1 1 auto', _includeStyle: { height: 'auto' } }}>Item 1</GridItem> <GridItem {...{ flex: '2 1 auto', _includeStyle: { height: 'auto' } }}>Item 2</GridItem> <GridItem {...{ flex: '3 1 auto', _includeStyle: { height: 'auto' } }}>Item 3</GridItem> </Grid> </Demo> </Section> </Portlet> </Div> </Div> </Content> </Fragment> ); } }