सामग्री पर जाएँ
अनुभाग
भाषा, अभी हिन्दी
Rastrillo डिज़ाइन सिस्टम

विकल्प और कार्रवाइयाँ

वे नियंत्रण जिनसे विकल्पों में से चुना जाता है, और वे पंक्तियाँ जिनसे फ़ॉर्म पूरा होता है। हर एक पैडिंग वाले rst-box में बैठता है, क्योंकि ये पार्शियल यही मानकर चलते हैं।

हर उदाहरण असली है, पर उसके लिंक कहीं नहीं ले जाते। HTML कॉपी करने के लिए मार्कअप दिखाता है।

field-select

मूल select के चारों ओर field का आवरण। दस से ज़्यादा विकल्प होने पर select, select.js का छाँटने योग्य कॉम्बोबॉक्स चालू कर देता है; फ़ॉर्म फिर भी वही मूल select भेजता है।

तीन विकल्प: नेटिव select

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="sel_few">भूमिका</label>
  <select rst-input id="sel_few" name="sel_few">
    <option value="admin" selected>एडमिन</option>
    <option value="editor">संपादक</option>
    <option value="member">सदस्य</option>
  </select>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-select" dict
    "ID" "sel_few"
    "Name" "sel_few"
    "Label" "भूमिका"
    "Options" (list
        (dict "Label" "एडमिन" "Selected" true "Value" "admin")
        (dict "Label" "संपादक" "Value" "editor")
        (dict "Label" "सदस्य" "Value" "member"))}}

बारह विकल्प: फ़िल्टर करने योग्य कॉम्बोबॉक्स

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="sel_many">शहर</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 परिणाम" data-rst-select-no-matches="कोई मेल नहीं मिला" aria-describedby="sel_many-help">
    <option value="dublin" selected>डबलिन</option>
    <option value="lisbon">लिस्बन</option>
    <option value="madrid">मैड्रिड</option>
    <option value="berlin">बर्लिन</option>
    <option value="rome">रोम</option>
    <option value="athens">एथेंस</option>
    <option value="helsinki">हेलसिंकी</option>
    <option value="reykjavík">रेक्जाविक</option>
    <option value="warsaw">वारसॉ</option>
    <option value="zagreb">ज़ाग्रेब</option>
    <option value="tallinn">तालिन</option>
    <option value="valletta">वैलेटा</option>
  </select>
  <p rst-field-help id="sel_many-help">छाँटने के लिए लिखना शुरू करें।</p>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-select" dict
    "ID" "sel_many"
    "Name" "sel_many"
    "Label" "शहर"
    "Options" (list
        (dict "Label" "डबलिन" "Selected" true "Value" "dublin")
        (dict "Label" "लिस्बन" "Value" "lisbon")
        (dict "Label" "मैड्रिड" "Value" "madrid")
        (dict "Label" "बर्लिन" "Value" "berlin")
        (dict "Label" "रोम" "Value" "rome")
        (dict "Label" "एथेंस" "Value" "athens")
        (dict "Label" "हेलसिंकी" "Value" "helsinki")
        (dict "Label" "रेक्जाविक" "Value" "reykjavík")
        (dict "Label" "वारसॉ" "Value" "warsaw")
        (dict "Label" "ज़ाग्रेब" "Value" "zagreb")
        (dict "Label" "तालिन" "Value" "tallinn")
        (dict "Label" "वैलेटा" "Value" "valletta"))
    "Help" "छाँटने के लिए लिखना शुरू करें।"}}

दस से ज़्यादा विकल्प होने पर पार्शियल select.js चालू कर देता है। दस से कम पर नहीं: मुट्ठी भर चीज़ों में खोज सजावट है, मदद नहीं।

बारह विकल्प, Plain: संवर्धन से मना कर दिया गया

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="sel_plain">शहर</label>
  <select rst-input id="sel_plain" name="sel_plain">
    <option value="dublin" selected>डबलिन</option>
    <option value="lisbon">लिस्बन</option>
    <option value="madrid">मैड्रिड</option>
    <option value="berlin">बर्लिन</option>
    <option value="rome">रोम</option>
    <option value="athens">एथेंस</option>
    <option value="helsinki">हेलसिंकी</option>
    <option value="reykjavík">रेक्जाविक</option>
    <option value="warsaw">वारसॉ</option>
    <option value="zagreb">ज़ाग्रेब</option>
    <option value="tallinn">तालिन</option>
    <option value="valletta">वैलेटा</option>
  </select>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-select" dict
    "ID" "sel_plain"
    "Name" "sel_plain"
    "Label" "शहर"
    "Options" (list
        (dict "Label" "डबलिन" "Selected" true "Value" "dublin")
        (dict "Label" "लिस्बन" "Value" "lisbon")
        (dict "Label" "मैड्रिड" "Value" "madrid")
        (dict "Label" "बर्लिन" "Value" "berlin")
        (dict "Label" "रोम" "Value" "rome")
        (dict "Label" "एथेंस" "Value" "athens")
        (dict "Label" "हेलसिंकी" "Value" "helsinki")
        (dict "Label" "रेक्जाविक" "Value" "reykjavík")
        (dict "Label" "वारसॉ" "Value" "warsaw")
        (dict "Label" "ज़ाग्रेब" "Value" "zagreb")
        (dict "Label" "तालिन" "Value" "tallinn")
        (dict "Label" "वैलेटा" "Value" "valletta"))
    "Plain" true}}

