跳至示範內容
AstromerMolecular Astronomy for the Web
調色盤星雲光譜
選擇版面配色

即時套用,保留目前的亮暗模式。

元件文件
主題

Celestial · Visual theme

讓介面保有清晰的軌道。

Celestial 用字體、細線與留白建立視覺節奏;色彩仍由你選擇的調色盤與亮暗模式提供。

Cross-component check

同一套語彙,也要照顧真實控制項

依序使用鍵盤 Tab 檢查第一個欄位的 focus 樣式;下方同時展示錯誤與停用狀態。 這些狀態仍由原生 input 與 Astromer 元件語意提供。

卡片與動作

卡片延續目前選用的語義表面與邊線。Theme 負責呈現形狀與排版,不更換品牌色或狀態色。

欄位狀態

使用鍵盤 Tab 將焦點移到此欄位。
請輸入有效的電子郵件地址。

Static SVG ornaments

裝飾可以重複,內容仍由 HTML 負責

Spark 與三種 frame 都是獨立選用的靜態呈現元件。星芒可同頁重複使用;它們不增加控制項 props、不裁切 focus ring,也不承載必要資訊。

Orbit frame

軌道框只襯托這段標題與說明。

Corner frame

短角線留出內容空間,外層不裁切鍵盤焦點。

Editorial frame

內框與稀疏側邊標記補充版面節奏;實際內容依舊是可選取、可閱讀的 HTML。