Implement accordion and tabs

.github/workflows/lhci.yml

@@ -5,9 +5,12 @@ on:
 
   # Triggers the workflow when pull request is opened or updated
   pull_request:
+    types: [opened, synchronize, reopened, labeled]
 
 jobs:
   lighthouseci:
+    # Run this job if labeled with 'ci-lighthouse'
+    if: ${{ github.event.label.name == 'ci-lighthouse' }}
     runs-on: ubuntu-latest
     steps:
       #ref: https://github.com/actions/starter-workflows/tree/main/pages

.lighthouserc.json

@@ -18,6 +18,8 @@
         "http://localhost:4000/components/table/index.html",
         "http://localhost:4000/components/textarea/index.html",
         "http://localhost:4000/components/warning-text/index.html",
+        "http://localhost:4000/components/accordion/index.html",
+        "http://localhost:4000/components/tabs/index.html",
         "http://localhost:4000/technology/index.html",
         "http://localhost:4000/technology/anti_patterns/index.html",
         "http://localhost:4000/technology/internationalization/index.html",

_components/accordion/index.md

@@ -0,0 +1,63 @@
+---
+layout: main
+title: 折疊選單 (Accordion)
+maturity: "new"
+---
+
+### 常見基本折疊選單
+
+- 預設一次僅可展開一個選單，點擊其他選單會自動關閉先前選單
+
+{% capture html %}{% include accordion/accordion_single.html %}{% endcapture %}
+{%
+  include example.html content=html
+%}
+
+#### CSS
+
+- `.accordion`：作為全部`.accordion-item`的容器。
+- `.accordion-item`：作為單獨折疊選單的容器。
+- `label`：作為單獨折疊選單的 `<label>`。
+- `.accordion-body`：作為單獨折疊選單的內容。
+
+### 長開折疊選單
+
+- 展開選單需再次點擊關閉，使折疊選單在開啟另一個選單時保持開啟狀態。
+
+{% capture html %}{% include accordion/accordion_multiple.html %}{% endcapture %}
+{%
+  include example.html content=html
+%}
+
+#### CSS
+
+- `.accordion`：作為全部`.accordion-item`的容器。
+- `.accordion-item`：作為單獨折疊選單的容器。
+- `label`：作為單獨折疊選單的 `<label>`。
+- `.accordion-body`：作為單獨折疊選單的內容。
+- `data-behavior="multiple"`：作為設定是否可以常開選單的屬性。
+- `.btn-toggle`：作為一鍵開合所有選單的元件(請設定於可點擊元件中 Ex: `<button>`)。
+
+#### JavaScript
+
+- 使用 [`accordion.js`](/assets/components/accordion.js)。
+
+### 副標題(摘要)折疊選單
+
+- 可在標題欄新增副標題(摘要)，請注意僅在實際需要時添加摘要行，避免按鈕文字太長。
+
+{% capture html %}{% include accordion/accordion_subTitle.html %}{% endcapture %}
+{%
+  include example.html content=html
+%}
+
+#### CSS
+
+- `.accordion`：作為全部`.accordion-item`的容器。
+- `.accordion-item`：作為單獨折疊選單的容器。
+- `label`：作為單獨折疊選單的 `<label>`。
+- `.accordion-body`：作為單獨折疊選單的內容。
+- `.main-title`：作為主標題的內容。
+- `.sub-title`：作為副標題的內容。
+
+<script src="{{ "/assets/js/components/accordion.js" | absolute_url }}" type="module"></script>

_components/official-document/index.md

@@ -38,4 +38,4 @@ maturity: "alpha"
 {% endcapture %}
 {% include example-html.html content=html %}
 
-<script src="/assets/js/components/official-document-element.js" type="module">
+<script src="{{ "/assets/js/components/official-document-element.js" | absolute_url }}" type="module"></script>

_components/table/index.md

@@ -53,4 +53,4 @@ maturity: "alpha"
 
 - 語音識別系統（Dragon NaturallySpeaking, MacOS/iOS Voice Control）
 
-<script src="/assets/js/components/interactive-table-element.js" type="module">
+<script src="{{ "/assets/js/components/interactive-table-element.js" | absolute_url }}" type="module"></script>

_components/tabs/index.md

@@ -0,0 +1,22 @@
+---
+layout: main
+title: 頁籤 (Tabs)
+maturity: "new"
+---
+
+### 常見頁籤
+
+{% capture html %}{% include tabs/tabs.html %}{% endcapture %}
+{%
+  include example.html content=html
+%}
+
+#### CSS
+
+- `.tabs`：作為全部頁籤的容器。
+- `label .tabs-label`：作為頁籤的標題。
+- `.tabs-content`：作為頁籤的內容。
+
+#### 親和力
+
+- 使用 `.tabs-label`，必要使用 `for` 與 `id` 連結 `<label>` 元件與 `<input>` 元件。

_components/textarea/index.md

@@ -22,4 +22,4 @@ maturity: "alpha"
 - `<li>` 預設就請放入 `data-limit-phrase` 的後半部上限提醒。
 - 無論如何，伺服器接收內容時仍須再次驗證字數。
 
-<script src="/assets/js/components/character-count.js" type="module">
+<script src="{{ "/assets/js/components/character-count.js" | absolute_url }}" type="module"></script>

_includes/accordion/accordion_multiple.html

