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

rastrillo 設計系統

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

表單

每一個控制項，喺真實表單會令佢入到嘅狀態度。每個都擺喺有內距嘅 rst-box 入面，因為呢啲片段就係咁假設。

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

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

呢度嘅連結唔會有反應

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

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

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

field

標籤、輸入框、可選提示、說明同錯誤。一般嘅文字類控件，有明確 ID。

最簡單

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_bare">Title</label>
<input rst-input type="text" id="f_bare" name="f_bare">
</div></form></section>

帶一句提示

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_hint">Slug <span rst-field-hint>(lowercase, no spaces)</span></label>
<input rst-input type="text" id="f_hint" name="f_hint">
</div></form></section>

控制項下面有一行說明

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_help">Email</label>
<input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
<p rst-field-help id="f_help-help">We only use this to send you replies.</p>
</div></form></section>

必填

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_required">Full name</label>
<input rst-input type="text" id="f_required" name="f_required" required>
</div></form></section>

帶一個錯誤

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_error">Email</label>
<input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
<p rst-field-error id="f_error-error" role="alert">That does not look like an email address.</p>
</div></form></section>

窄

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_short">Postcode</label>
<input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div></form></section>

主要欄位

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_primary">Title</label>
<input rst-input="primary" type="text" id="f_primary" name="f_primary" value="Quarterly board meeting">
</div></form></section>

field-text

一個有標籤嘅文字輸入框，id 由 Name 推導出嚟。必填標記嘅星係 aria-hidden，輸入框嘅 required 屬性先係程式讀到嘅訊號。

最簡單

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_bare">Title</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div></form></section>

帶一句提示

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_hint">Headline</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">Shown in the list.</small>
</div></form></section>

必填

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_required">Display name <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div></form></section>

帶一個錯誤

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_error">Title</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="Release notes" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">A post with that title already exists.</small>
</div></form></section>

主要欄位

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_primary">What is it?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Quarterly board meeting">
</div></form></section>

喺表單嘅主要欄位（例如標題或者名）加 Primary，輸入框就會更加顯眼。

field-textarea

field-text 個外殼，包住一個 textarea。

最簡單

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_bare">Notes</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div></form></section>

帶一句提示

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_hint">Bio</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">Shown on your profile.</small>
</div></form></section>

帶一個錯誤

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_error">Summary</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">A summary needs at least twenty characters.</small>
</div></form></section>

必填

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_required">Reason for refund <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div></form></section>

field-select

field 個外殼包住一個原生 select。超過十個選項嗰陣，個 select 就會開 select.js 嘅可篩選組合框；但表單提交嘅仲係嗰個原生 select。

三個選項：原生 select

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_few">Role</label>
<select rst-input id="sel_few" name="sel_few"><option value="Admin" selected>Admin</option><option value="Editor">Editor</option><option value="Member">Member</option></select>
</div></form></section>

十二個選項：可篩選嘅組合框

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_many">City</label>
<select rst-input id="sel_many" name="sel_many" data-rst-select data-rst-select-filter="輸入嚟篩選" data-rst-select-results="{n} 個結果" data-rst-select-result-one="1 個結果" aria-describedby="sel_many-help"><option value="Dublin" selected>Dublin</option><option value="Lisbon">Lisbon</option><option value="Madrid">Madrid</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option><option value="Athens">Athens</option><option value="Helsinki">Helsinki</option><option value="Reykjavík">Reykjavík</option><option value="Warsaw">Warsaw</option><option value="Zagreb">Zagreb</option><option value="Tallinn">Tallinn</option><option value="Valletta">Valletta</option></select>
<p rst-field-help id="sel_many-help">Start typing to filter.</p>
</div></form></section>

超過十個選項，片段就會開 select.js；唔夠十個就唔會：喺得幾項嘢入面搵嘢只係擺設，唔係幫忙。

十二個選項，Plain——明確唔要嗰個加強

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_plain">City</label>
<select rst-input id="sel_plain" name="sel_plain"><option value="Dublin" selected>Dublin</option><option value="Lisbon">Lisbon</option><option value="Madrid">Madrid</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option><option value="Athens">Athens</option><option value="Helsinki">Helsinki</option><option value="Reykjavík">Reykjavík</option><option value="Warsaw">Warsaw</option><option value="Zagreb">Zagreb</option><option value="Tallinn">Tallinn</option><option value="Valletta">Valletta</option></select>
</div></form></section>

必填，仲有錯誤

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_error">Role</label>
<select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error"><option value="Admin" selected>Admin</option><option value="Editor">Editor</option><option value="Member">Member</option></select>
<p rst-field-error id="sel_error-error" role="alert">Pick a role for this person.</p>
</div></form></section>

