export default {
  column: '2',
  owner: '',
  demos: [
    {
      demoId: 'basic-usage',
      name: {
        'zh-CN': '基本用法',
        'en-US': 'Basic Usage'
      },
      desc: {
        'zh-CN': '<p>通过 <code>data</code> 设置按钮组数据，<code>v-model</code> 设置绑定值。</p>',
        'en-US':
          '<p>Set the button group data through <code>data</code> , and set the binding value through <code>v model</code> .</p>'
      },
      codeFiles: ['basic-usage.vue']
    },
    {
      demoId: 'size',
      name: {
        'zh-CN': '组件尺寸大小',
        'en-US': 'Set Component Size'
      },
      desc: {
        'zh-CN':
          '<p>通过 <code>size</code> 设置尺寸大小，可选值有 <code>medium</code> 、<code>small</code> 、<code>mini</code> 。</p>',
        'en-US':
          '<p>Set the size through <code>size</code> . The optional values are: <code>medium</code> , <code>small</code> , <code>mini</code> .</p>'
      },
      codeFiles: ['size.vue']
    },
    {
      demoId: 'disabled',
      name: {
        'zh-CN': '禁用状态',
        'en-US': 'Disabled'
      },
      desc: {
        'zh-CN':
          '<p>通过 <code>disabled</code> 设置按钮组是否禁用，数据项设置 <code>disabled</code> 属性可以禁用单个按钮。</p>',
        'en-US':
          '<p>By setting whether the button group is disabled through <code>disabled</code> , and setting the <code>disabled</code> property of the data item, individual buttons can be disabled.</p>'
      },
      codeFiles: ['disabled.vue']
    },
    {
      demoId: 'plain',
      name: {
        'zh-CN': '朴素按钮',
        'en-US': 'Simple button'
      },
      desc: {
        'zh-CN': '<p>通过 <code>plain</code> 设置是否为朴素按钮。</p>',
        'en-US': '<p>Set whether it is a plain button through <code>plain</code> .</p>'
      },
      codeFiles: ['plain.vue']
    },
    {
      demoId: 'text-value-field',
      name: {
        'zh-CN': '数据字段映射',
        'en-US': 'Data Field Mapping'
      },
      desc: {
        'zh-CN':
          '<p>若按钮组数据对象中的字段不是默认的 <code>text</code> 和 <code>value</code> ，则可通过 <code>text-field</code> 、<code>value-field</code> 属性进行映射。</p>',
        'en-US':
          '<p>If the fields in the button group data object are not the default text and value, the <code>text-field</code> and <code>value-field</code> attributes can be used for mapping. </p>'
      },
      codeFiles: ['text-value-field.vue']
    },
    {
      demoId: 'show-more',
      name: {
        'zh-CN': '显示更多按钮',
        'en-US': 'Display More Buttons'
      },
      desc: {
        'zh-CN': '<p>通过 <code>show-more</code> 设置显示更多按钮，当按钮数量大于设置值时，将显示更多按钮。</p>',
        'en-US':
          '<p>By setting <code>show more</code> to display more buttons, when the number of buttons exceeds the set value, more buttons will be displayed. </p>'
      },
      codeFiles: ['show-more.vue']
    },
    {
      demoId: 'show-edit',
      name: {
        'zh-CN': '编辑按钮',
        'en-US': 'Display Edit Button'
      },
      desc: {
        'zh-CN':
          '<p>设置了显示更多按钮后，可以通过 <code>show-edit</code> 设置是否显示编辑按钮。点击编辑按钮后触发 <code>edit</code> 事件。</p>',
        'en-US':
          '<p>After setting up to display more buttons, You can set whether to display the edit button through <code>show edit</code> . After clicking the edit button, the <code>edit</code> event is triggered.</p>'
      },
      codeFiles: ['show-edit.vue']
    },
    {
      demoId: 'slot-default',
      name: {
        'zh-CN': '默认插槽',
        'en-US': 'Default slot'
      },
      desc: {
        'zh-CN':
          '<p>使用默认插槽自定义按钮组，使用默认插槽后， <code>button-group</code> 的 <code>data</code> 、<code>text-field</code> 、<code>value-field</code> 、<code>value / v-model</code> 、<code>size</code> 属性对插槽中的按钮将不再生效。</p>',
        'en-US':
          '<p>When the default slot mode is used, the <code>data, text-field, value-field, v-model, and size</code> attributes of the ButtonGroup do not take effect for buttons in the slot. </p>'
      },
      codeFiles: ['slot-default.vue']
    },
    {
      demoId: 'slot-empty',
      name: {
        'zh-CN': '空数据插槽',
        'en-US': 'Empty slot'
      },
      desc: {
        'zh-CN': '<p>当数据为空时，默认会显示暂无数据，通过默认插槽自定义内容。</p>',
        'en-US': '<p>When the data is empty, customize the content via the <code>empty</code> slot.</p>'
      },
      codeFiles: ['slot-empty.vue']
    },
    {
      demoId: 'button-group-multiple',
      name: {
        'zh-CN': '多行按钮组',
        'en-US': 'Button Group Multiple'
      },
      desc: {
        'zh-CN': '<p>多行按钮组，当超出最大宽度后，换行显示。</p>',
        'en-US':
          '<p>Multi-line button group, after exceeding the maximum width, it will be displayed in a new line.</p>'
      },
      codeFiles: ['button-group-multiple.vue']
    },
    {
      demoId: 'border',
      name: {
        'zh-CN': '边框',
        'en-US': 'Border'
      },
      desc: {
        'zh-CN': '<p>通过 <code>border</code> 设置有无边框。</p>',
        'en-US': '<p>Set whether there is a border through <code>border</code> .</p>'
      },
      codeFiles: ['border.vue']
    },
    {
      demoId: 'sup',
      name: {
        'zh-CN': '选块角标',
        'en-US': ''
      },
      desc: {
        'zh-CN':
          '<p>通过 <code>data</code> 的 <code>sup</code> 属性配置选块角标，详见 <a href="IButtonGroupData">IButtonGroupData</a> 。</p>',
        'en-US': ''
      },
      codeFiles: ['sup.vue']
    },
    {
      demoId: 'change-event',
      name: {
        'zh-CN': '事件',
        'en-US': 'Change Event'
      },
      desc: {
        'zh-CN': '<p>当选中按钮发生改变时触发 <code>change</code> 事件。</p>',
        'en-US': '<p>The <code>change</code> event is triggered when the selected button is changed. </p>'
      },
      codeFiles: ['change-event.vue']
    }
  ]
}
