Skip to content

patch(accordion): 緩解範例色彩對比度不足問題，fixed #64 #65

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
IK-Ngoo wants to merge 2 commits into
base: tmp/0726
Choose a base branch
from
Open

patch(accordion): 緩解範例色彩對比度不足問題，fixed #64 #65

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
54e8365
patch(accordion): 緩解範例色彩對比度不足問題，fixed #64
IK-Ngoo Feb 11, 2026
a276f47
fix(accordion): add <p> tag
IK-Ngoo Feb 11, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion _components/accordion/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,9 @@ maturity: "new"

### 常見基本折疊選單

- 預設一次僅可展開一個選單，點擊其他選單會自動關閉先前選單
- 預設一次僅可展開一個選單，點擊其他選單會自動關閉先前選單。
- 預設為收摺狀態，可透過自訂 CSS 修改樣式或覆寫預設變數。
- `.accordion-body` 元素爲展開狀態下所呈現的內容。

{% capture html %}{% include accordion/accordion_single.html %}{% endcapture %}
{%
Expand Down
14 changes: 6 additions & 8 deletions _includes/accordion/accordion_multiple.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,28 +4,26 @@
<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>中。
<strong>這是第一個 accordion body。</strong>
</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 元素，包括表格、圖片、影片等。
<strong>這是第二個 accordion body。</strong>
<ul>
<li>第一個清單</li>
<li>第二個清單</li>
<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開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
<strong>這是第三個 accordion body。</strong>
<p>網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。</p>
</div>
</div>
</div>
12 changes: 6 additions & 6 deletions _includes/accordion/accordion_single.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@
<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>中。
<strong>這是第一個 accordion body。</strong>
</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 元素，包括表格、圖片、影片等。
<strong>這是第二個 accordion body。</strong>
<ul>
<li>第一個清單</li>
<li>第二個清單</li>
<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開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
<strong>這是第三個 accordion body。</strong>
<p>網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。</p>
</div>
</div>
</div>
12 changes: 6 additions & 6 deletions _includes/accordion/accordion_subTitle.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<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> 中。
<strong>這是第一個 accordion body。</strong>
</div>
</div>
<div class="accordion-item">
Expand All @@ -16,10 +16,10 @@
<span class="sub-title">Accordion Item #2 副標題</span>
</label>
<div class="accordion-body">
<strong>這是第二個 accordion body.</strong>我們嘗試使用list為範例呈現。當然您可以使用其他任何 HTML 元素，包括表格、圖片、影片等。
<strong>這是第二個 accordion body。</strong>
<ul>
<li>第一個清單</li>
<li>第二個清單</li>
<li>第一個清單項目</li>
<li>第二個清單項目</li>
</ul>
</div>
</div>
Expand All @@ -30,8 +30,8 @@
<span class="sub-title">Accordion Item #3 副標題</span>
</label>
<div class="accordion-body">
<strong>這是第三個 accordion body.</strong>我們嘗試以一段長文字進行呈現。<br/>
網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
<strong>這是第三個 accordion body。</strong>
<p>網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。</p>
</div>
</div>
</div>
Loading