From 848abab495338a4540f0c8e9ff094f7960ed1297 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E6=96=87=E5=AD=A6?= <1355729285@qq.com> Date: Tue, 19 Oct 2021 21:16:11 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0grid=E7=BB=84?= =?UTF-8?q?=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/grid/__tests__/grid.spec.ts | 8 ++++ devui/grid/index.ts | 22 +++++++++ devui/grid/src/col.scss | 64 ++++++++++++++++++++++++++ devui/grid/src/col.tsx | 35 ++++++++++++++ devui/grid/src/grid-types.ts | 76 +++++++++++++++++++++++++++++++ devui/grid/src/row.scss | 19 ++++++++ devui/grid/src/row.tsx | 23 ++++++++++ devui/grid/src/use-grid.ts | 47 +++++++++++++++++++ docs/components/grid/index.md | 68 +++++++++++++++++++++++++++ 9 files changed, 362 insertions(+) create mode 100644 devui/grid/__tests__/grid.spec.ts create mode 100644 devui/grid/index.ts create mode 100644 devui/grid/src/col.scss create mode 100644 devui/grid/src/col.tsx create mode 100644 devui/grid/src/grid-types.ts create mode 100644 devui/grid/src/row.scss create mode 100644 devui/grid/src/row.tsx create mode 100644 devui/grid/src/use-grid.ts create mode 100644 docs/components/grid/index.md diff --git a/devui/grid/__tests__/grid.spec.ts b/devui/grid/__tests__/grid.spec.ts new file mode 100644 index 00000000..fa33b976 --- /dev/null +++ b/devui/grid/__tests__/grid.spec.ts @@ -0,0 +1,8 @@ +import { mount } from '@vue/test-utils'; +import { Row } from '../index'; + +describe('grid test', () => { + it('grid init render', async () => { + // todo + }) +}) diff --git a/devui/grid/index.ts b/devui/grid/index.ts new file mode 100644 index 00000000..b3bbdb03 --- /dev/null +++ b/devui/grid/index.ts @@ -0,0 +1,22 @@ +import type { App } from 'vue' +import Row from './src/row' +import Col from './src/col' + +Row.install = function(app: App): void { + app.component(Row.name, Row) +} + +Col.install = function(app: App): void { + app.component(Col.name, Col) +} +export { Row, Col } + +export default { + title: 'Grid 栅格', + category: '布局', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + app.use(Col as any) + app.use(Row as any) + } +} diff --git a/devui/grid/src/col.scss b/devui/grid/src/col.scss new file mode 100644 index 00000000..2381135f --- /dev/null +++ b/devui/grid/src/col.scss @@ -0,0 +1,64 @@ +.devui-col { + position: relative; + max-width: 100%; + min-height: 1px; +} + +@function percentage ($i, $sum: 24) { + @return $i / $sum * 100%; } + +.devui-col-span-0 { + display: none; +} + +@for $i from 1 to 24 { + .devui-col-offset-#{$i} { + margin-left: percentage($i); + } + .devui-col-pull-#{$i} { + right: percentage($i); + } + .devui-col-push-#{$i} { + left: percentage($i); + } + .devui-col-span-#{$i} { + display: block; + flex: 0 0 percentage($i); + width: percentage($i); + } + .devui-col-xs-offset-#{$i} { + margin-left: percentage($i); + } + .devui-col-xs-pull-#{$i} { + right: percentage($i); + } + .devui-col-xs-push-#{$i} { + left: percentage($i); + } + .devui-col-xs-span-#{$i} { + display: block; + flex: 0 0 percentage($i); + width: percentage($i); + } +} + +@each $size, $value in (sm, 576), (md, 768), (lg, 992), (xl, 1200), (xxl, 1600) { + @media screen and (min-width: #{$value}px) { + @for $i from 1 to 24 { + .devui-col-#{$size}-offset-#{$i} { + margin-left: percentage($i); + } + .devui-col-#{$size}-pull-#{$i} { + right: percentage($i); + } + .devui-col-#{$size}-push-#{$i} { + left: percentage($i); + } + .devui-col-#{$size}-span-#{$i} { + display: block; + flex: 0 0 percentage($i); + width: percentage($i); + } + } + } +} diff --git a/devui/grid/src/col.tsx b/devui/grid/src/col.tsx new file mode 100644 index 00000000..64140776 --- /dev/null +++ b/devui/grid/src/col.tsx @@ -0,0 +1,35 @@ +import { defineComponent, computed, StyleValue } from 'vue' +import { colProps, ColProps } from './grid-types' +import { useSize, CLASS_PREFIX, useColClassNames } from './use-grid' +import './col.scss' + + +export default defineComponent({ + name: 'DCol', + props: colProps, + setup (props: ColProps, { slots }) { + + const formatFlex = (flex: typeof props.flex) => { + const typeValue = typeof flex + switch(typeValue) { + case 'number': + return `${flex} ${flex} auto` + case 'string': + return `0 0 ${flex}` + default: + return undefined + } + } + + const colClassNames= useColClassNames(props) + + const sizeClassNames = useSize(props) + + const colStyle = computed(() => ({ + flex: formatFlex(props.flex), + order: props.order + })) + + return () =>
{slots.default?.()}
+ } +}) diff --git a/devui/grid/src/grid-types.ts b/devui/grid/src/grid-types.ts new file mode 100644 index 00000000..6687e670 --- /dev/null +++ b/devui/grid/src/grid-types.ts @@ -0,0 +1,76 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export type Align = 'top' | 'middle' | 'bottom' + +export type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' + +export const rowProps = { + align: { + type: String as PropType, + default: 'top' + }, + // gutter: { + // type: [Number, Object, Array] as PropType, + // default: 0 + // }, + justify: { + type: String as PropType, + default: 'start' + }, + wrap: { + type: Boolean as PropType, + default: false + } +} as const + +export type RowProps = ExtractPropTypes + +// export const ALIGN_FORMAT = { +// top: 'flex-start', +// middle: 'center', +// bottom: 'flex-end' +// } + +// export const JUSTIFY_FORMAT = { +// start: 'flex-start', +// end: 'flex-end', +// center: 'center', +// 'space-around': 'space-around', +// 'space-between': 'space-between' +// } + + +const screenSizesProp = [Number, Object] as PropType + +export const screenSizes = { + xs: screenSizesProp, + sm: screenSizesProp, + md: screenSizesProp, + lg: screenSizesProp, + xl: screenSizesProp, + xxl: screenSizesProp, +} as const + +const numberProp = Number as PropType + +export const colPropsBaseStyle = { + flex: [String, Number] as PropType, + order: numberProp, +} as const + +export const colPropsBaseClass = { + offset: numberProp, + pull: numberProp, + push: numberProp, + span: numberProp +} as const + +export type ColPropsBaseStyle = ExtractPropTypes + +export type ColPropsBaseClass = ExtractPropTypes + +export type ScreenSizes = ExtractPropTypes + +export const colProps = { ...colPropsBaseStyle, ...colPropsBaseClass, ...screenSizes} + +export type ColProps = ExtractPropTypes diff --git a/devui/grid/src/row.scss b/devui/grid/src/row.scss new file mode 100644 index 00000000..c5fcf70d --- /dev/null +++ b/devui/grid/src/row.scss @@ -0,0 +1,19 @@ +.devui-row { + display: flex; +} + +.devui-row-wrap { + flex-wrap: wrap; +} + +@each $prefix, $value in (top, flex-start), (middle, center), (bottom, flex-end) { + .devui-row-algin-#{$prefix} { + align-items: $value; + } +} + +@each $prefix, $value in (start, flex-start), (center, center), (end, flex-end), (space-around, space-around), (space-between, space-between) { + .devui-row-justify-#{$prefix} { + justify-items: $value; + } +} diff --git a/devui/grid/src/row.tsx b/devui/grid/src/row.tsx new file mode 100644 index 00000000..226589e5 --- /dev/null +++ b/devui/grid/src/row.tsx @@ -0,0 +1,23 @@ +import { defineComponent, computed } from 'vue' +import { rowProps, RowProps } from './grid-types' +import { formatClass } from './use-grid' +import './row.scss' + +const CLASS_PREFIX = 'devui-row' + +export default defineComponent({ + name: 'DRow', + props: rowProps, + emits: [], + setup(props: RowProps, { slots }) { + + const rowClass = computed(() => { + const alignClass = formatClass(`${CLASS_PREFIX}-align`, props.align) + const justifyClass = formatClass(`${CLASS_PREFIX}-justify`, props.justify) + const wrapClass = props.wrap ? ` ${CLASS_PREFIX}-wrap` : '' + return `${alignClass}${justifyClass}${wrapClass}` + }) + + return () =>
{slots.default?.()}
+ } +}) diff --git a/devui/grid/src/use-grid.ts b/devui/grid/src/use-grid.ts new file mode 100644 index 00000000..770b2f12 --- /dev/null +++ b/devui/grid/src/use-grid.ts @@ -0,0 +1,47 @@ +import { computed } from 'vue' +import { ScreenSizes, ColPropsBaseClass, screenSizes, colPropsBaseClass } from './grid-types' + +export const CLASS_PREFIX = 'devui-col' + +export function formatClass (prefix: string, val: number | string | undefined) { + return val !== undefined ? ` ${prefix}-${val}` : '' +} + +export function useColClassNames (props: ColPropsBaseClass) { + return computed(() => { + const spanClass = formatClass(`${CLASS_PREFIX}-span`, props.span) + const offsetClass = formatClass(`${CLASS_PREFIX}-offset`, props.offset) + const pullClass = formatClass(`${CLASS_PREFIX}-pull`, props.pull) + const pushClass = formatClass(`${CLASS_PREFIX}-push`, props.push) + return `${spanClass}${offsetClass}${pullClass}${pushClass}` + }) +} + +function setSpace (val:string) { + return val && ` ${val.trim()} ` +} + +export function useSize (colSizes: ScreenSizes) { + const keys = Object.keys(colSizes).filter(key => key in screenSizes) as (keyof ScreenSizes)[] + return computed(() => { + return keys.reduce((total, key) => { + const valueType = typeof colSizes[key] + + if (valueType === 'number') { + total = `${setSpace(total)}${CLASS_PREFIX}-${key}-span-${colSizes[key]}` + } else if (valueType === 'object') { + const colSizesKeys = Object.keys(colSizes[key]) as (keyof ColPropsBaseClass)[] + const sum = colSizesKeys.filter(item => item in colPropsBaseClass).reduce((tot, k) => { + if (typeof colSizes[key][k] !== 'number') { + return '' + } else { + tot = `${setSpace(tot)}${CLASS_PREFIX}-${key}-${k}-${colSizes[key][k]}` + } + return tot + }, '') + total = `${setSpace(total)}${sum}` + } + return total + }, '') + }) +} \ No newline at end of file diff --git a/docs/components/grid/index.md b/docs/components/grid/index.md new file mode 100644 index 00000000..b5204815 --- /dev/null +++ b/docs/components/grid/index.md @@ -0,0 +1,68 @@ +# Grid 栅格 + +// todo 组件描述 + +### 何时使用 + +// todo 使用时机描述 + + +### 基本用法 +// todo 用法描述 +:::demo // todo 展开代码的内部描述 + +```vue + + + + + +``` + +::: + +### d-grid + +d-grid 参数 + +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | --------- | +| | | | | | | +| | | | | | | +| | | | | | | + +d-grid 事件 + +| 事件 | 类型 | 说明 | 跳转 Demo | +| ---- | ---- | ---- | --------- | +| | | | | +| | | | | +| | | | | + -- Gitee From 7912bd7b475bafde9c3ae0058cd0892038f747c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E8=B0=AD=E6=96=87=E5=AD=A6?= <1355729285@qq.com> Date: Sun, 7 Nov 2021 16:09:48 +0800 Subject: [PATCH 2/2] =?UTF-8?q?feat(grid):=20=E5=88=9D=E6=AD=A5=E5=AE=8C?= =?UTF-8?q?=E6=88=90grid=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/grid/index.ts | 2 +- devui/grid/src/col.tsx | 22 +-- devui/grid/src/grid-types.ts | 34 ++-- devui/grid/src/row.scss | 6 +- devui/grid/src/row.tsx | 48 ++++- devui/grid/src/use-grid.ts | 2 +- devui/grid/src/use-screen.ts | 84 +++++++++ docs/components/grid/index.md | 322 ++++++++++++++++++++++++++++++---- 8 files changed, 446 insertions(+), 74 deletions(-) create mode 100644 devui/grid/src/use-screen.ts diff --git a/devui/grid/index.ts b/devui/grid/index.ts index b3bbdb03..cb957715 100644 --- a/devui/grid/index.ts +++ b/devui/grid/index.ts @@ -14,7 +14,7 @@ export { Row, Col } export default { title: 'Grid 栅格', category: '布局', - status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + status: '已完成', install(app: App): void { app.use(Col as any) app.use(Row as any) diff --git a/devui/grid/src/col.tsx b/devui/grid/src/col.tsx index 64140776..596cb8a7 100644 --- a/devui/grid/src/col.tsx +++ b/devui/grid/src/col.tsx @@ -1,4 +1,4 @@ -import { defineComponent, computed, StyleValue } from 'vue' +import { defineComponent, computed, CSSProperties, Ref, inject } from 'vue' import { colProps, ColProps } from './grid-types' import { useSize, CLASS_PREFIX, useColClassNames } from './use-grid' import './col.scss' @@ -10,26 +10,26 @@ export default defineComponent({ setup (props: ColProps, { slots }) { const formatFlex = (flex: typeof props.flex) => { - const typeValue = typeof flex - switch(typeValue) { - case 'number': - return `${flex} ${flex} auto` - case 'string': - return `0 0 ${flex}` - default: - return undefined + if (typeof flex === 'number') { + return `${flex} ${flex} auto` } + if (/^\d+(\.\d+)?(px|rem|em|%)$/.test(flex)) { + return `0 0 ${flex}` + } + return flex } const colClassNames= useColClassNames(props) const sizeClassNames = useSize(props) - const colStyle = computed(() => ({ + const colStyle = computed(() => ({ flex: formatFlex(props.flex), order: props.order })) - return () =>
{slots.default?.()}
+ const gutterStyle = inject>('gutterStyle') + + return () =>
{slots.default?.()}
} }) diff --git a/devui/grid/src/grid-types.ts b/devui/grid/src/grid-types.ts index 6687e670..a6491cf2 100644 --- a/devui/grid/src/grid-types.ts +++ b/devui/grid/src/grid-types.ts @@ -2,17 +2,26 @@ import type { PropType, ExtractPropTypes } from 'vue' export type Align = 'top' | 'middle' | 'bottom' -export type Justify = 'start' | 'end' | 'center' | 'space-around' | 'space-between' +export type Justify = 'start' | 'end' | 'center' | 'around' | 'between' + +export interface GutterScreenSizes { + xs?: number | number[] + sm: number | number[] + md: number | number[] + lg: number | number[] + xl: number | number[] + xxl: number | number[] +} export const rowProps = { align: { type: String as PropType, default: 'top' }, - // gutter: { - // type: [Number, Object, Array] as PropType, - // default: 0 - // }, + gutter: { + type: [Number, Object, Array] as PropType, + default: 0 + }, justify: { type: String as PropType, default: 'start' @@ -25,21 +34,6 @@ export const rowProps = { export type RowProps = ExtractPropTypes -// export const ALIGN_FORMAT = { -// top: 'flex-start', -// middle: 'center', -// bottom: 'flex-end' -// } - -// export const JUSTIFY_FORMAT = { -// start: 'flex-start', -// end: 'flex-end', -// center: 'center', -// 'space-around': 'space-around', -// 'space-between': 'space-between' -// } - - const screenSizesProp = [Number, Object] as PropType export const screenSizes = { diff --git a/devui/grid/src/row.scss b/devui/grid/src/row.scss index c5fcf70d..b5b3df4a 100644 --- a/devui/grid/src/row.scss +++ b/devui/grid/src/row.scss @@ -7,13 +7,13 @@ } @each $prefix, $value in (top, flex-start), (middle, center), (bottom, flex-end) { - .devui-row-algin-#{$prefix} { + .devui-row-align-#{$prefix} { align-items: $value; } } -@each $prefix, $value in (start, flex-start), (center, center), (end, flex-end), (space-around, space-around), (space-between, space-between) { +@each $prefix, $value in (start, flex-start), (center, center), (end, flex-end), (around, space-around), (between, space-between) { .devui-row-justify-#{$prefix} { - justify-items: $value; + justify-content: $value; } } diff --git a/devui/grid/src/row.tsx b/devui/grid/src/row.tsx index 226589e5..6e6bb5b3 100644 --- a/devui/grid/src/row.tsx +++ b/devui/grid/src/row.tsx @@ -1,6 +1,7 @@ -import { defineComponent, computed } from 'vue' +import { defineComponent, computed, ref, Ref, CSSProperties, onMounted, onUnmounted, provide } from 'vue' import { rowProps, RowProps } from './grid-types' import { formatClass } from './use-grid' +import { responesScreen, Screen, RESULT_SCREEN, removeSubscribeCb } from './use-screen' import './row.scss' const CLASS_PREFIX = 'devui-row' @@ -10,6 +11,7 @@ export default defineComponent({ props: rowProps, emits: [], setup(props: RowProps, { slots }) { + const gutterScreenSize = ref({}) const rowClass = computed(() => { const alignClass = formatClass(`${CLASS_PREFIX}-align`, props.align) @@ -18,6 +20,50 @@ export default defineComponent({ return `${alignClass}${justifyClass}${wrapClass}` }) + let token + + onMounted(() => { + token = responesScreen(screen => { + gutterScreenSize.value = screen + }) + }) + + onUnmounted(() => { + removeSubscribeCb(token) + }) + + const gutterStyle = computed(() => { + if (!props.gutter) { + return {} + } + let currentGutter = [0, 0] + if (Array.isArray(props.gutter)) { + currentGutter = props.gutter as number[] + } else if (typeof props.gutter === 'number') { + currentGutter = [props.gutter as number, 0] + } else { + RESULT_SCREEN.some(size => { + const gzs = props.gutter[size] + if (gutterScreenSize.value[size] && gzs) { + if (typeof gzs === 'number') { + currentGutter = [gzs, 0] + } else { + currentGutter = gzs + } + return true + } + return false + }) + } + const paddingLeft = `${(currentGutter[0] || 0) / 2}px` + const paddingRight = `${(currentGutter[0] || 0) / 2}px` + const paddingTop = `${(currentGutter[1] || 0) / 2}px` + const paddingBottom = `${(currentGutter[1] || 0) / 2}px` + return { paddingLeft, paddingRight, paddingTop, paddingBottom } + }) + + provide>('gutterStyle', gutterStyle) + return () =>
{slots.default?.()}
} }) diff --git a/devui/grid/src/use-grid.ts b/devui/grid/src/use-grid.ts index 770b2f12..a303a362 100644 --- a/devui/grid/src/use-grid.ts +++ b/devui/grid/src/use-grid.ts @@ -44,4 +44,4 @@ export function useSize (colSizes: ScreenSizes) { return total }, '') }) -} \ No newline at end of file +} diff --git a/devui/grid/src/use-screen.ts b/devui/grid/src/use-screen.ts new file mode 100644 index 00000000..98d86f99 --- /dev/null +++ b/devui/grid/src/use-screen.ts @@ -0,0 +1,84 @@ + +export const RESULT_SCREEN = ['xxl', 'xl', 'lg', 'md', 'sm', 'xs'] + +const screenMedias = { + xs: 'screen and (max-width: 575px)', + sm: 'screen and (min-width: 576px)', + md: 'screen and (min-width: 768px)', + lg: 'screen and (min-width: 992px)', + xl: 'screen and (min-width: 1200px)', + xxl: 'screen and (min-width: 1600px)', +} as const + +export interface Screen { + xs?: boolean + sm?: boolean + md?: boolean + lg?: boolean + xl?: boolean + xxl?: boolean +} + +export type ScreenMediasKey = keyof typeof screenMedias +type SubscribeCb = (screen: Screen) => void + +const subscribers = new Map() +let subUid = -1 +const screen: Screen = {} +const results: { + [key: string]: { + res: MediaQueryList + listener: (this: MediaQueryList, ev: MediaQueryListEvent) => void + } + } = {}; + +export function responesScreen (func: SubscribeCb) { + if (!subscribers.size) { + register() + } + subUid += 1 + subscribers.set(subUid, func) + func({ ...screen }) + return subUid +} + +export function removeSubscribeCb (id: number) { + subscribers.delete(id) + if (subscribers.size === 0) { + unRegister() + } +} + +function register () { + Object.keys(screenMedias).forEach(key => { + const result = window.matchMedia(screenMedias[key]) + if (result.matches) { + screen[key as ScreenMediasKey] = true + dispatch() + } + const listener = e => { + screen[key as ScreenMediasKey] = e.matches + dispatch() + } + result.addEventListener('change', listener) + + results[key] = { + res: result, + listener + } + }) +} + +function unRegister () { + Object.keys(screenMedias).forEach(key => { + const handler = results[key] + handler.res.removeEventListener('change', handler.listener) + }) + subscribers.clear() +} + +function dispatch () { + subscribers.forEach(value => { + value({ ...screen }) + }) +} diff --git a/docs/components/grid/index.md b/docs/components/grid/index.md index b5204815..2a67551b 100644 --- a/docs/components/grid/index.md +++ b/docs/components/grid/index.md @@ -1,68 +1,316 @@ # Grid 栅格 -// todo 组件描述 - +24栅格系统。 ### 何时使用 -// todo 使用时机描述 +需要使用弹性布局时，并且需要适配不同的屏幕时，使用grid组件。 ### 基本用法 -// todo 用法描述 -:::demo // todo 展开代码的内部描述 + +基础栅格 + +:::demo 使用 Row 和 Col组件，可以创建一个基本的栅格系统，Col必须放在Row里面。 ```vue - +:::demo 使用Row的align属性和justify属性子元素垂直对齐和水平对齐。 - ``` ::: +### flex填充 + +Col的flex属性支持flex填充。 + +:::demo + +```vue + +``` + +::: + +### 左右偏移 + +使用Col的offset、pull和push来使子元素左右偏移。 + +:::demo 列偏移。使用 offset 可以将列向右侧偏。例如，offset={4} 将元素向右侧偏移了 4 个列（column）的宽度；offset、pull、push也可以内嵌到。 + +```vue + +``` + +::: + +### 响应式布局 + +预设六个响应尺寸：xs sm md lg xl xxl。 + +:::demo 参照 Bootstrap 的 [响应式设计](https://getbootstrap.com/docs/3.4/css/)。 + +```vue + +``` + +::: + +### 栅格排序 + +列排序。通过使用order、 push 和 pull 类就可以改变列（column）的顺。 + +:::demo 参照 Bootstrap 的 [响应式设计](https://getbootstrap.com/docs/3.4/css/)。 + +```vue + +``` + +::: + ### d-grid -d-grid 参数 +d-row 参数 | 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | | ---- | ---- | ---- | ---- | --------- | --------- | -| | | | | | | -| | | | | | | -| | | | | | | - -d-grid 事件 +| align | `string` | `'top'` | flex 布局下的垂直对齐方式：`'top'`，`'middle'`，`'bottom'` | [垂直对齐](#垂直对齐) | | +| justify | `string` | `'start'` | flex 布局下的垂直对齐方式：`'start'`，`'end'`，`'center'`，`'space-around'`，`'space-between'` | [垂直对齐](#垂直对齐) | | +| gutter | `number\|array\|object` | 0 | 栅格间隔，数值形式：水平间距。对象形式支持响应式： { xs: 8, sm: 16, md: 24}。数组形式：[水平间距, 垂直间距]。 | [对齐](#对齐) | | +| wrap | `boolean` | false | 是否自动换行 | | | -| 事件 | 类型 | 说明 | 跳转 Demo | -| ---- | ---- | ---- | --------- | -| | | | | -| | | | | -| | | | | +d-col 参数 +| 参数 | 类型 | 默认 | 说明 | 跳转 Demo | 全局配置项 | +| ---- | ---- | ---- | ---- | --------- | --------- | +| span | `number` | - | 栅格占位格数，为 0 时相当于 display: none | [基本用法](#基本用法) | | +| flex | `string\|number` | - | flex 布局填充 | [flex填充](#flex填充) | | +| offset | `number` | - | 栅格左侧的间隔格数，间隔内不可以有栅格 | [左右偏移](#左右偏移) | +| pull | `number` | - | 栅格向左移动格数 | [左右偏移](#左右偏移)、[栅格排序](#栅格排序) | +| push | `number` | - | 栅格向右移动格数 | [左右偏移](#左右偏移)、[栅格排序](#栅格排序) | +| order | `number` | - | 栅格顺序，flex 布局模式下有效 | [栅格排序](#栅格排序) | +| xs | `number\|object` | - | <576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [栅格排序](#栅格排序) | +| sm | `number\|object` | - | >=576px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| md | `number\|object` | - | >=768px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| lg | `number\|object` | - | >=992px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| xl | `number\|object` | - | >=1200px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | +| xxl | `number\|object` | - | >=1600px 响应式栅格，可为栅格数或一个包含其他属性的对象 | [响应式布局](#响应式布局) | \ No newline at end of file -- Gitee