回應式手風琴標籤頁

JavaScript

6.3.0 新增，使用手風琴或標籤頁元件的標記，建立回應式手風琴標籤頁。

基礎

手風琴標記或標籤頁標記都可以用來在不同的中斷點，以回應式的方式在兩個元件之間切換。

手風琴應指定一個 ID，但如果省略，外掛程式會自動產生一個。

手風琴內容也應有一個 ID，或應指定 href 的 #，否則會產生一個隨機 ID

手風琴/標籤頁值可以按任何順序排列。

手風琴 HTML 標記

在影片中觀看此部分

<ul class="accordion" data-responsive-accordion-tabs="accordion medium-tabs large-accordion">
  <li class="accordion-item is-active" data-accordion-item>
    <a href="#" class="accordion-title">Accordion 1</a>
    <div class="accordion-content" data-tab-content>
      I would start in the open state, due to using the `is-active` state class.
    </div>
  </li>
  <!-- ... -->
</ul>

將所有內容組合在一起後，您會看到以下結果！
縮小瀏覽器以查看切換發生情況。
我是「小和大尺寸上的手風琴」，但我是「中尺寸上的標籤頁」

手風琴 1

面板 1。Lorem ipsum dolor
無處可去
手風琴 2
手風琴 3
選擇日期！

標籤頁 HTML 標記

在影片中觀看此部分

<ul class="tabs" data-responsive-accordion-tabs="tabs medium-accordion large-tabs" id="example-tabs">
  <li class="tabs-title is-active"><a href="#panel1" aria-selected="true">Tab 1</a></li>
  <li class="tabs-title"><a href="#panel2">Tab 2</a></li>
  <li class="tabs-title"><a href="#panel3">Tab 3</a></li>
  <li class="tabs-title"><a href="#panel4">Tab 4</a></li>
  <li class="tabs-title"><a href="#panel5">Tab 5</a></li>
  <li class="tabs-title"><a href="#panel6">Tab 6</a></li>
</ul>

<div class="tabs-content" data-tabs-content="example-tabs">
  <div class="tabs-panel is-active" id="panel1">
    <p>one</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel2">
    <p>two</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-7.jpg">
  </div>
  <div class="tabs-panel" id="panel3">
    <p>three</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel4">
    <p>four</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-2.jpg">
  </div>
  <div class="tabs-panel" id="panel5">
    <p>five</p>
    <p>Check me out! I'm a super cool Tab panel with text content!</p>
  </div>
  <div class="tabs-panel" id="panel6">
    <p>six</p>
    <img class="thumbnail" src="assets/img/generic/rectangle-8.jpg">
  </div>
</div>

將所有內容組合在一起後，您會看到以下結果！
縮小瀏覽器以查看切換發生情況。
我是「小和大尺寸上的標籤頁」和「中尺寸上的手風琴」

標籤頁 1
標籤頁 2
標籤頁 3
標籤頁 4
標籤頁 5
標籤頁 6

一

看看我！我是一個包含文字內容的超酷標籤頁面板！

二

三

看看我！我是一個包含文字內容的超酷標籤頁面板！

四

五

看看我！我是一個包含文字內容的超酷標籤頁面板！

六

可透過 `data-responsive-accordion-tabs` 選項設定回應行為。
`tabs|accordion`、`medium-tabs|accordion`、`large-tabs|accordion` 設定行為

外掛選項

外掛選項可以設定為個別資料屬性、一個合併的 data-options 屬性，或作為傳遞給外掛建構函式的物件。深入了解如何初始化 JavaScript 外掛。

所有來自手風琴或標籤頁的 `data-options` 都可以傳遞。

Sass 參考

變數

此元件的預設樣式可以使用專案的設定檔中的這些 Sass 變數進行自訂。

