速查表
| 元件 | 主要 class | 修飾子 / 子元素 |
|---|---|---|
| 根容器 | .lct-root |
套在最外層以繼承字型／顏色 |
| 按鈕 | .lct-btn |
--primary（紅）--dark（墨，如登出/搜尋）--secondary --ghost --danger --sm --lg --block
|
| Icon 按鈕 | .lct-icon-btn |
--raised（白底浮起）--active；內放 .lct-icon
|
| 返回鈕 | .lct-back-btn |
白底浮起 + 左箭頭 icon（收藏夾詳情） |
| 收藏愛心 | .lct-favorite |
圓形白底浮鈕；data-lct-toggle="favorite"、.is-active；--bare 去底 |
| 圖示 | .lct-icon |
--sm（15）--lg（28）；變數 --lct-icon-size
|
| 外掛殼層 | .lct-shell |
--panel（固定 420px）、__body
|
| Header | .lct-header |
__title __logo __actions
|
| 頂部導覽 |
.lct-tabbar .lct-tab
|
active = 灰膠囊 + 墨字；data-lct-toggle="tab"、.is-active；--justified 平均撐滿 |
| 搜尋列 |
.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 |
搭配 .lct-cols-1~6（含 sm:/md:/lg: 前綴）固定欄數；預設依寬度自動；變數 --lct-mgrid-*
|
| 收藏看板 | .lct-board-card |
無框、封面圓角 16；__cover __meta __name __count、變數 --lct-bcard-*
|
| 材料列 | .lct-row |
__thumb __main __title __meta __count、變數 --lct-row-thumb
|
| 徽章 | .lct-badge |
--pill |
| 報價資訊列 | .lct-info |
__label __value
|
| 報價表格 |
.lct-quote-card .lct-table
|
__th __td；欄數用 --lct-table-cols 覆寫（預設 5） |
| 卡片容器 | .lct-card |
|
| Footer 動作列 |
.lct-footer-actions .lct-footer-btn
|
無框純 icon+文字、hover 變紅；--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 --bold（匯出選單）、.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，支援 sm:/md:/lg: 前綴） |
版面工具 class（v1.1 大幅擴充）
Tailwind 風格 utility，完整說明與響應式前綴用法見「響應式 Utility」：
-
display：
.lct-block.lct-inline-block.lct-flex.lct-inline-flex.lct-flex-col.lct-grid.lct-hidden -
flexbox：
.lct-flex-row.lct-flex-wrap.lct-items-start/center/end.lct-justify-start/center/end/between.lct-grow.lct-shrink-0 -
欄數：
.lct-cols-1~6（作用於.lct-grid與.lct-material-grid） -
間距：
.lct-gap-0~8、.lct-p/px/py/pt/pb-N、.lct-m-0.lct-mx-auto.lct-mt/mb-N -
寬度 / 文字：
.lct-w-full.lct-w-auto.lct-max-w-full、.lct-text-left/center/right、.lct-truncate
版面關鍵 utility（display、欄數、gap-2/4/6、文字對齊、w-full/w-auto）支援 sm: / md: / lg: 響應式前綴。
文字工具 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- 前綴（含響應式變體 sm:lct-*），命名空間隔離，可與其他框架並存。
如何換主色？
覆寫 --lct-primary 等 CSS 變數，不要直接改元件 class。詳見「設計變數」。
從 v1.0 升級要注意什麼？
-
.lct-material-grid--cols-N已移除，改用.lct-cols-N； -
.lct-shell改為流動寬度，固定 420px 要補.lct-shell--panel； - Tab 由紅字底部導覽改為頂部灰膠囊式（結構不變，樣式自動更新）；
- Footer 按鈕
--primary由紅底改為常駐紅字； -
--lct-radius-panel由 12px 改為 4px、--lct-bg改為#f6f6f8。
元件的精確度來源？
v1.1 已依 Figma「sketchup_設計元件」元件庫全元件逐一像素級校準（v1.0 僅 Modal 為像素級），所有色值、尺寸、圓角、陰影均以 Figma 抓取值為準。