अनिवार्य, त्रुटि के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="sel_error">भूमिका</label>
  <select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error">
    <option value="admin" selected>एडमिन</option>
    <option value="editor">संपादक</option>
    <option value="member">सदस्य</option>
  </select>
  <p rst-field-error id="sel_error-error" role="alert">इस व्यक्ति के लिए कोई भूमिका चुनें।</p>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-select" dict
    "ID" "sel_error"
    "Name" "sel_error"
    "Label" "भूमिका"
    "Options" (list
        (dict "Label" "एडमिन" "Selected" true "Value" "admin")
        (dict "Label" "संपादक" "Value" "editor")
        (dict "Label" "सदस्य" "Value" "member"))
    "Required" true
    "Error" "इस व्यक्ति के लिए कोई भूमिका चुनें।"}}

हाथ से लिखा हुआ, optgroup के साथ

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-field>
  <label rst-field-label for="sel_grouped">क्षेत्र</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 परिणाम" data-rst-select-no-matches="कोई मेल नहीं मिला">
    <optgroup label="यूरोप">
      <option value="dublin" selected>डबलिन</option>
      <option value="lisbon">लिस्बन</option>
      <option value="warsaw">वारसॉ</option>
    </optgroup>
    <optgroup label="अमेरिका महाद्वीप">
      <option value="montreal">मॉन्ट्रियल</option>
      <option value="lima">लीमा</option>
      <option value="austin">ऑस्टिन</option>
    </optgroup>
    <optgroup label="एशिया">
      <option value="osaka">ओसाका</option>
      <option value="hanoi">हनोई</option>
      <option value="dhaka">ढाका</option>
    </optgroup>
    <optgroup label="अफ़्रीका">
      <option value="accra">अक्रा</option>
      <option value="nairobi">नैरोबी</option>
      <option value="tunis">ट्यूनिस</option>
    </optgroup>
  </select>
</div>

यहाँ Options एक सपाट सूची है, इसलिए समूहबद्ध विकल्प वह मार्कअप हैं जो ऐप्लिकेशन ख़ुद लिखता है। select.js समूहों को गिराने के बजाय दिखाता है; हाथ से लिखा select चाहे तो data-rst-select="false" से संवर्धन पूरी तरह मना कर सकता है।

field-check

टॉगल का इकलौता तरीक़ा: एक असली चेकबॉक्स, जिसे स्विच जैसा दिखाया गया है, कीबोर्ड और स्क्रीन रीडर ज्यों के त्यों।

चालू

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<label rst-switch>
  <input type="checkbox" name="notify_on" checked>
  <span rst-switch-track aria-hidden="true"></span>
  जवाबों के बारे में मुझे ईमेल करें
</label>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-check" dict
    "Name" "notify_on"
    "Label" "जवाबों के बारे में मुझे ईमेल करें"
    "Checked" true}}

बंद

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<label rst-switch>
  <input type="checkbox" name="notify_off">
  <span rst-switch-track aria-hidden="true"></span>
  उल्लेखों के बारे में मुझे ईमेल करें
</label>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-check" dict
    "Name" "notify_off"
    "Label" "उल्लेखों के बारे में मुझे ईमेल करें"}}

निष्क्रिय

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<label rst-switch>
  <input type="checkbox" name="notify_disabled" disabled>
  <span rst-switch-track aria-hidden="true"></span>
  मुझे हर हफ़्ते सारांश ईमेल करें
</label>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "field-check" dict
    "Name" "notify_disabled"
    "Label" "मुझे हर हफ़्ते सारांश ईमेल करें"
    "Disabled" true}}

choice-field

विकल्प कार्ड: रेडियो या चेकबॉक्स समूह का पसंदीदा रूप। Title छोटा रहता है; समझाने का काम Desc करता है।

एक चुनें

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<fieldset rst-choice>
  <legend>प्लान</legend>
  <div rst-choice-cards>
    <label>
      <input type="radio" name="plan" value="free">
      <span>
        <span rst-choice-title>मुफ़्त</span>
        <span rst-choice-desc>एक प्रोजेक्ट, समुदाय की सहायता।</span>
      </span>
    </label>
    <label>
      <input type="radio" name="plan" value="pro" checked>
      <span>
        <span rst-choice-title>प्रो</span>
        <span rst-choice-desc>असीमित प्रोजेक्ट और एक सहायता इनबॉक्स।</span>
      </span>
    </label>
  </div>
</fieldset>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "choice-field" dict
    "Legend" "प्लान"
    "Name" "plan"
    "Options" (list
        (dict "Desc" "एक प्रोजेक्ट, समुदाय की सहायता।" "Title" "मुफ़्त" "Value" "free")
        (dict "Checked" true "Desc" "असीमित प्रोजेक्ट और एक सहायता इनबॉक्स।" "Title" "प्रो" "Value" "pro"))}}

