概要
全域輔助樣式是十分有害的功能,你必須謹慎使用。所有全域輔助樣式的前輟一定是 u-
。
可以在所有元件使用的樣式就是全域輔助樣式,例如:u-hidden
能夠隱藏任意元素的可見度,很適合用於響應式設計;u-dark
可以強制將某個元素轉為暗色系主題(請檢視主題色系頁面)。
為了避免到處充斥輔助樣式,Tocas UI 會盡可能地限制全域輔助樣式的用法。
使用方式
隱藏某個元素,可以搭配響應式設計來在某些裝置上隱藏元素。許多 Tocas UI 模組都使用這些輔助樣式來切換某些元件。
樣式 | |
---|---|
u-hidden |
display: none;
|
u-invisible |
visibility: hidden;
|
u-light-hidden |
在亮色主題☀️下會套用 display: none;
|
u-dark-hidden |
在暗色主題🌙下會套用 display: none;
|
<div class="u-hidden">這段文字會被隱藏。</div>
<div class="u-dark-hidden">這段字在暗色模式🌙下會被隱藏。</div>
增加任意元素的內距。為了更加清楚地看見其變化,我們在這個範例替間距加上了背景顏色,在實際應用中並不會看到這個背景色。
如果你想要單獨控制上下垂直的空白,請考慮使用空白間距元件。
樣式 | |
---|---|
u-padded |
padding: 1rem;
|
u-horizontally-padded |
padding-left: 1rem;
|
u-vertically-padded |
padding-top: 1rem;
|
u-very-padded |
padding: 1.5rem;
|
u-horizontally-very-padded |
padding-left: 1.5rem;
|
u-vertically-very-padded |
padding-top: 1.5rem;
|
增加內距。
增加更大的內距。
<div class="u-padded">增加內距。</div>
<div class="u-very-padded">增加更大的內距。</div>
增加任意元素的外距,適合用在某些不能增加內距的時候。為了更加清楚地看見其變化,我們在這個範例替間距加上了背景顏色,在實際應用中並不會看到這個背景色。
如果你想要單獨控制上下垂直的空白,請考慮使用空白間距元件。
樣式 | |
---|---|
u-spaced |
margin: 1rem;
|
u-horizontally-spaced |
margin-left: 1rem;
|
u-vertically-spaced |
margin-top: 1rem;
|
u-very-spaced |
margin: 1.5rem;
|
u-horizontally-very-spaced |
margin-left: 1.5rem;
|
u-vertically-very-spaced |
margin-top: 1.5rem;
|
增加外距。
增加更大的外距。
<div style="display: flex; flex-direction: column; background: var(--ts-gray-300);">
<div class="u-spaced">增加外距。</div>
<div class="u-very-spaced">增加更大的外距。</div>
</div>
搭配響應式設計讓某個有框線的元件能在行動裝置或螢幕過小時,移除「左右框線」與「圓角」來貼齊容器邊緣。
舉例來說:一個片段本來看起來像一張獨立的卡片,但在行動裝置可以讓移除圓角來貼齊螢幕邊緣,得到更多可呈現內容的空間。
這是一個片段內容
<div class="ts-segment u-edged">
這是一個片段內容
</div>