此版本 (4.2) 已經過時,點擊此處檢視最新版本 (5.0)
台灣正體

輔助樣式

所有元素皆可使用的全域輔助樣式。
概要

所有全域輔助樣式的前輟一定是 has-

可以在所有元件使用的樣式就是全域輔助樣式,例如:has-hidden 能夠隱藏任意元素的可見度,適合用於響應式設計has-dark 可以強制將某個元素轉為暗色系主題(請檢視主題色系頁面)。

若你需要更多輔助樣式,可以考慮與 Tailwind CSS 一同使用。

使用方式

隱藏某個元素,可以搭配響應式設計來在某些裝置上隱藏元素。許多 Tocas UI 模組都使用這些輔助樣式來切換某些元件。

屬性
display: none;
visibility: hidden;
在亮色主題下會套用 display: none;
在暗色主題下會套用 display: none;
增加內距

增加任意元素的內距。為了更加清楚地看見其變化,我們在這個範例替間距加上了背景顏色,在實際應用中並不會看到這個背景色。

has-top-padded -small -large -big -huge
has-bottom-padded -small -large -big -huge
has-start-padded -small -large -big -huge
has-end-padded -small -large -big -huge
has-padded -small -large -big -huge
has-vertically-padded -small -large -big -huge
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;

has-top-spaced -small -large -big -huge
has-bottom-spaced -small -large -big -huge
has-start-spaced -small -large -big -huge
has-end-spaced -small -large -big -huge
has-spaced -small -large -big -huge
has-vertically-spaced -small -large -big -huge
has-horizontally-spaced -small -large -big -huge
1rem 0.5rem 1.5rem 3rem 4.5rem

讓某些元素能有更直覺的游標圖案提示使用者,或是在按鈕載入時呈現被停用的游標模樣。

屬性
cursor: pointer;
cursor: not-allowed;

變更某些元素的行距高度以便對齊或是以更緊緻的方式呈現而節省空間運用。

屬性
line-height: 1;
line-height: 1.4;
line-height: 1.9;

讓使用者無法選擇某些文字或是讓點擊行為穿過某些不重要的元素。

屬性
user-select: none;
user-select: all;
pointer-events: none;

解決某些元素的內容過長時,內容卻無法被截斷的問題。

屬性
word-break: break-all;
word-break: keep-all;
overflow-wrap: break-word;

直接控制某個元素的 overflow 樣式來隱藏多餘的內容。

屬性
overflow: hidden;

能夠快速地讓某個元素與容器同寬高。

屬性
width: 100%;
height: 100%;
width: 100%;
height: 100%;

適合與尺寸的 has-full-size 搭配,讓某個元素填滿整個容器後,絕對置中某些元素在畫面上。

屬性
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
由來自 台灣的 Yami Odymel 所設計,當然還有貢獻者們的愛心❤️。原始碼授權方式為 MIT,文件則為 CC 0 公眾領域。還請盡情地使用、分享或一同改進。Tocas UI 是卡莉絲伊繁星的設計語言,而卡莉絲伊繁星屬對空音商事
台灣正體語系協作者:Yami Odymel、coin3x、Sea-n
擁有 Tocas UI 的所屬組織商標