标签页 Tabs - Mogu Design

Tab 1

Tab 2

Tab 3

Content of Tab Pane 1

默认选中第一项。

TypeScript
JavaScript
import React from 'react';
import { Tabs } from 'mogud';
import type { TabsProps } from 'mogud';

const onChange = (key: string) => {
  console.log(key);
};

const items: TabsProps['items'] = [
  {
    key: '1',
    label: `Tab 1`,
    children: `Content of Tab Pane 1`,
  },
  {
    key: '2',
    label: `Tab 2`,
    children: `Content of Tab Pane 2`,
  },
  {
    key: '3',
    label: `Tab 3`,
    children: `Content of Tab Pane 3`,
  },
];

const App: React.FC = () => <Tabs defaultActiveKey="1" items={items} onChange={onChange} />;

export default App;

Tab 1

Tab 2

Tab 3

Tab 1

禁用

禁用某一项。

TypeScript
JavaScript
import React from 'react';
import { Tabs } from 'mogud';

const App: React.FC = () => (
  <Tabs
    defaultActiveKey="1"
    items={[
      {
        label: 'Tab 1',
        key: '1',
        children: 'Tab 1',
      },
      {
        label: 'Tab 2',
        key: '2',
        children: 'Tab 2',
        disabled: true,
      },
      {
        label: 'Tab 3',
        key: '3',
        children: 'Tab 3',
      },
    ]}
  />
);

export default App;

Tab 1

Tab 2

Tab 3

Content of Tab Pane 1

居中

标签居中展示。

TypeScript
JavaScript
import React from 'react';
import { Tabs } from 'mogud';

const App: React.FC = () => (
  <Tabs
    defaultActiveKey="1"
    centered
    items={new Array(3).fill(null).map((_, i) => {
      const id = String(i + 1);
      return {
        label: `Tab ${id}`,
        key: id,
        children: `Content of Tab Pane ${id}`,
      };
    })}
  />
);

export default App;

Tab 1

Tab 2

图标

有图标的标签。

TypeScript
JavaScript
import React from 'react';
import { AndroidOutlined, AppleOutlined } from '@ant-design/icons';
import { Tabs } from 'mogud';

const App: React.FC = () => (
  <Tabs
    defaultActiveKey="2"
    items={[AppleOutlined, AndroidOutlined].map((Icon, i) => {
      const id = String(i + 1);

      return {
        label: (
          <span>
            <Icon />
            Tab {id}
          </span>
        ),
        key: id,
        children: `Tab ${id}`,
      };
    })}
  />
);

export default App;

HorizontalVertical

Tab-0

Tab-1

Tab-2

Tab-3

Tab-4

Tab-5

Tab-6

Tab-7

Tab-8

Tab-9

Tab-10

Tab-11

Tab-12

Tab-13

Tab-14

Tab-15

Tab-16

Tab-17

Tab-18

Tab-19

Tab-20

Tab-21

Tab-22

Tab-23

Tab-24

Tab-25

Tab-26

Tab-27

Tab-28

Tab-29

Content of tab 1

滑动

可以左右、上下滑动，容纳更多标签。

TypeScript
JavaScript
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'mogud';
import { Radio, Tabs } from 'mogud';

type TabPosition = 'left' | 'right' | 'top' | 'bottom';

const App: React.FC = () => {
  const [mode, setMode] = useState<TabPosition>('top');

  const handleModeChange = (e: RadioChangeEvent) => {
    setMode(e.target.value);
  };

  return (
    <div>
      <Radio.Group onChange={handleModeChange} value={mode} style={{ marginBottom: 8 }}>
        <Radio.Button value="top">Horizontal</Radio.Button>
        <Radio.Button value="left">Vertical</Radio.Button>
      </Radio.Group>
      <Tabs
        defaultActiveKey="1"
        tabPosition={mode}
        style={{ height: 220 }}
        items={new Array(30).fill(null).map((_, i) => {
          const id = String(i);
          return {
            label: `Tab-${id}`,
            key: id,
            disabled: i === 28,
            children: `Content of tab ${id}`,
          };
        })}
      />
    </div>
  );
};

export default App;

Tab 1

Tab 2

Tab 3

Content of tab 1

You can also specify its direction or both side

leftright

Tab 1

Tab 2

Tab 3

Content of tab 1

附加内容

可以在页签两边添加附加操作。

TypeScript
JavaScript
import React, { useMemo, useState } from 'react';
import { Button, Checkbox, Divider, Tabs } from 'mogud';

const CheckboxGroup = Checkbox.Group;

const operations = <Button>Extra Action</Button>;

