好了,現在你可以透過下面的關閉按鈕把我關閉了。
這個關閉按鈕也是透過 [data-toggle] 來切換快顯視窗的可見度。
<button class="ts-button" data-toggle="btn:is-outlined" data-name="btn">
按我切換樣式 😮
</button>
這個 JavaScript 模組能讓你很輕易地就透過按鈕來切換某個容器的 CSS 樣式類別。
在可供互動的元素上套用 [data-toggle="名稱:樣式名稱"]
並在目標元素套用 [data-name="名稱"]
,就能夠透過點擊互動元素來切換目標的 CSS 樣式類別。
頂部列可以擺放一個漢堡選單按鈕,然後透過樣式切換來控制一個容器的可見度,用以在行動裝置上開關一個進階選單。
<div class="ts-app-topbar">
<div class="start">
<a class="item" data-toggle="menu:u-hidden">
<span class="ts-icon is-bars-icon"></span>
</a>
<div class="item is-text">應用程式</div>
</div>
<div class="content u-hidden" data-name="menu">
<div class="ts-menu is-separated is-start-icon u-dark">
<a class="item">
<span class="ts-icon is-inbox-icon"></span>
收件匣
</a>
<a class="item">
<span class="ts-icon is-bookmark-icon"></span>
重要郵件
</a>
</div>
</div>
</div>
透過樣式切換來開關一個快顯視窗的可見度,只需要按下按鈕就可以打開快顯視窗。
如果你需要監聽開關事件並做額外處理(例如:打開視窗時才載入 YouTube 嵌入影片、資料…等),則建議自行額外撰寫 JavaScript 程式碼並開關其 is-visible
樣式。
好了,現在你可以透過下面的關閉按鈕把我關閉了。
這個關閉按鈕也是透過 [data-toggle] 來切換快顯視窗的可見度。
<button class="ts-button" data-toggle="modal:is-visible">
打開快顯視窗
</button>
<div class="ts-modal" data-name="modal">
<div class="content">
<div class="ts-content is-padded">
<p>好了,現在你可以透過下面的關閉按鈕把我關閉了。</p>
<p>這個關閉按鈕也是透過 [data-toggle] 來切換快顯視窗的可見度。</p>
</div>
<div class="ts-divider"></div>
<div class="ts-content is-tertiary is-horizontally-padded">
<button class="ts-button" data-toggle="modal:is-visible">
關閉
</button>
</div>
</div>
</div>
<button class="ts-button" data-toggle="drawer:is-visible">
打開側邊抽屜
</button>
<div class="ts-app-drawer is-right" data-name="drawer">
<div class="content">
<div class="ts-content is-padded">
<div class="ts-header is-large">備註事項</div>
<div class="ts-content is-padded">
<div class="ts-list is-unordered">
<div class="item">蘆森詩音</div>
<div class="item">天野悟美</div>
<div class="item">佐藤綾</div>
</div>
</div>
<button class="ts-button is-fluid" data-toggle="drawer:is-visible">
關閉
</button>
</div>
</div>
</div>