import {  color, height, pxProp, width } from '../_utils/css';
import snippets from './snippets';

export default {
  snippets,
  componentName: 'AMSideBar',
  docUrl: 'https://ant-design-mobile.antgroup.com/zh/components/side-bar',
  title: '侧边导航',
  category: '导航',
  group: '基础组件',
  props: [
    {
      name: 'activeKey',
      title: "当前激活item的key",
      propType: 'string',
      setter: 'StringSetter',
      
    },
    {
      name: 'defaultActiveKey',
      title: "初始化选中item的key",
      propType: 'string',
      setter: 'StringSetter',
    },
    {
      title: 'CSS变量',
      display: 'block',
      type: 'group',
      items: [
        color('background', '背景颜色'),
        height('', '侧边导航高度'),
        pxProp('item-border-radius', '当前激活item的圆角'),
        width('', '侧边导航宽度'),
      ],
    },
  ],
  configure: {
    component: {
      isContainer: true,
      nestingRule: { childWhitelist: ['AMSideBar.Item'] } 
    },
    supports: {
      style: true,
      events: [
        {
          name: 'onChange',
          template: "onChange(string){\n// 切换面板的回调\nconsole.log('onChange');}",
        },
      ]
    },
  },
};