名稱	類型	預設值	說明
`$accordion-background`	顏色	`$white`	手風琴群組的預設背景顏色。
`$accordion-plusminus`	布林值	`true`	如果為 `true`，會在每個手風琴標題的旁邊加上加號和減號圖示。
`$accordion-plus-content`	字串	`'\002B'`	當 `$accordion-plusminus` 為 `true` 時，加號圖示的內容
`$accordion-minus-content`	字串	`'\2013'`	當 `$accordion-plusminus` 為 `true` 時，減號圖示的內容
`$accordion-title-font-size`	數字	`rem-calc(12)`	手風琴標題的字體大小。
`$accordion-item-color`	顏色	`$primary-color`	選單中項目預設的文字顏色。
`$accordion-item-background-hover`	顏色	`$light-gray`	選單中項目滑鼠移入時預設的背景顏色。
`$accordion-item-padding`	數字或清單	`1.25rem 1rem`	手風琴項目的預設內距。
`$accordion-content-background`	顏色	`$white`	標籤內容的預設背景顏色。
`$accordion-content-border`	顏色	`1px solid $light-gray`	標籤內容的預設邊框顏色。
`$accordion-content-color`	顏色	`$body-font-color`	標籤內容的預設文字顏色。
`$accordion-content-padding`	數字或清單	`1rem`	標籤內容的預設內距。
`$tab-margin`	數字	`0`	標籤列的預設外距。
`$tab-background`	顏色	`$white`	標籤列的預設背景顏色。
`$tab-color`	顏色	`$primary-color`	標籤項目的字體顏色。
`$tab-background-active`	顏色	`$light-gray`	標籤列的活動背景顏色。
`$tab-active-color`	顏色	`$primary-color`	標籤項目活動的字體顏色。
`$tab-item-font-size`	數字	`rem-calc(12)`	標籤項目的字體大小。
`$tab-item-background-hover`		`$white`	選單中項目滑鼠移入時預設的背景顏色。
`$tab-item-padding`	數字	`1.25rem 1.5rem`	標籤項目的預設內距。
`$tab-content-background`	顏色	`$white`	標籤內容的預設背景顏色。
`$tab-content-border`	顏色	`$light-gray`	標籤內容的預設邊框顏色。
`$tab-content-color`	顏色	`$body-font-color`	標籤內容的預設文字顏色。
`$tab-content-padding`	數字或清單	`1rem`	標籤內容的預設內距。

混合

我們使用這些混合來建構這個元件的最終 CSS 輸出。您可以自己使用混合，從我們的元件中建構自己的類別結構。

手風琴容器

@include accordion-container;

新增手風琴容器的樣式。將此套用於取得 data-accordion 的相同元素。

手風琴項目

@include accordion-item;

新增手風琴項目的樣式。將此套用於手風琴 ul 內的清單項目。

手風琴標題

@include accordion-title;

新增手風琴項目標題的樣式。將此套用於手風琴項目內的連結。

手風琴內容

@include accordion-content;

新增手風琴內容的樣式。將此套用於手風琴項目標題下方的內容窗格。

標籤容器

@include tabs-container;

新增標籤容器的樣式。將此套用於 <ul>。

垂直標籤容器

@include tabs-container-vertical;

擴充標籤容器以擁有垂直標籤。將此與 tabs-container() 搭配使用。

標籤標題

@include tabs-title;

將樣式新增至標籤容器內的連結。套用至標籤容器內的 <li> 元素。

標籤內容

@include tabs-content;

將樣式新增至包圍標籤群組內容窗格的包裝器。

垂直標籤內容

@include tabs-content-vertical;

透過移動邊框，將標籤內容容器擴充成垂直樣式。與 tabs-content() 結合使用。

標籤面板

@include tabs-panel;

將樣式新增至標籤內容容器內的個別標籤內容面板。

JavaScript 參考

初始化

JavaScript 中必須包含下列檔案才能使用此外掛程式

foundation.core.js
foundation.responsiveAccordionTabs.js
- 搭配工具程式庫 foundation.util.motion.js
- 搭配工具程式庫 foundation.accordion.js
- 搭配工具程式庫 foundation.tabs.js

Foundation.ResponsiveAccordionTabs

建立一個新的回應式手風琴標籤實例。

var elem = new Foundation.ResponsiveAccordionTabs(element, options);

觸發下列事件： ResponsiveAccordionTabs#event:init

名稱	類型	說明
`元素`	jQuery	要轉換成回應式手風琴標籤的 jQuery 物件。
`選項`	物件	覆寫預設外掛程式設定。

方法

開啟

$('#element').foundation('open', target);

開啟 target 定義的外掛程式窗格。

名稱	類型	說明
`目標`	jQuery	要開啟的窗格的 jQuery 物件或 ID 字串。

關閉

$('#element').foundation('close', target);

關閉 target 定義的外掛程式窗格。標籤無法使用。

名稱	類型	說明
`目標`	jQuery	要關閉的窗格的 jQuery 物件或 ID 字串。

切換

$('#element').foundation('toggle', target);

切換 target 定義的外掛程式窗格。標籤無法使用。

名稱	類型	說明
`目標`	jQuery	要切換的窗格的 jQuery 物件或 ID 字串。

_destroy

$('#element').foundation('_destroy');

銷毀這個元素上目前外掛程式的實例，以及切換外掛程式的視窗調整大小處理常式。