mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-02 03:58:07 +08:00
chore: 调整 grid 样式
This commit is contained in:
liaoxuezhi
parent
34756649e8
commit
b0de4f4dae
@ -17,28 +17,25 @@ order: 46
|
||||
"className": "b-a bg-dark lter",
|
||||
"columns": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "md: 3",
|
||||
"md": 3,
|
||||
"className": "b-r"
|
||||
|
||||
"md": 0,
|
||||
"body": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "md: 3",
|
||||
"className": "b-r"
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "md: 9",
|
||||
"md": 9
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
{
|
||||
"type": "grid",
|
||||
"className": "b-a m-t bg-dark lter",
|
||||
"columns": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "mdOffset: 3",
|
||||
"mdOffset": 3
|
||||
"md": 9,
|
||||
"body": [
|
||||
{
|
||||
"type": "plain",
|
||||
"text": "md: 9"
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
@ -53,10 +50,10 @@ order: 46
|
||||
| className | `string` | | 外层 Dom 的类名 |
|
||||
| columns | `Array` | | 列集合 |
|
||||
| columns[x] | [SchemaNode](../../docs/types/schemanode) | | 成员可以是其他渲染器 |
|
||||
| columns[x].xs | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].xs | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||||
| columns[x].columnClassName | | | 列类名 |
|
||||
| columns[x].sm | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].md | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].lg | `int` | | 宽度占比： 1 - 12 |
|
||||
| columns[x].sm | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||||
| columns[x].md | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||||
| columns[x].lg | `int` or "auto" | | 宽度占比： 1 - 12 |
|
||||
|
||||
更多使用说明，请参看 [Grid Props](https://react-bootstrap.github.io/layout/grid/#col-props)
|
||||
|
||||
@ -397,7 +397,7 @@ $text-color: #58666e !default;
|
||||
|
||||
// 部分遍历难以用自定义属性替换，所以保留
|
||||
$Grid-columns: 12 !default;
|
||||
$Grid-gutterWidth: px2rem(30px) !default;
|
||||
$Grid-gutterWidth: px2rem(16px) !default;
|
||||
|
||||
$zindex-affix: 900 !default;
|
||||
$zindex-dropdown: 1000 !default;
|
||||
|
||||
@ -1,94 +1,4 @@
|
||||
// .#{$ns}form-grid {
|
||||
// >div>.form-group {
|
||||
// margin-left: 0;
|
||||
// margin-right: 0;
|
||||
// }
|
||||
// }
|
||||
|
||||
// Grid
|
||||
// @mixin container-fixed($gutter: $Grid-gutterWidth) {
|
||||
// margin-right: auto;
|
||||
// margin-left: auto;
|
||||
// padding-left: floor(($gutter / 2));
|
||||
// padding-right: ceil(($gutter / 2));
|
||||
// @include clearfix;
|
||||
// }
|
||||
|
||||
// Framework Grid
|
||||
// @mixin make-grid-columns($i: 1, $list: ".#{$ns}Grid-col--xs#{$i}, .#{$ns}Grid-col--sm#{$i}, .#{$ns}Grid-col--md#{$i}, .#{$ns}Grid-col--lg#{$i}") {
|
||||
// @for $i from (1 + 1) through $Grid-columns {
|
||||
// $list: "#{$list}, .#{$ns}Grid-col--xs#{$i}, .#{$ns}Grid-col--sm#{$i}, .#{$ns}Grid-col--md#{$i}, .#{$ns}Grid-col--lg#{$i}";
|
||||
// }
|
||||
|
||||
// #{$list} {
|
||||
// position: relative;
|
||||
// min-height: 1px;
|
||||
// padding-left: ceil(($Grid-gutterWidth / 2));
|
||||
// padding-right: floor(($Grid-gutterWidth / 2));
|
||||
// }
|
||||
// }
|
||||
|
||||
// @mixin float-grid-columns($class, $i: 1, $list: ".#{$ns}Grid-col--#{$class}#{$i}") {
|
||||
// @for $i from (1 + 1) through $Grid-columns {
|
||||
// $list: "#{$list}, .#{$ns}Grid-col--#{$class}#{$i}";
|
||||
// }
|
||||
|
||||
// #{$list} {
|
||||
// float: left;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @mixin calc-grid-column($index, $class, $type) {
|
||||
// @if ($type==width) and ($index > 0) {
|
||||
// .#{$ns}Grid-col--#{$class}#{$index} {
|
||||
// width: percentage(($index / $Grid-columns));
|
||||
// }
|
||||
// }
|
||||
|
||||
// @if ($type==push) and ($index > 0) {
|
||||
// .#{$ns}Grid-col--#{$class}Push#{$index} {
|
||||
// left: percentage(($index / $Grid-columns));
|
||||
// }
|
||||
// }
|
||||
|
||||
// @if ($type==push) and ($index==0) {
|
||||
// .#{$ns}Grid-col--#{$class}Push0 {
|
||||
// left: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @if ($type==pull) and ($index > 0) {
|
||||
// .#{$ns}Grid-col--#{$class}Pull#{$index} {
|
||||
// right: percentage(($index / $Grid-columns));
|
||||
// }
|
||||
// }
|
||||
|
||||
// @if ($type==pull) and ($index==0) {
|
||||
// .#{$ns}Grid-col--#{$class}Pull0 {
|
||||
// right: auto;
|
||||
// }
|
||||
// }
|
||||
|
||||
// @if ($type==offset) {
|
||||
// .#{$ns}Grid-col--#{$class}Offset#{$index} {
|
||||
// margin-left: percentage(($index / $Grid-columns));
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
// @mixin loop-grid-columns($columns, $class, $type) {
|
||||
// @for $i from 0 through $columns {
|
||||
// @include calc-grid-column($i, $class, $type);
|
||||
// }
|
||||
// }
|
||||
|
||||
@mixin make-grid($class) {
|
||||
// @include float-grid-columns($class);
|
||||
// @include loop-grid-columns($Grid-columns, $class, width);
|
||||
// @include loop-grid-columns($Grid-columns, $class, pull);
|
||||
// @include loop-grid-columns($Grid-columns, $class, push);
|
||||
// @include loop-grid-columns($Grid-columns, $class, offset);
|
||||
|
||||
@for $i from 1 through $Grid-columns {
|
||||
.#{$ns}Grid-col--#{$class}#{$i} {
|
||||
flex: 0 0 percentage($i / $Grid-columns);
|
||||
@ -108,6 +18,14 @@
|
||||
padding-left: ($Grid-gutterWidth / 2);
|
||||
padding-right: ($Grid-gutterWidth / 2);
|
||||
}
|
||||
|
||||
.#{$ns}Grid-col--#{$class}Auto {
|
||||
flex: 0 0 auto;
|
||||
width: auto;
|
||||
max-width: 100%;
|
||||
padding-left: ($Grid-gutterWidth / 2);
|
||||
padding-right: ($Grid-gutterWidth / 2);
|
||||
}
|
||||
}
|
||||
|
||||
// Generate Grid row
|
||||
@ -118,28 +36,6 @@
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
// .#{$ns}Grid-container {
|
||||
// @include container-fixed;
|
||||
|
||||
// @include media-breakpoint-up(sm) {
|
||||
// width: $container-sm;
|
||||
// }
|
||||
|
||||
// @include media-breakpoint-up(md) {
|
||||
// width: $container-md;
|
||||
// }
|
||||
|
||||
// @include media-breakpoint-up(lg) {
|
||||
// width: $container-lg;
|
||||
// }
|
||||
// }
|
||||
|
||||
// .#{$ns}Grid-container-fluid {
|
||||
// @include container-fixed;
|
||||
// }
|
||||
|
||||
// @include make-grid-columns;
|
||||
|
||||
@include make-grid(xs);
|
||||
|
||||
@include media-breakpoint-up(sm) {
|
||||
|
||||
@ -9,6 +9,7 @@ import {
|
||||
SchemaObject
|
||||
} from '../Schema';
|
||||
import {FormSchemaHorizontal} from './Form/index';
|
||||
import {ucFirst} from '../utils/helper';
|
||||
|
||||
export const ColProps = ['lg', 'md', 'sm', 'xs'];
|
||||
|
||||
@ -16,22 +17,22 @@ export type GridColumnObject = {
|
||||
/**
|
||||
* 极小屏（<768px）时宽度占比
|
||||
*/
|
||||
xs?: number;
|
||||
xs?: number | 'auto';
|
||||
|
||||
/**
|
||||
* 小屏时（>=768px）宽度占比
|
||||
*/
|
||||
sm?: number;
|
||||
sm?: number | 'auto';
|
||||
|
||||
/**
|
||||
* 中屏时(>=992px)宽度占比
|
||||
*/
|
||||
md?: number;
|
||||
md?: number | 'auto';
|
||||
|
||||
/**
|
||||
* 大屏时(>=1200px)宽度占比
|
||||
*/
|
||||
lg?: number;
|
||||
lg?: number | 'auto';
|
||||
|
||||
/**
|
||||
* 配置子表单项默认的展示方式。
|
||||
@ -70,12 +71,7 @@ export interface GridSchema extends BaseSchema {
|
||||
export interface GridProps
|
||||
extends RendererProps,
|
||||
Omit<GridSchema, 'type' | 'className' | 'columnClassName'> {
|
||||
itemRender?: (
|
||||
item: any,
|
||||
key: number,
|
||||
length: number,
|
||||
props: any
|
||||
) => JSX.Element;
|
||||
itemRender?: (item: any, length: number, props: any) => JSX.Element;
|
||||
}
|
||||
|
||||
function fromBsClass(cn: string) {
|
||||
@ -97,7 +93,7 @@ function copProps2Class(props: any): string {
|
||||
modifier =>
|
||||
props &&
|
||||
props[modifier] &&
|
||||
cns.push(`Grid-col--${modifier}${props[modifier]}`)
|
||||
cns.push(`Grid-col--${modifier}${ucFirst(props[modifier])}`)
|
||||
);
|
||||
cns.length || cns.push('Grid-col--md');
|
||||
return cns.join(' ');
|
||||
@ -110,14 +106,13 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
|
||||
renderChild(
|
||||
region: string,
|
||||
node: SchemaCollection,
|
||||
key: number,
|
||||
length: number,
|
||||
props: any = {}
|
||||
) {
|
||||
const {render, itemRender} = this.props;
|
||||
|
||||
return itemRender
|
||||
? itemRender(node, key, length, this.props)
|
||||
? itemRender(node, length, this.props)
|
||||
: render(region, node, props);
|
||||
}
|
||||
|
||||
@ -147,17 +142,11 @@ export default class Grid<T> extends React.Component<GridProps & T, object> {
|
||||
fromBsClass((column as any).columnClassName!)
|
||||
)}
|
||||
>
|
||||
{this.renderChild(
|
||||
`column/${key}`,
|
||||
(column as any).body || '',
|
||||
key,
|
||||
length,
|
||||
{
|
||||
formMode: column.mode || subFormMode || formMode,
|
||||
formHorizontal:
|
||||
column.horizontal || subFormHorizontal || formHorizontal
|
||||
}
|
||||
)}
|
||||
{this.renderChild(`column/${key}`, (column as any).body || '', length, {
|
||||
formMode: column.mode || subFormMode || formMode,
|
||||
formHorizontal:
|
||||
column.horizontal || subFormHorizontal || formHorizontal
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1200,7 +1200,9 @@ export function getTreeParent<T extends TreeItem>(tree: Array<T>, value: T) {
|
||||
}
|
||||
|
||||
export function ucFirst(str?: string) {
|
||||
return str ? str.substring(0, 1).toUpperCase() + str.substring(1) : '';
|
||||
return typeof str === 'string'
|
||||
? str.substring(0, 1).toUpperCase() + str.substring(1)
|
||||
: str;
|
||||
}
|
||||
|
||||
export function lcFirst(str?: string) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user