/**
 * title: "超长翻页/下拉形态（以小号 32px 尺寸为例）"
 * description: ""
 */
import React from 'react';
import { Tab } from '@alicloud/console-components';

const tabs = [
  { tab: '当前选项', key: '1' },
  { tab: '可选选项', key: '2' },
  { tab: '可选选项', key: '3' },
  { tab: '可选选项', key: '4' },
  { tab: '可选选项', key: '5' },
  { tab: '可选选项', key: '6' },
  { tab: '可选选项', key: '7' },
  { tab: '可选选项', key: '8' },
  { tab: '可选选项', key: '9' },
  { tab: '可选选项', key: '10' },
  { tab: '可选选项', key: '11' },
  { tab: '可选选项', key: '12' },
  { tab: '可选选项', key: '13' },
  { tab: '可选选项', key: '14' },
  { tab: '可选选项', key: '15' },
  { tab: '可选选项', key: '16' },
  { tab: '可选选项', key: '17' },
  { tab: '可选选项', key: '18' },

];

export default () => {
  return (
    <>
      <div>
        <h4>页签选项卡 - 左右翻页</h4>
        <Tab shape="wrapped" size="small">
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} />
          ))}
        </Tab>
        <br />
        <h4>页签选项卡 - 下拉选择</h4>
        <Tab shape="wrapped" size="small" excessMode='dropdown'>
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} />
          ))}
        </Tab>
      </div>
      <br />
      <div>
        <h4>线性选项卡 - 左右翻页</h4>
        <Tab size="small">
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} />
          ))}
        </Tab>
        <br />
        <h4>线性选项卡 - 下拉选择</h4>
        <Tab size="small" excessMode='dropdown'>
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} />
          ))}
        </Tab>
      </div>
    </>
  );
};