跳到內容
選單
語言,而家係廣東話
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo 設計系統

設計系統提供嘅嘢嘅概覽。主題:day。語言:廣東話

路由

呢啲片段本身就係一整個回應,唔係回應入面嘅一塊。

預先整好、彼此一致嘅介面元件,喺伺服器度算好。

框架本身嘅用語叫佢哋做 partial:ui.Templates() 回傳嘅係 partial,docs/site/templates.md 都係用呢個名。呢版嘅講法改咗,代碼嘅冇改。

呢度嘅連結唔會有反應

連結唔會有反應,範例原始碼另外提供。

下面每個範例都喺自己個框入面。

範例內容用英文,範例外殼就譯咗。

error-page

錯誤回應嘅整個主體:狀態、一句老實話、一條返轉頭嘅路,同管理員用得着嘅 500 參考編號。

404 — 搵唔到

預覽
<div rst-error>
  <p rst-error-status>404</p>
  <h1 rst-error-title>搵唔到嗰個頁面</h1>
  <p rst-error-body>個連結可能已經過時,或者個頁面已經搬咗。請檢查下網址,或者返去起始頁。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始頁</a></p>
</div>

403 — 冇權限

預覽
<div rst-error>
  <p rst-error-status>403</p>
  <h1 rst-error-title>你睇唔到呢個</h1>
  <p rst-error-body>你個帳戶喺呢度冇權限。如果你覺得應該有,請問下管理呢個網站嘅人。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始頁</a> <a rst-btn href="/posts">返去</a></p>
</div>

422 — 處理唔到

預覽
<div rst-error>
  <p rst-error-status>422</p>
  <h1 rst-error-title>送唔出去</h1>
  <p rst-error-body>送出嘅內容有啲唔啱。請返去再試一次;冇儲存任何嘢。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始頁</a> <a rst-btn href="/posts/1/edit">返去</a></p>
</div>

500 — 伺服器出錯

預覽
<div rst-error>
  <p rst-error-status>500</p>
  <h1 rst-error-title>我哋呢邊出咗問題</h1>
  <p rst-error-body>唔關你事。問題已經記錄咗。請等陣再試;如果一直咁樣,請提供下面嘅參考編號。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始頁</a></p>
  <p class="rst-mono" rst-error-ref dir="auto">參考編號:k3f9tq</p>
</div>

500 係唯一有參考編號嘅狀態:管理員可以用佢喺日誌度 grep。

503 — 用唔到

預覽
<div rst-error>
  <p rst-error-status>503</p>
  <h1 rst-error-title>我哋暫時停咗服務</h1>
  <p rst-error-body>網站更新緊,或者太多人用緊。等一分鐘再試吓。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始頁</a></p>
</div>

其他任何情況——通用嗰對

預覽
<div rst-error>
  <p rst-error-status>418</p>
  <h1 rst-error-title>有啲唔妥</h1>
  <p rst-error-body>呢個要求完成唔到。請返去再試一次。</p>
  <p rst-error-cta><a rst-btn="primary" href="/">起始頁</a></p>
</div>

五個狀態嘅講法寫咗喺框架目錄度。第六個會退返去通用嗰對,而唔係將一個唔存在嘅鍵名擺喺讀者面前。

back-nav

上返一層嘅連結,擺喺詳情或者編輯畫面上面。

返去一筆記錄

預覽
<nav rst-back-nav><a href="/orders/1">← Order AB3PX</a></nav>

locale-menu

語言切換器:一個 details 選單,入面係寄去 /_locale 嘅單一欄位 POST 表單,噉揀嘅結果就會入咗 locale cookie,而讀者仲留喺同一條路徑度。

十二種語言,目前嗰種會標示出嚟。

預覽
<details rst-dropdown rst-locale name="rst-menus">
  <summary>語言<span rst-caret aria-hidden="true"><svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="m6 9 6 6 6-6"/></svg></span></summary>
  <div rst-dropdown-menu>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="en"><input type="hidden" name="return" value="/"><button type="submit" lang="en">English</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ga"><input type="hidden" name="return" value="/"><button type="submit" lang="ga">Gaeilge</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="zh-Hans"><input type="hidden" name="return" value="/"><button type="submit" lang="zh-Hans">简体中文</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="es"><input type="hidden" name="return" value="/"><button type="submit" lang="es">Español</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="hi"><input type="hidden" name="return" value="/"><button type="submit" lang="hi">हिन्दी</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="pt"><input type="hidden" name="return" value="/"><button type="submit" lang="pt">Português</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="bn"><input type="hidden" name="return" value="/"><button type="submit" lang="bn">বাংলা</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ru"><input type="hidden" name="return" value="/"><button type="submit" lang="ru">Русский</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ja"><input type="hidden" name="return" value="/"><button type="submit" lang="ja">日本語</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="yue"><input type="hidden" name="return" value="/"><button type="submit" lang="yue" aria-current="true">廣東話</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="vi"><input type="hidden" name="return" value="/"><button type="submit" lang="vi">Tiếng Việt</button></form>
    <form method="post" action="/_locale"><input type="hidden" name="locale" value="ar"><input type="hidden" name="return" value="/"><button type="submit" lang="ar">العربية</button></form>
  </div>
</details>

呢個會 POST 去 /_locale,噉就要有部伺服器。本頁自己個頁首嘅切換器係淨係用連結嘅版本。