@@ -0,0 +1,31 @@
+<button class="btn-toggle button button-primary mb2">Toggle All</button>
+<div class="accordion" data-behavior="multiple">
+  <div class="accordion-item">
+    <input type="checkbox" id="section1_multiple">
+    <label for="section1_multiple">Accordion Item #1</label>
+    <div class="accordion-body">
+      <strong>這是第一個 accordion body.</strong> 預設為關閉狀態，這些class控制整體外觀，以及透過 CSS 轉換顯示和隱藏。您可以使用自訂 CSS
+      修改其中任何內容或覆寫我們的預設變數，基本上大部分 HTML 都可以放入 <font color="darkpink">.accordion-body</font>中。
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input type="checkbox" id="section2_multiple">
+    <label for="section2_multiple">Accordion Item #2</label>
+    <div class="accordion-body">
+      <strong>這是第二個 accordion body.</strong>我們嘗試使用list為範例呈現。當然您可以使用其他任何 HTML 元素，包括表格、圖片、影片等。
+      <ul>
+        <li>第一個清單</li>
+        <li>第二個清單</li>
+      </ul>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input type="checkbox" id="section3_multiple">
+    <label for="section3_multiple">Accordion Item #3</label>
+    <div class="accordion-body">
+      <strong>這是第二個 accordion body.</strong>我們嘗試以一段長文字進行呈現。<br />
+      網頁設計（英語：Web
+      design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
+    </div>
+  </div>
+</div>

_includes/accordion/accordion_single.html

@@ -0,0 +1,28 @@
+<div class="accordion" data-behavior="single">
+  <div class="accordion-item">
+    <input type="checkbox" id="section1_single">
+    <label for="section1_single">Accordion Item #1</label>
+    <div class="accordion-body">
+      <strong>這是第一個 accordion body.</strong> 預設為關閉狀態，這些class控制整體外觀，以及透過 CSS 轉換顯示和隱藏。您可以使用自訂 CSS 修改其中任何內容或覆寫我們的預設變數，基本上大部分 HTML 都可以放入 <font color="darkpink">.accordion-body</font>中。
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input type="checkbox" id="section2_single">
+    <label for="section2_single">Accordion Item #2</label>
+    <div class="accordion-body">
+      <strong>這是第二個 accordion body.</strong>我們嘗試使用list為範例呈現。當然您可以使用其他任何 HTML 元素，包括表格、圖片、影片等。
+      <ul>
+        <li>第一個清單</li>
+        <li>第二個清單</li>
+      </ul>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input type="checkbox" id="section3_single">
+    <label for="section3_single">Accordion Item #3</label>
+    <div class="accordion-body">
+      <strong>這是第二個 accordion body.</strong>我們嘗試以一段長文字進行呈現。<br/>
+      網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
+    </div>
+  </div>
+</div>

_includes/accordion/accordion_subTitle.html

@@ -0,0 +1,37 @@
+<div class="accordion">
+  <div class="accordion-item">
+    <input type="checkbox" id="section1">
+    <label for="section1">
+      <span class="main-title">Accordion Item #1</span>
+      <span class="sub-title">Accordion Item #1 副標題</span>
+    </label>
+    <div class="accordion-body">
+      <strong>這是第一個 accordion body.</strong> 預設為關閉狀態，這些class控制整體外觀，以及透過 CSS 轉換顯示和隱藏。您可以使用自訂 CSS 修改其中任何內容或覆寫我們的預設變數，基本上大部分 HTML 都可以放入 <font color="darkpink">.accordion-body</font> 中。
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input type="checkbox" id="section2">
+    <label for="section2">
+      <span class="main-title">Accordion Item #2</span>
+      <span class="sub-title">Accordion Item #2 副標題</span>
+    </label>
+    <div class="accordion-body">
+      <strong>這是第二個 accordion body.</strong>我們嘗試使用list為範例呈現。當然您可以使用其他任何 HTML 元素，包括表格、圖片、影片等。
+      <ul>
+        <li>第一個清單</li>
+        <li>第二個清單</li>
+      </ul>
+    </div>
+  </div>
+  <div class="accordion-item">
+    <input type="checkbox" id="section3">
+    <label for="section3">
+      <span class="main-title">Accordion Item #3</span>
+      <span class="sub-title">Accordion Item #3 副標題</span>
+    </label>
+    <div class="accordion-body">
+      <strong>這是第二個 accordion body.</strong>我們嘗試以一段長文字進行呈現。<br/>
+      網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
+    </div>
+  </div>
+</div>

_includes/tabs/tabs.html

@@ -0,0 +1,27 @@
+
+    <div class="tabs">
+        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab1" checked>
+        <label for="tab1" class="tabs-label">Tab 1</label>
+        <div class="tabs-content">
+            <h4>Tab 1 Content</h4>
+            <p>This is the content of tab 1.</p>
+        </div>
+        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab2">
+        <label for="tab2" class="tabs-label">Tab 2</label>
+        <div class="tabs-content">
+            <h4>Tab 2 Content</h4>
+            <p>This is the content of tab 2.</p>
+        </div>
+        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab3">
+        <label for="tab3" class="tabs-label">Tab 3</label>
+        <div class="tabs-content">
+            <h4>Tab 3 Content</h4>
+            <p>This is the content of tab 3.</p>
+        </div>
+        <input type="radio" class="tabs-radio" name="tabs-group1" id="tab4">
+        <label for="tab4" class="tabs-label">Tab 4</label>
+        <div class="tabs-content">
+            <h4>Tab 4 Content</h4>
+            <p>This is the content of tab 4.</p>
+        </div>
+    </div>