const OperationsSlot: Record<PositionType, React.ReactNode> = {
  left: <Button className="tabs-extra-demo-button">Left Extra Action</Button>,
  right: <Button>Right Extra Action</Button>,
};

const options = ['left', 'right'];

type PositionType = 'left' | 'right';

const items = new Array(3).fill(null).map((_, i) => {
  const id = String(i + 1);
  return {
    label: `Tab ${id}`,
    key: id,
    children: `Content of tab ${id}`,
  };
});

const App: React.FC = () => {
  const [position, setPosition] = useState<PositionType[]>(['left', 'right']);

  const slot = useMemo(() => {
    if (position.length === 0) return null;

    return position.reduce(
      (acc, direction) => ({ ...acc, [direction]: OperationsSlot[direction] }),
      {},
    );
  }, [position]);

  return (
    <>
      <Tabs tabBarExtraContent={operations} items={items} />
      <br />
      <br />
      <br />
      <div>You can also specify its direction or both side</div>
      <Divider />
      <CheckboxGroup
        options={options}
        value={position}
        onChange={(value) => {
          setPosition(value as PositionType[]);
        }}
      />
      <br />
      <br />
      <Tabs tabBarExtraContent={slot} items={items} />
    </>
  );
};

export default App;
.tabs-extra-demo-button {
  margin-right: 16px;
}

.ant-row-rtl .tabs-extra-demo-button {
  margin-right: 0;
  margin-left: 16px;
}

SmallMiddleLarge

Tab 1

Tab 2

Tab 3

Content of tab 1

Card Tab 1

Card Tab 2

Card Tab 3

Content of card tab 1

大小

大号页签用在页头区域，小号用在弹出框等较狭窄的容器内。

TypeScript
JavaScript
import React, { useState } from 'react';
import type { RadioChangeEvent } from 'mogud';
import { Radio, Tabs } from 'mogud';
import type { SizeType } from 'mogud/es/config-provider/SizeContext';

