Result 結果
結果頁是置中的結果面板：成功、資訊、警告、錯誤，或 404。間距對齊 Empty 的 large。它不是警示。
示範
成功
圖示是 16% 語意色軟底，字形用 pressed 色。動作列與 Empty 相同：一顆主按鈕，可再加 ghost。
資訊、警告、錯誤、404
status 決定圖示與底色。404 用品牌軟底圓，以及 Fraunces 的「404」。 404 面板
Result 不負責路由。動作插槽由應用程式決定。
自訂圖示
icon 插槽取代內建字形。有標題時圖示為 aria-hidden，標題才是可及名稱。 API
Result 屬性
| 屬性 | 型別 | 預設 |
|---|---|---|
status | 'success' | 'info' | 'warning' | 'error' | '404' | 'info' |
title | string | '' |
description | string | '' |
Result 插槽
| 名稱 | 說明 |
|---|---|
icon | 取代狀態圖示 |
extra / action | 動作列，通常是 gk-button |
| 預設 | 說明下方的額外內容 |
CSS Parts
| Part | 說明 |
|---|---|
root | 置中直欄，間距對齊 Empty large |
icon | 72px 圓。有標題時 aria-hidden |
title | Fraunces 標題 |
description | 次要說明 |
extra | 動作列 |
沒有 role="alert"。非同步任務完成時，應用程式可自行在宿主上加 role="status"。
無障礙
- 標題是
h2，也是可及名稱。 - 有標題時圖示是裝飾。
- 動作按鈕自帶名稱與焦點環。