title: 基於react開發的可伸縮tabs
date: 2018-06-17 16:57:33
tags: react

1.效果如下所示：

2.自己安裝檢視效果
先克隆該專案

git clone https://github.com/suwu150/react-flex-tabs.git

然後通過以下命令安裝依賴

npm install

通過以下命令執行專案

npm start

3.flex-tabs元件簡介

a. 能夠通過傳入的物件資料進行增加tab，每當點選傳入資料時就會進行新增資料到總的tabs中，能夠進行拖動交換位置、刪除，當
點選的tab超過頁面能夠展示的最大寬度時，進行將第一個tab進行摺疊，也能夠在摺疊的tab中進行點選，展開需要開啟的tab頁面
，在摺疊tab中也能夠進行刪除之前開啟的tab
b.在刪除的時候，會按照開啟時的佇列進行展示被選中的tab頁面
4.使用說明
通過下面程式碼進行新增tab頁面

    if (this.flexTabs) {
      const tab = {
        __id,
        name: data[__id]
      };
      this.flexTabs.createTab(tab);
    }

其中主要方法是createTab，進行建立tab，__id是tab的唯一編號，name用於展示在tab標籤上面
5.主要方法用法說明