/**
 * title: "基础形态"
 * description: ""
 */
import React from 'react';
import { Tab } from '@alicloud/console-components';

const tabs = [
  { tab: '当前选项', key: 'home' },
  { tab: '可选选项', key: 'doc' },
  { tab: '可选选项', key: 'api' },
  { tab: '禁用选项', key: 'repo', disabled: true },
];

export default () => {
  return (
    <>
      <div>
        <h4>页签选项卡 - 默认36px</h4>
        <Tab shape="wrapped" >
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
          ))}
        </Tab>
        <br />
        <h4>页签选项卡 - 小号32px</h4>
        <Tab shape="wrapped" size="small">
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
          ))}
        </Tab>
      </div>
      <br />
      <div>
        <h4>线性选项卡 - 默认36px</h4>
        <Tab>
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
          ))}
        </Tab>
        <br />
        <h4>线性选项卡 - 小号32px</h4>
        <Tab size="small">
          {tabs.map((tab) => (
            <Tab.Item title={tab.tab} key={tab.key} disabled={tab.disabled} />
          ))}
        </Tab>
      </div>
    
    </>
  );
};