手寫嘅，有 optgroup 分組

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_grouped">Region</label>
<select rst-input id="sel_grouped" name="sel_grouped" data-rst-select data-rst-select-filter="輸入嚟篩選" data-rst-select-results="{n} 個結果" data-rst-select-result-one="1 個結果">
<optgroup label="Europe"><option value="dublin" selected>Dublin</option><option value="lisbon">Lisbon</option><option value="warsaw">Warsaw</option></optgroup>
<optgroup label="Americas"><option value="montreal">Montréal</option><option value="lima">Lima</option><option value="austin">Austin</option></optgroup>
<optgroup label="Asia"><option value="osaka">Osaka</option><option value="hanoi">Hanoi</option><option value="dhaka">Dhaka</option></optgroup>
<optgroup label="Africa"><option value="accra">Accra</option><option value="nairobi">Nairobi</option><option value="tunis">Tunis</option></optgroup>
</select>
</div></form></section>

呢度嘅 Options 係一個平面清單，所以分咗組嘅選項要應用自己寫成標記。select.js 會將啲組畫出嚟而唔係掉咗佢；手寫嘅 select 亦可以用 data-rst-select="false" 徹底唔要呢個加強。

field-check

切換嘅唯一做法：一個真正嘅勾選框，外表整成開關咁，鍵盤同螢幕閱讀器照常用得。

開

預覽 
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_on" checked><span rst-switch-track aria-hidden="true"></span> Email me about replies</label></form></section>

閂

預覽 
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_off"><span rst-switch-track aria-hidden="true"></span> Email me about mentions</label></form></section>

已停用

預覽 
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_disabled" disabled><span rst-switch-track aria-hidden="true"></span> Email me a weekly digest</label></form></section>

choice-field

選項卡片——我哋比較想你用嘅單選或多選組。Title 保持簡短；解釋交畀 Desc。

淨係揀一個

預覽 
<section rst-box><form rst-form method="post" action="#"><fieldset rst-choice><legend>Plan</legend><div rst-choice-cards><label><input type="radio" name="plan" value="free"><span><span rst-choice-title>Free</span><span rst-choice-desc>One project, community support.</span></span></label><label><input type="radio" name="plan" value="pro" checked><span><span rst-choice-title>Pro</span><span rst-choice-desc>Unlimited projects and a support inbox.</span></span></label></div></fieldset></form></section>

可以揀幾多個都得

預覽 
<section rst-box><form rst-form method="post" action="#"><fieldset rst-choice><legend>Send me</legend><div rst-choice-cards><label><input type="checkbox" name="digest" value="replies" checked><span><span rst-choice-title>Replies</span><span rst-choice-desc>As they happen.</span></span></label><label><input type="checkbox" name="digest" value="weekly"><span><span rst-choice-title>Weekly digest</span><span rst-choice-desc>Monday mornings.</span></span></label></div></fieldset></form></section>

form-foot

表單最後嗰行：一個主要提交掣，加一個可有可無嘅取消連結。取消係連結，因為離開表單其實係去另一頁。

儲存同取消

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Save post</button>
  <a rst-btn href="/posts">Back to posts</a>
</div></form></section>

淨係得提交

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Send invitation</button>
</div></form></section>

閒置——乜都未發生之前嘅掣

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Publish</button>
  <a rst-btn href="/posts">Back to posts</a>
</div></form></section>

會改變啲乜嘅按鈕會有載入狀態；淨係展開啲乜嘅按鈕（例如摺疊、下拉、分頁）就冇。rastrillo.js 會將呢條規則套落每個表單嘅每個提交按鈕，唔使開啟任何嘢。

處理緊——表單送出嗰陣 rastrillo.js 寫低嘅嘢

預覽 
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
<button rst-btn="primary" type="submit" aria-busy="true" data-idle-label="Publish" disabled><span rst-spin aria-hidden="true"></span>Publishing…</button>
<a rst-btn href="/posts">Back to posts</a>
</div></form></section>

淨係㩒咗嗰個掣：表單入面其他提交掣都保住自己嘅 name 同 value，表單本身亦都防住第二次提交。data-busy="false" 可以唔要呢條規則，寫喺表單或者某一個掣度；data-busy-label 用嚟換咗啲字。熄咗腳本就乜都唔會發生，表單照舊噉提交，所以冪等仲係伺服器嘅事。

confirm-form

確認版嘅動作行。破壞性動作有自己嘅路由，唔係一個對話框，所以根本冇嘢要寫腳本。

破壞性操作

預覽 
<section rst-box><form rst-form-actions method="post" action="/posts/1/delete"><input type="hidden" name="csrf" value="tok-123"><input type="hidden" name="id" value="1"><a rst-btn="ghost" href="/posts/1">取消</a><button type="submit" rst-btn="danger">Delete this post</button></form></section>

普通情況，取消用預設字眼

預覽 
<section rst-box><form rst-form-actions method="post" action="/posts/1/publish"><a rst-btn="ghost" href="/posts/1">取消</a><button type="submit" rst-btn="primary">Publish</button></form></section>

冇 CancelLabel，所以取消連結嘅字眼嚟自目錄。