網頁上你常看到一些開關或切換分頁的方式，ANTD 裡也提供了兩種實用的 component 給我們選擇，分別是 Tabs 與 Segmented。Tabs 理所當然就是大家第一個印象中的那個分頁，就像在 Bootstrap 的 Navs and tabs 和 Tailwind 的 Default tabs 裡也有提供的那種 navbar 切換頁籤的效果。另外一個是大家可能比較少聽過的 Segmented，它在英文裡有部分、片段的意思，在 ANTD 官方文件中他們則稱它為分段控制器，我個人認為 Tabs 較適合用在頁面主要內容的切換上，而 Segmented 則在較小部分區塊的轉換會比較適當。

一、ANTD 的 Tabs

1. 最基本的使用方式：引用與呼叫它

import { Tabs } from 'antd';

const App = () => (
  <Tabs defaultActiveKey="1">
    <Tabs.TabPane tab="分頁 1" key="1">
      分頁 1 的內容...
    </Tabs.TabPane>
    <Tabs.TabPane tab="分頁 2" key="2">
      分頁 2 的內容...
    </Tabs.TabPane>
    <Tabs.TabPane tab="分頁 3" key="3">
      分頁 3 的內容...
    </Tabs.TabPane>
  </Tabs>
);

export default App;  

2. Tabs 可添加的屬性

  在這個元件中，你可以把 Tab 這個 tag 理解為最外層的容器，裡面包數個 Tabs.TabPane 的 tag。下面列出幾項我開發最常用的，也可以點此連結去看更多官方 api 文件。

3. Tabs.TabPane 可添加的屬性

  下面列出幾項我開發最常用的，也可以點此連結去看更多官方 api 文件。

4. ANTD 的 Tabs 實際使用範例

看完上面簡單的介紹後，下面提供我的一些簡單範例，若大家有興趣也可以到線上編輯器裡玩玩看唷！

先前專案元件應用示意圖

二、ANTD 的 Segmented

1. 最基本的使用方式：引用與呼叫它

import { Tabs } from 'antd';

const data = [
  {
    label: '分頁一',
    value: '分頁一',
  },
  {
    label: '分頁二',
    value: '分頁二',
  },
]

const App = () => (
  <div>
    <Segmented 
        options={data} 
        onChange
      />
  </div>
);

export default App;  

2. Segmented 可添加的屬性

  其實這個元件我也是最近開發時第一次使用?，它比較有switch的樣式感，拿來做模式切換我覺得超級適合。這個元件提供的屬性本身就不多，下面列出幾項我有使用過的，也可以點此連結去看更多官方 api 文件。

3. Segmented 的 options 可以活用到什麼程度？

  因為在 Segmented 裡，選項的陣列可以使用多種方法讓呈現效果有所不同，甚至加上icon圖標讓頁面更豐富，所以這邊就特別拉出一小節並附帶範例跟大家介紹。

(1) 陣列裡直接放字串

const options = ['週一', '週二', '週三', '週四', '週五'];

(2) 陣列裡直接放數字

const options = [1, 2, 3, 4, 5];

(3) 陣列裡放object，並在內容前面加icon

const options = [
    {
        label: '字母由前往後排序',
        value: 'front',
        icon: <SortAscendingOutlined />,
    },
    {
        label: '字母由後往前排序',
        value: 'end',
        icon: <SortDescendingOutlined />,
    },
];

(4) 陣列裡放object，客製化想顯示的內容

const options = [
    {
        label: (
            <div style={{ padding: 4 }}>
                <LikeOutlined />
                <div>按讚清單</div>
            </div>
        ),
        value: 'like',
    },
    {
        label: (
            <div style={{ padding: 4 }}>
                <ShareAltOutlined />
                <div>分享清單</div>
            </div>
        ),
        value: 'share',
    },
    {
        label: (
            <div style={{ padding: 4 }}>
                <HeartOutlined />
                <div>收藏清單</div>
            </div>
        ),
        value: 'save',
    },
];

4. ANTD 的 Segmented 實際使用範例

看完上面簡單的介紹後，下面提供我的一些簡單範例，若大家有興趣也可以到線上編輯器裡玩玩看唷！

先前專案元件應用示意圖

  看完上面的分享，應該有感受到ANTD元件的強大功能吧？比較常見的功能其實都在每個元件的參數中，可以輕鬆選擇與處理，今天的文章也是用心做了好多舉例與說明，覺得有幫助的話也可以按讚唷！