设计
设计指南
设计原则
样式指南
设计资源
Klein - Figma
Klein Font
官方图标库
开发
开发文档
React
Vue Web
敬请期待
开发资源
GitHub 代码仓库
生态产品
生态产品
Orion Fonts
敬请期待
Orio Market
敬请期待
Klein Pro
敬请期待
Klein Editor
敬请期待
栅格 Grid
基于flex的栅格化布局,row定义行,col定义列。
基础栅格
使用单一的一组 Row 和 Col 栅格组件,就可以创建一个基本的栅格系统,所有列(Col)必须放在 Row 内。
响应式栅格
如果要支持响应式,可以写成 { xs: 8, sm: 16, md: 24, lg: 32 }。
如果需要垂直间距,可以写成数组形式 [水平间距, 垂直间距] [16, { xs: 8, sm: 16, md: 24, lg: 32 }]。
Col Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
span | 栅格占位格数 | number | - |
prefixCls | 自定义类名前缀 | string | - |
flex | flex布局属性 | string | - |
offset | 栅格左侧的间隔格数,输入为px,em,rem,%等类型的字符串时为即为输入值 | string | - |
Row Props
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
justify | 水平排列方式 | "start" | start |
align | 垂直对齐方式 | "top" | - |
gutter | 栅格间隔 | number | - |
prefixCls | 自定义类名前缀 | string | - |