const App: React.FC = () => {
  const [size, setSize] = useState<SizeType>('small');

  const onChange = (e: RadioChangeEvent) => {
    setSize(e.target.value);
  };

  return (
    <div>
      <Radio.Group value={size} onChange={onChange} style={{ marginBottom: 16 }}>
        <Radio.Button value="small">Small</Radio.Button>
        <Radio.Button value="middle">Middle</Radio.Button>
        <Radio.Button value="large">Large</Radio.Button>
      </Radio.Group>
      <Tabs
        defaultActiveKey="1"
        size={size}
        style={{ marginBottom: 32 }}
        items={new Array(3).fill(null).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
            key: id,
            children: `Content of tab ${id}`,
          };
        })}
      />
      <Tabs
        defaultActiveKey="1"
        type="card"
        size={size}
        items={new Array(3).fill(null).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Card Tab ${id}`,
            key: id,
            children: `Content of card tab ${id}`,
          };
        })}
      />
    </div>
  );
};

export default App;

Tab position:

topbottomleftright

Tab 1

Tab 2

Tab 3

Content of Tab 1

位置

有四个位置，tabPosition="left|right|top|bottom"。在移动端下，left|right 会自动切换成 top。

TypeScript
JavaScript
import type { RadioChangeEvent } from 'mogud';
import { Radio, Space, Tabs } from 'mogud';
import React, { useState } from 'react';

type TabPosition = 'left' | 'right' | 'top' | 'bottom';

const App: React.FC = () => {
  const [tabPosition, setTabPosition] = useState<TabPosition>('left');

  const changeTabPosition = (e: RadioChangeEvent) => {
    setTabPosition(e.target.value);
  };

  return (
    <>
      <Space style={{ marginBottom: 24 }}>
        Tab position:
        <Radio.Group value={tabPosition} onChange={changeTabPosition}>
          <Radio.Button value="top">top</Radio.Button>
          <Radio.Button value="bottom">bottom</Radio.Button>
          <Radio.Button value="left">left</Radio.Button>
          <Radio.Button value="right">right</Radio.Button>
        </Radio.Group>
      </Space>
      <Tabs
        tabPosition={tabPosition}
        items={new Array(3).fill(null).map((_, i) => {
          const id = String(i + 1);
          return {
            label: `Tab ${id}`,
            key: id,
            children: `Content of Tab ${id}`,
          };
        })}
      />
    </>
  );
};

export default App;

Tab 1

Tab 2

Tab 3

Content of Tab Pane 1

卡片式页签

另一种样式的页签，不提供对应的垂直样式。

TypeScript
JavaScript
import React from 'react';
import { Tabs } from 'mogud';

const onChange = (key: string) => {
  console.log(key);
};

const App: React.FC = () => (
  <Tabs
    onChange={onChange}
    type="card"
    items={new Array(3).fill(null).map((_, i) => {
      const id = String(i + 1);
      return {
        label: `Tab ${id}`,
        key: id,
        children: `Content of Tab Pane ${id}`,
      };
    })}
  />
);

export default App;

Tab 1

Tab 2

Tab 3

Content of Tab 1

新增和关闭页签

只有卡片样式的页签支持新增和关闭选项。使用 closable={false} 禁止关闭。

TypeScript
JavaScript
import React, { useRef, useState } from 'react';
import { Tabs } from 'mogud';

type TargetKey = React.MouseEvent | React.KeyboardEvent | string;

const initialItems = [
  { label: 'Tab 1', children: 'Content of Tab 1', key: '1' },
  { label: 'Tab 2', children: 'Content of Tab 2', key: '2' },
  {
    label: 'Tab 3',
    children: 'Content of Tab 3',
    key: '3',
    closable: false,
  },
];

const App: React.FC = () => {
  const [activeKey, setActiveKey] = useState(initialItems[0].key);
  const [items, setItems] = useState(initialItems);
  const newTabIndex = useRef(0);

  const onChange = (newActiveKey: string) => {
    setActiveKey(newActiveKey);
  };

  const add = () => {
    const newActiveKey = `newTab${newTabIndex.current++}`;
    const newPanes = [...items];
    newPanes.push({ label: 'New Tab', children: 'Content of new Tab', key: newActiveKey });
    setItems(newPanes);
    setActiveKey(newActiveKey);
  };

  const remove = (targetKey: TargetKey) => {
    let newActiveKey = activeKey;
    let lastIndex = -1;
    items.forEach((item, i) => {
      if (item.key === targetKey) {
        lastIndex = i - 1;
      }
    });
    const newPanes = items.filter((item) => item.key !== targetKey);
    if (newPanes.length && newActiveKey === targetKey) {
      if (lastIndex >= 0) {
        newActiveKey = newPanes[lastIndex].key;
      } else {
        newActiveKey = newPanes[0].key;
      }
    }
    setItems(newPanes);
    setActiveKey(newActiveKey);
  };

  const onEdit = (
    targetKey: React.MouseEvent | React.KeyboardEvent | string,
    action: 'add' | 'remove',
  ) => {
    if (action === 'add') {
      add();
    } else {
      remove(targetKey);
    }
  };

  return (
    <Tabs
      type="editable-card"
      onChange={onChange}
      activeKey={activeKey}
      onEdit={onEdit}
      items={items}
    />
  );
};

export default App;

Tab 1

Tab 2

Content of Tab Pane 1

自定义新增页签触发器

隐藏默认的页签增加图标，给自定义触发器绑定事件。

TypeScript
JavaScript
import React, { useRef, useState } from 'react';
import { Button, Tabs } from 'mogud';

type TargetKey = React.MouseEvent | React.KeyboardEvent | string;

const defaultPanes = new Array(2).fill(null).map((_, index) => {
  const id = String(index + 1);
  return { label: `Tab ${id}`, children: `Content of Tab Pane ${index + 1}`, key: id };
});

const App: React.FC = () => {
  const [activeKey, setActiveKey] = useState(defaultPanes[0].key);
  const [items, setItems] = useState(defaultPanes);
  const newTabIndex = useRef(0);

  const onChange = (key: string) => {
    setActiveKey(key);
  };

  const add = () => {
    const newActiveKey = `newTab${newTabIndex.current++}`;
    setItems([...items, { label: 'New Tab', children: 'New Tab Pane', key: newActiveKey }]);
    setActiveKey(newActiveKey);
  };

  const remove = (targetKey: TargetKey) => {
    const targetIndex = items.findIndex((pane) => pane.key === targetKey);
    const newPanes = items.filter((pane) => pane.key !== targetKey);
    if (newPanes.length && targetKey === activeKey) {
      const { key } = newPanes[targetIndex === newPanes.length ? targetIndex - 1 : targetIndex];
      setActiveKey(key);
    }
    setItems(newPanes);
  };

  const onEdit = (targetKey: TargetKey, action: 'add' | 'remove') => {
    if (action === 'add') {
      add();
    } else {
      remove(targetKey);
    }
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Button onClick={add}>ADD</Button>
      </div>
      <Tabs
        hideAdd
        onChange={onChange}
        activeKey={activeKey}
        type="editable-card"
        onEdit={onEdit}
        items={items}
      />
    </div>
  );
};

export default App;

Tab 1

Tab 2

Tab 3

Content of Tab Pane 1

自定义页签头

使用 react-sticky-box 和 renderTabBar 实现吸顶效果。

TypeScript
JavaScript
import React from 'react';
import type { TabsProps } from 'mogud';
import { Tabs, theme } from 'mogud';
import StickyBox from 'react-sticky-box';

const items = new Array(3).fill(null).map((_, i) => {
  const id = String(i + 1);
  return {
    label: `Tab ${id}`,
    key: id,
    children: `Content of Tab Pane ${id}`,
    style: i === 0 ? { height: 200 } : undefined,
  };
});

const App: React.FC = () => {
  const {
    token: { colorBgContainer },
  } = theme.useToken();
  const renderTabBar: TabsProps['renderTabBar'] = (props, DefaultTabBar) => (
    <StickyBox offsetTop={0} offsetBottom={20} style={{ zIndex: 1 }}>
      <DefaultTabBar {...props} style={{ background: colorBgContainer }} />
    </StickyBox>
  );
  return <Tabs defaultActiveKey="1" renderTabBar={renderTabBar} items={items} />;
};

export default App;

Tab 1

Tab 2

Tab 3

Content of Tab Pane 1

可拖拽标签

使用 dnd-kit 实现标签可拖拽。

TypeScript
JavaScript
import type { DragEndEvent } from '@dnd-kit/core';
import { DndContext, PointerSensor, useSensor } from '@dnd-kit/core';
import {
  arrayMove,
  horizontalListSortingStrategy,
  SortableContext,
  useSortable,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import { css } from '@emotion/css';
import { Tabs } from 'mogud';
import React, { useEffect, useState } from 'react';

interface DraggableTabPaneProps extends React.HTMLAttributes<HTMLDivElement> {
  'data-node-key': string;
  onActiveBarTransform: (className: string) => void;
}

const DraggableTabNode = ({ className, onActiveBarTransform, ...props }: DraggableTabPaneProps) => {
  const { attributes, listeners, setNodeRef, transform, transition, isSorting } = useSortable({
    id: props['data-node-key'],
  });

  const style: React.CSSProperties = {
    ...props.style,
    transform: CSS.Transform.toString(transform),
    transition,
    cursor: 'move',
  };

  useEffect(() => {
    if (!isSorting) {
      onActiveBarTransform('');
    } else if (className?.includes('ant-tabs-tab-active')) {
      onActiveBarTransform(
        css`
          .ant-tabs-ink-bar {
            transform: ${CSS.Transform.toString(transform)};
            transition: ${transition} !important;
          }
        `,
      );
    }
  }, [className, isSorting, transform]);

  return React.cloneElement(props.children as React.ReactElement, {
    ref: setNodeRef,
    style,
    ...attributes,
    ...listeners,
  });
};

const App: React.FC = () => {
  const [items, setItems] = useState([
    {
      key: '1',
      label: `Tab 1`,
      children: 'Content of Tab Pane 1',
    },
    {
      key: '2',
      label: `Tab 2`,
      children: 'Content of Tab Pane 2',
    },
    {
      key: '3',
      label: `Tab 3`,
      children: 'Content of Tab Pane 3',
    },
  ]);

  const [className, setClassName] = useState('');

  const sensor = useSensor(PointerSensor, { activationConstraint: { distance: 10 } });

  const onDragEnd = ({ active, over }: DragEndEvent) => {
    if (active.id !== over?.id) {
      setItems((prev) => {
        const activeIndex = prev.findIndex((i) => i.key === active.id);
        const overIndex = prev.findIndex((i) => i.key === over?.id);
        return arrayMove(prev, activeIndex, overIndex);
      });
    }
  };

  return (
    <Tabs
      className={className}
      items={items}
      renderTabBar={(tabBarProps, DefaultTabBar) => (
        <DndContext sensors={[sensor]} onDragEnd={onDragEnd}>
          <SortableContext items={items.map((i) => i.key)} strategy={horizontalListSortingStrategy}>
            <DefaultTabBar {...tabBarProps}>
              {(node) => (
                <DraggableTabNode
                  {...node.props}
                  key={node.key}
                  onActiveBarTransform={setClassName}
                >
                  {node}
                </DraggableTabNode>
              )}
            </DefaultTabBar>
          </SortableContext>
        </DndContext>
      )}
    />
  );
};

export default App;

参数	说明	类型	默认值	版本
activeKey	当前激活 tab 面板的 key	string	-
addIcon	自定义添加按钮	ReactNode	-	4.4.0
animated	是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"`	boolean\| { inkBar: boolean, tabPane: boolean }	{ inkBar: true, tabPane: false }
centered	标签居中展示	boolean	false	4.4.0
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	string	`第一个面板`
hideAdd	是否隐藏加号图标，在 `type="editable-card"` 时有效	boolean	false
items	配置选项卡内容	TabItemType	[]	4.23.0
moreIcon	自定义折叠 icon	ReactNode	<EllipsisOutlined />	4.14.0
popupClassName	更多菜单的 `className`	string	-	4.21.0
renderTabBar	替换 TabBar，用于二次封装标签头	(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement	-
size	大小，提供 `large` `middle` 和 `small` 三种大小	string	`middle`
tabBarExtraContent	tab bar 上额外的元素	ReactNode \| {left?: ReactNode, right?: ReactNode}	-	object: 4.6.0
tabBarGutter	tabs 之间的间隙	number	-
tabBarStyle	tab bar 的样式对象	CSSProperties	-
tabPosition	页签位置，可选值有 `top` `right` `bottom` `left`	string	`top`
destroyInactiveTabPane	被隐藏时是否销毁 DOM 结构	boolean	false
type	页签的基本样式，可选 `line`、`card` `editable-card` 类型	string	`line`
onChange	切换面板的回调	function(activeKey) {}	-
onEdit	新增和删除页签的回调，在 `type="editable-card"` 时有效	(action === 'add' ? event : targetKey, action): void	-
onTabClick	tab 被点击的回调	function(key: string, event: MouseEvent)	-
onTabScroll	tab 滚动时触发	function({ direction: `left` \| `right` \| `top` \| `bottom` })	-	4.3.0

参数	说明	类型	默认值
closeIcon	自定义关闭图标，在 `type="editable-card"` 时有效	ReactNode	-
closable	当前选项卡是否可被关闭，在 `type="editable-card"` 时有效	boolean	true
disabled	禁用某一项	boolean	false
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey	string	-
label	选项卡头显示文字	ReactNode	-
children	选项卡头显示内容	ReactNode	-

参数	说明	类型	默认值	版本
activeKey	当前激活 tab 面板的 key	string	-
addIcon	自定义添加按钮	ReactNode	-	4.4.0
animated	是否使用动画切换 Tabs, 仅生效于 `tabPosition="top"`	boolean\| { inkBar: boolean, tabPane: boolean }	{ inkBar: true, tabPane: false }
centered	标签居中展示	boolean	false	4.4.0
defaultActiveKey	初始化选中面板的 key，如果没有设置 activeKey	string	`第一个面板`
hideAdd	是否隐藏加号图标，在 `type="editable-card"` 时有效	boolean	false
items	配置选项卡内容	TabItemType	[]	4.23.0
moreIcon	自定义折叠 icon	ReactNode	<EllipsisOutlined />	4.14.0
popupClassName	更多菜单的 `className`	string	-	4.21.0
renderTabBar	替换 TabBar，用于二次封装标签头	(props: DefaultTabBarProps, DefaultTabBar: React.ComponentClass) => React.ReactElement	-
size	大小，提供 `large` `middle` 和 `small` 三种大小	string	`middle`
tabBarExtraContent	tab bar 上额外的元素	ReactNode \| {left?: ReactNode, right?: ReactNode}	-	object: 4.6.0
tabBarGutter	tabs 之间的间隙	number	-
tabBarStyle	tab bar 的样式对象	CSSProperties	-
tabPosition	页签位置，可选值有 `top` `right` `bottom` `left`	string	`top`
destroyInactiveTabPane	被隐藏时是否销毁 DOM 结构	boolean	false
type	页签的基本样式，可选 `line`、`card` `editable-card` 类型	string	`line`
onChange	切换面板的回调	function(activeKey) {}	-
onEdit	新增和删除页签的回调，在 `type="editable-card"` 时有效	(action === 'add' ? event : targetKey, action): void	-
onTabClick	tab 被点击的回调	function(key: string, event: MouseEvent)	-
onTabScroll	tab 滚动时触发	function({ direction: `left` \| `right` \| `top` \| `bottom` })	-	4.3.0

参数	说明	类型	默认值
closeIcon	自定义关闭图标，在 `type="editable-card"` 时有效	ReactNode	-
closable	当前选项卡是否可被关闭，在 `type="editable-card"` 时有效	boolean	true
disabled	禁用某一项	boolean	false
forceRender	被隐藏时是否渲染 DOM 结构	boolean	false
key	对应 activeKey	string	-
label	选项卡头显示文字	ReactNode	-
children	选项卡头显示内容	ReactNode	-

Mogu Design

Tabs标签页

Mogu Design

Tabs标签页

何时使用

代码演示

API

Tabs

TabItemType

何时使用

代码演示

API

Tabs

TabItemType