概要
所有全域輔助樣式的前輟一定是 has-。
可以在所有元件使用的樣式就是全域輔助樣式，例如：has-hidden 能夠隱藏任意元素的可見度，適合用於響應式設計；has-dark 可以強制將某個元素轉為暗色系主題（請檢視主題色系頁面）。
若你需要更多輔助樣式，可以考慮與 Tailwind CSS 一同使用。
使用方式
隱藏某個元素，可以搭配響應式設計來在某些裝置上隱藏元素。許多 Tocas UI 模組都使用這些輔助樣式來切換某些元件。
| 樣式 | 屬性 |
|---|---|
| has-hidden | display: none; |
| has-invisible | visibility: hidden; |
| has-light-hidden | 在亮色主題下會套用 display: none; |
| has-dark-hidden | 在暗色主題下會套用 display: none; |
增加任意元素的內距。為了更加清楚地看見其變化，我們在這個範例替間距加上了背景顏色，在實際應用中並不會看到這個背景色。
| padding-top | has-top-padded | -small | -large | -big | -huge |
| padding-bottom | has-bottom-padded | -small | -large | -big | -huge |
| padding-left | has-start-padded | -small | -large | -big | -huge |
| padding-right | has-end-padded | -small | -large | -big | -huge |
| padding | has-padded | -small | -large | -big | -huge |
| padding-top padding-bottom |
has-vertically-padded | -small | -large | -big | -huge |
| padding-left padding-right |
has-horizontally-padded | -small | -large | -big | -huge |
| 1rem | 0.5rem | 1.5rem | 3rem | 4.5rem |
|---|
增加內距。
增加更大的內距。
<div class="has-padded">增加內距。</div>
<div class="has-padded-large">增加更大的內距。</div>增加任意元素的外距，適合用在某些不能增加內距的時候。這些樣式還有 -auto 可以套用 auto;。
| margin-top | has-top-spaced | -small | -large | -big | -huge |
| margin-bottom | has-bottom-spaced | -small | -large | -big | -huge |
| margin-left | has-start-spaced | -small | -large | -big | -huge |
| margin-right | has-end-spaced | -small | -large | -big | -huge |
| margin | has-spaced | -small | -large | -big | -huge |
| margin-top margin-bottom |
has-vertically-spaced | -small | -large | -big | -huge |
| margin-left margin-right |
has-horizontally-spaced | -small | -large | -big | -huge |
| 1rem | 0.5rem | 1.5rem | 3rem | 4.5rem |
|---|
讓某些元素能有更直覺的游標圖案提示使用者，或是在按鈕載入時呈現被停用的游標模樣。
| 樣式 | 屬性 |
|---|---|
| has-cursor-pointer | cursor: pointer; |
| has-cursor-not-allowed | cursor: not-allowed; |
變更某些元素的行距高度以便對齊或是以更緊緻的方式呈現而節省空間運用。
| 樣式 | 屬性 |
|---|---|
| has-leading-none | line-height: 1; |
| has-leading-small | line-height: 1.4; |
| has-leading-large | line-height: 1.9; |
讓使用者無法選擇某些文字或是讓點擊行為穿過某些不重要的元素。
| 樣式 | 屬性 |
|---|---|
| has-select-none | user-select: none; |
| has-select-all | user-select: all; |
| has-pointer-events-none | pointer-events: none; |
解決某些元素的內容過長時，內容卻無法被截斷的問題。
| 樣式 | 屬性 |
|---|---|
| has-break-all | word-break: break-all; |
| has-break-keep | word-break: keep-all; |
| has-break-words | overflow-wrap: break-word; |
能夠快速地讓某個元素與容器同寬高。
| 樣式 | 屬性 |
|---|---|
| has-full-size | width: 100%; height: 100%; |
| has-full-width | width: 100%; |
| has-full-height | height: 100%; |
