速查表
| 元件 | 主要 class | 修飾子 / 子元素 |
|---|---|---|
| 根容器 | .lct-root |
套在最外層以繼承字型／顏色 |
| 按鈕 | .lct-btn |
--primary --ghost --secondary --danger --sm --lg --block
|
| Icon 按鈕 | .lct-icon-btn |
--active；內放 .lct-icon
|
| 收藏愛心 | .lct-favorite |
data-lct-toggle="favorite"、.is-active
|
| 圖示 | .lct-icon |
--sm --lg
|
| 外掛殼層 | .lct-shell |
__body |
| Header | .lct-header |
__title __actions
|
| 底部導覽 |
.lct-tabbar .lct-tab
|
data-lct-toggle="tab"、.is-active
|
| 搜尋列 |
.lct-searchbar .lct-search .lct-search-btn
|
內放 <input>
|
| 輸入框 | .lct-input |
|
| Checkbox | .lct-checkbox |
__box |
| 材質卡 | .lct-material-card |
__thumb __label __fav、.is-selected、變數 --lct-mcard-*
|
| 材質卡格線 | .lct-material-grid |
--cols-1~--cols-6、變數 --lct-mgrid-*
|
| 收藏看板 | .lct-board-card |
__cover __meta __name __count、變數 --lct-bcard-*
|
| 材料列 | .lct-row |
__thumb __main __title __meta __count、變數 --lct-row-thumb
|
| 徽章 | .lct-badge |
--pill |
| 報價資訊列 | .lct-info |
__label __value
|
| 卡片容器 | .lct-card |
|
| Footer 動作列 |
.lct-footer-actions .lct-footer-btn
|
--primary、disabled
|
| 遮罩 | .lct-scrim |
.is-open |
| Modal | .lct-modal |
__header __title __close __subtitle __body __footer
|
| Modal 選項列 | .lct-option-row |
__name __count
|
| 對話框 | .lct-dialog |
__title __text __btns
|
| 通知列 | .lct-bar |
--success --error --warning --info、__msg __close
|
| 純色 Toast | .lct-toast |
--success --error --warning
|
| 選單 |
.lct-menu .lct-menu-item
|
--danger、.lct-menu__divider
|
| 下拉容器 | .lct-dropdown |
__menu、data-lct-toggle="dropdown"、.is-open
|
狀態 class
| class | 意義 |
|---|---|
.is-active |
作用中（分頁、收藏、Icon 按鈕） |
.is-selected |
被選取（材質卡） |
.is-open |
開啟中（遮罩、下拉） |
.is-disabled |
停用（等同 disabled 屬性的視覺） |
.lct-hidden |
隱藏（display:none） |
版面工具 class
.lct-flex .lct-flex-col .lct-items-center .lct-justify-between .lct-grow
.lct-gap-1~4（4/6/8/16px）、.lct-mt-2 .lct-mt-4
文字工具 class
.lct-title（16 粗）、.lct-subtitle（14 中）、.lct-text（14）、.lct-text-muted、.lct-caption（11 次要）
常見問題
為什麼我的元件沒有套用字型？
最外層要加 .lct-root，字型與預設文字色是掛在它上面的。
可以只用其中幾個元件嗎？
可以。CSS 是單一檔案、彼此獨立，直接用你需要的 class 即可，未使用的樣式不影響頁面。
會和 Bootstrap / Tailwind 衝突嗎？
所有 class 與變數都有 lct- / --lct- 前綴，命名空間隔離，可與其他框架並存。
如何換主色？
覆寫 --lct-primary 等 CSS 變數，不要直接改元件 class。詳見「設計變數」。
元件的精確度來源？
目前「加入收藏夾」Modal 為像素級對齊 Figma；其餘元件依同一套 design tokens 與 Figma 元件結構一致重建。待 Figma 額度恢復會逐一校準細節。