概要
全域輔助樣式是十分有害的功能，你必須謹慎使用。所有全域輔助樣式的前輟一定是 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>