जितने चाहें चुनें

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<fieldset rst-choice>
  <legend>मुझे भेजें</legend>
  <div rst-choice-cards>
    <label>
      <input type="checkbox" name="digest" value="replies" checked>
      <span>
        <span rst-choice-title>जवाब</span>
        <span rst-choice-desc>जैसे ही आएँ।</span>
      </span>
    </label>
    <label>
      <input type="checkbox" name="digest" value="weekly">
      <span>
        <span rst-choice-title>साप्ताहिक सारांश</span>
        <span rst-choice-desc>सोमवार सुबह।</span>
      </span>
    </label>
  </div>
</fieldset>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "choice-field" dict
    "Legend" "मुझे भेजें"
    "Name" "digest"
    "Type" "checkbox"
    "Options" (list
        (dict "Checked" true "Desc" "जैसे ही आएँ।" "Title" "जवाब" "Value" "replies")
        (dict "Desc" "सोमवार सुबह।" "Title" "साप्ताहिक सारांश" "Value" "weekly"))}}

form-foot

फ़ॉर्म की आख़िरी पंक्ति: एक मुख्य सबमिट और वैकल्पिक रद्द लिंक। रद्द एक लिंक है, क्योंकि फ़ॉर्म से बाहर जाना नेविगेशन है।

सहेजें और रद्द करें

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">पोस्ट सहेजें</button>
  <a rst-btn="lg" href="/posts">पोस्ट पर वापस जाएँ</a>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "form-foot" dict
    "Submit" "पोस्ट सहेजें"
    "CancelHref" "/posts"
    "CancelLabel" "पोस्ट पर वापस जाएँ"}}

सिर्फ़ सबमिट

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">आमंत्रण भेजें</button>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "form-foot" dict "Submit" "आमंत्रण भेजें"}}

निष्क्रिय: कुछ भी होने से पहले का बटन

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit">प्रकाशित करें</button>
  <a rst-btn="lg" href="/posts">पोस्ट पर वापस जाएँ</a>
</div>

इसे <section rst-box><form rst-form> के अंदर रखें।

{{template "form-foot" dict
    "Submit" "प्रकाशित करें"
    "CancelHref" "/posts"
    "CancelLabel" "पोस्ट पर वापस जाएँ"}}

जो बटन कुछ बदलता है, उसे लोडिंग स्थिति मिलती है; जो बटन सिर्फ़ कुछ दिखाता है — जैसे डिस्क्लोज़र, ड्रॉपडाउन, टैब — उसे नहीं। rastrillo.js यह नियम हर फ़ॉर्म के हर सबमिट बटन पर लगाता है, कुछ भी चालू करने की ज़रूरत नहीं।

काम चल रहा है: फ़ॉर्म जाते समय rastrillo.js जो लिखता है

पूर्वावलोकन

इसे <section rst-box><form rst-form> के अंदर रखें।

<div rst-form-foot>
  <button rst-btn="primary lg" type="submit" aria-busy="true" disabled>
    <span rst-spin aria-hidden="true"></span>
    प्रकाशित करें
  </button>
  <a rst-btn="lg" href="/posts">पोस्ट पर वापस जाएँ</a>
</div>

सिर्फ़ वही बटन जिस पर क्लिक हुआ: फ़ॉर्म के बाकी सबमिट बटन अपना name और value रखते हैं, और फ़ॉर्म खुद दूसरी बार जाने से बचा रहता है। data-busy="false" से नियम छोड़ा जा सकता है, फ़ॉर्म पर या किसी एक बटन पर; data-busy-label टेक्स्ट बदल देता है। स्क्रिप्ट बंद हों तो इनमें से कुछ नहीं होता और फ़ॉर्म पहले की तरह ही जाता है, इसलिए idempotency अब भी सर्वर का काम है।

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 lg" href="/posts/1">रद्द करें</a>
  <button type="submit" rst-btn="danger lg">यह पोस्ट हटाएँ</button>
</form>

इसे <section rst-box> के अंदर रखें।

{{template "confirm-form" dict
    "Action" "/posts/1/delete"
    "Label" "यह पोस्ट हटाएँ"
    "Danger" true
    "Hidden" (list (list "csrf" "tok-123") (list "id" "1"))
    "CancelHref" "/posts/1"}}

सामान्य, रद्द के डिफ़ॉल्ट शब्दों के साथ

पूर्वावलोकन

इसे <section rst-box> के अंदर रखें।

<form rst-form-actions method="post" action="/posts/1/publish">
  <a rst-btn="ghost lg" href="/posts/1">रद्द करें</a>
  <button type="submit" rst-btn="primary lg">प्रकाशित करें</button>
</form>

इसे <section rst-box> के अंदर रखें।

{{template "confirm-form" dict
    "Action" "/posts/1/publish"
    "Label" "प्रकाशित करें"
    "CancelHref" "/posts/1"}}

कोई CancelLabel नहीं, इसलिए रद्द लिंक के शब्द कैटलॉग से आते हैं।