import snippets from './snippets';
import { stringProp } from '../_utils/css';

export default {
  title: '栅格',
  category: '布局',
  group: '基础组件',
  docUrl: 'https://mobile.ant.design/zh/components/grid',
  componentName: 'AMGrid',
  props: [
    {
      name: 'columns',
      title: { label: '列数', tip: 'columns | 列数' },
      propType: 'number',
      setter: [
        {
          componentName: 'NumberSetter',
          props: {
            min: 1,
          },
        },
      ],
    },
    {
      name: 'gap',
      title: { label: '间距', tip: 'gap | 间距' },
      propType: 'number',
      setter: [
        {
          componentName: 'NumberSetter',
          props: {
            min: 1,
          },
        },
      ],
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        stringProp('gap', '间距大小', '间距大小'),
        stringProp('gap-horizontal', '水平间距'),
        stringProp('gap-vertical', '垂直间距'),
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
      component: { isContainer: true, nestingRule: { childWhitelist: ['AMGrid.Item'] } },
    },
    supports: { style: true, className: true },
  },
  snippets,
};