सामग्री पर जाएँ
अनुभाग
भाषा, अभी हिन्दी
Rastrillo डिज़ाइन सिस्टम
भाषा, अभी हिन्दी
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

सूची स्क्रीन

सामान्य सूची स्क्रीन: शीर्षक, टूलबार और पंक्तियाँ, जो डेस्कटॉप और मोबाइल दोनों पर काम करती हैं।

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

page-header

स्क्रीन की टाइटल बार: एक h1, एक वैकल्पिक उपशीर्षक, और एक मुख्य क्रिया।

शीर्षक, उपशीर्षक और एक मुख्य क्रिया

पूर्वावलोकन 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>पोस्ट</h1>
    <p rst-page-header-sub>आपने जो कुछ भी लिखा है, सबसे नया पहले।</p>
  </div>
  <a rst-btn="primary" href="/posts/new">
    <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="M5 12h14"/><path d="M12 5v14"/></svg>
    एक पोस्ट लिखें
  </a>
</header>
{{template "page-header" dict
    "Title" "पोस्ट"
    "Sub" "आपने जो कुछ भी लिखा है, सबसे नया पहले।"
    "ActionHref" "/posts/new"
    "ActionLabel" "एक पोस्ट लिखें"
    "ActionIcon" "plus"}}

सिर्फ़ शीर्षक

पूर्वावलोकन 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>सेटिंग</h1>
  </div>
</header>
{{template "page-header" dict "Title" "सेटिंग"}}

list-bar

सूची कार्ड के ऊपर की टूलबार, खोज और फ़िल्टर के साथ।

खोज, साथ में फ़िल्टर ड्रॉपडाउन

पूर्वावलोकन

इसे <div rst-list> के अंदर रखें।

<div rst-lbar>
  <search>
    <form rst-search method="get" action="/posts">
      <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
      <input type="search" name="q" value="रिलीज़" placeholder="पोस्ट खोजें" aria-label="पोस्ट खोजें">
      <a rst-search-clear href="/posts?sort=newest" aria-label="खोज हटाएँ">
        <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
      </a>
      <input type="hidden" name="sort" value="newest">
      <button class="rst-sr-only" type="submit">खोजें</button>
    </form>
  </search>
  <details rst-dropdown name="rst-menus">
    <summary rst-btn aria-label="स्थिति से छाँटें: भुगतान हो चुका">
      भुगतान हो चुका
      <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>
    </summary>
    <div rst-dropdown-menu>
      <a href="/posts">सभी</a>
      <a href="/posts?status=paid" aria-current="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="M20 6 9 17l-5-5"/></svg></a>
      <a href="/posts?status=free">मुफ़्त</a>
    </div>
  </details>
</div>

इसे <div rst-list> के अंदर रखें।

{{template "list-bar" dict
    "Filter" (dict "Aria" "स्थिति से छाँटें: भुगतान हो चुका" "Items" (list (dict "Href" "/posts" "Label" "सभी") (dict "Current" true "Href" "/posts?status=paid" "Label" "भुगतान हो चुका") (dict "Href" "/posts?status=free" "Label" "मुफ़्त")) "Label" "भुगतान हो चुका")
    "Hidden" (list (list "sort" "newest"))
    "Placeholder" "पोस्ट खोजें"
    "Query" "रिलीज़"
    "SearchAction" "/posts"}}

list-search-submit

खोज फ़ॉर्म का असली सबमिट बटन: दिखने में छिपा, पर Tab क्रम में मौजूद, और कीबोर्ड फ़ोकस मिलते ही सामने आ जाता है।

डिफ़ॉल्ट लेबल

पूर्वावलोकन

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

<button class="rst-sr-only" type="submit">खोजें</button>

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

{{template "list-search-submit" dict}}

जब तक आप टैब से यहाँ नहीं पहुँचते, यहाँ कुछ दिखाई नहीं देता।

list-row-action

एक सूची पंक्ति: रिकॉर्ड का नाम मुख्य लिंक के रूप में, एक मेटा पंक्ति, और एक द्वितीयक क्रिया।

आरंभिक निशान, स्थिति और एक क्रिया

पूर्वावलोकन

इसे <div rst-list> के अंदर रखें।

<div rst-row>
  <span rst-row-lead data-lead="accent" aria-hidden="true">RN</span>
  <span rst-row-main><a href="/posts/1">रिलीज़ नोट्स, अगस्त</a>
    <small rst-row-sub>2 अगस्त को प्रकाशित · पढ़ने में 4 मिनट</small>
  </span>
  <span rst-status rst-tone="positive">प्रकाशित</span>
  <a rst-row-action href="/posts/1/edit" aria-label="संपादित करें: रिलीज़ नोट्स, अगस्त">संपादित करें</a>
</div>

इसे <div rst-list> के अंदर रखें।

{{template "list-row-action" dict
    "Href" "/posts/1"
    "Main" "रिलीज़ नोट्स, अगस्त"
    "Sub" "2 अगस्त को प्रकाशित · पढ़ने में 4 मिनट"
    "ActionHref" "/posts/1/edit"
    "ActionLabel" "संपादित करें"
    "ActionAria" "संपादित करें: रिलीज़ नोट्स, अगस्त"
    "StatusTone" "positive"
    "StatusLabel" "प्रकाशित"
    "Lead" "accent"
    "LeadInitial" "RN"}}

सिर्फ़ नाम और मेटा पंक्ति

पूर्वावलोकन

इसे <div rst-list> के अंदर रखें।

<div rst-row>
  <span rst-row-main><a href="/posts/2">हमने पुराना रनर क्यों छोड़ा</a>
    <small rst-row-sub>मसौदा · 20 मिनट पहले सहेजा गया</small>
  </span>
</div>

इसे <div rst-list> के अंदर रखें।

{{template "list-row-action" dict
    "Href" "/posts/2"
    "Main" "हमने पुराना रनर क्यों छोड़ा"
    "Sub" "मसौदा · 20 मिनट पहले सहेजा गया"}}

row-menu

किसी पंक्ति की बाकी क्रियाएँ, एक ⋮ बटन के पीछे। विनाशकारी क्रिया अपने पुष्टि पृष्ठ से लिंक होती है।

लिंक, एक फ़ॉर्म और एक विनाशकारी आइटम

पूर्वावलोकन 
<details rst-row-menu name="rst-menus">
  <summary aria-label="Grace Hopper के लिए कार्रवाइयाँ">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
  </summary>
  <div rst-row-menu-panel>
    <a href="/orders/AB3PX/edit">संपादित करें</a>
    <form method="post" action="/orders/AB3PX/archive">
      <input type="hidden" name="state" value="archived">
      <button type="submit">संग्रहित करें</button>
    </form>
    <hr>
    <a class="rst-danger" href="/orders/AB3PX/delete">ऑर्डर हटाएँ…</a>
  </div>
</details>
{{template "row-menu" dict
    "Name" "Grace Hopper"
    "Items" (list
        (dict "Href" "/orders/AB3PX/edit" "Label" "संपादित करें")
        (dict "Action" "/orders/AB3PX/archive" "Hidden" (list (list "state" "archived")) "Label" "संग्रहित करें")
        (dict "Danger" true "Href" "/orders/AB3PX/delete" "Label" "ऑर्डर हटाएँ…"))}}

विनाशकारी आइटम को सबसे आख़िर में रखें और उसके लेबल के अंत में … लगाएँ। यह एक पृष्ठ खोलता है जो कुछ भी हटाने से पहले पूछता है।

सिर्फ़ लिंक, किसी चयन फ़ॉर्म के अंदर की सूची के लिए

पूर्वावलोकन 
<details rst-row-menu name="rst-menus">
  <summary aria-label="Alan Turing के लिए कार्रवाइयाँ">
    <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
  </summary>
  <div rst-row-menu-panel>
    <a href="/orders/CD4QY/edit">संपादित करें</a>
    <hr>
    <a class="rst-danger" href="/orders/CD4QY/delete">ऑर्डर हटाएँ…</a>
  </div>
</details>
{{template "row-menu" dict
    "Name" "Alan Turing"
    "Items" (list
        (dict "Href" "/orders/CD4QY/edit" "Label" "संपादित करें")
        (dict "Danger" true "Href" "/orders/CD4QY/delete" "Label" "ऑर्डर हटाएँ…"))}}

किसी फ़ॉर्म के अंदर हर आइटम एक लिंक होना चाहिए। जो क्रिया डेटा भेजती है, वह अपने अलग पृष्ठ से होकर जाती है।

seg-tabs

सर्वर पर रेंडर किए गए लिंक का सेगमेंटेड कंट्रोल। मौजूदा टैब लिंक पर aria-current है।

दो खंड

पूर्वावलोकन 
<nav rst-seg-tabs aria-label="पोस्ट के अनुभाग">
  <a href="?tab=basics" aria-current="page">बुनियादी</a>
  <a href="?tab=advanced">उन्नत</a>
</nav>
{{template "seg-tabs" dict
    "Label" "पोस्ट के अनुभाग"
    "Items" (list
        (dict "Current" true "Href" "?tab=basics" "Label" "बुनियादी")
        (dict "Href" "?tab=advanced" "Label" "उन्नत"))}}

dropdown

बिना JavaScript का डिस्क्लोज़र: एक summary बटन, उसके नीचे सादे लिंक का पैनल।

एक चुनाव लागू किए हुए फ़िल्टर मेन्यू

पूर्वावलोकन 
<details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="पोस्ट क्रम: सबसे नई पहले">
    सबसे नई
    <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>
  </summary>
  <div rst-dropdown-menu>
    <a href="/posts?sort=newest" aria-current="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="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?sort=oldest">सबसे पुरानी</a>
    <a href="/posts?sort=title">शीर्षक के अनुसार</a>
  </div>
</details>
{{template "dropdown" dict
    "Label" "सबसे नई"
    "Aria" "पोस्ट क्रम: सबसे नई पहले"
    "Items" (list
        (dict "Current" true "Href" "/posts?sort=newest" "Label" "सबसे नई")
        (dict "Href" "/posts?sort=oldest" "Label" "सबसे पुरानी")
        (dict "Href" "/posts?sort=title" "Label" "शीर्षक के अनुसार"))}}

bulk-bar

चयन मोड की शीर्ष पट्टी, जो सूची पट्टी की जगह लेती है: गिनती, चयन बढ़ाने वाला लिंक, और क्रियाओं का मेन्यू।

तीन पंक्तियाँ चुनी हुई

पूर्वावलोकन

इसे <div rst-list> के अंदर रखें।

<div rst-bulkbar>
  <a rst-bulkbar-close href="/posts" aria-label="चयन पूर्ण">
    <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="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
  </a>
  <span rst-bulkbar-selection><span rst-bulkbar-count>3 चुनी गईं</span><a rst-bulkbar-escalate href="/posts?select=all">मेल खाने वाली सभी 412 चुनें</a></span>
  <details rst-dropdown 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>
      <button type="submit" name="action" value="export">निर्यात करें</button>
      <button type="submit" name="action" value="unpublish">प्रकाशन हटाएँ</button>
      <button type="submit" name="action" value="delete" class="rst-danger">हटाएँ…</button>
    </div>
  </details>
</div>

इसे <div rst-list> के अंदर रखें।

{{template "bulk-bar" dict
    "DoneHref" "/posts"
    "Count" "3 चुनी गईं"
    "EscalateHref" "/posts?select=all"
    "EscalateLabel" "मेल खाने वाली सभी 412 चुनें"
    "Actions" (list
        (dict "Label" "निर्यात करें" "Value" "export")
        (dict "Label" "प्रकाशन हटाएँ" "Value" "unpublish")
        (dict "Danger" true "Label" "हटाएँ…" "Value" "delete"))
    "MenuLabel" "कार्रवाइयाँ"}}

विनाशकारी विकल्प सबसे आख़िर में रहता है: पहली प्रविष्टि ही वह है जिसे घेरने वाला फ़ॉर्म Enter पर चुपचाप चला देता है।

media-grid

छवि टाइलों की एक ग्रिड। हर फ़्रेम 4:3 है, इसलिए लंबे स्क्रीनशॉट और चौड़े बैनर एक ही समान ग्रिड में बैठते हैं।

स्क्रीनशॉट, एक लोगो और एक बैनर

पूर्वावलोकन

इसे <div rst-list> के अंदर रखें।

<div rst-media>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/checkout.png" alt="" loading="lazy" decoding="async" width="1280" height="3200">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/1">चेकआउट, चरण 2</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="चेकआउट, चरण 2 के लिए कार्रवाइयाँ">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </summary>
          <div rst-row-menu-panel>
            <a href="/images/1/edit">संपादित करें</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">हटाएँ…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>भुगतान का चरण, कार्ड फ़ॉर्म खुला हुआ।</p>
      <p rst-media-meta>1280 × 3200 · 412 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/pricing.png" alt="" loading="lazy" decoding="async" width="1280" height="2400">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/2">मूल्य पृष्ठ</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="मूल्य पृष्ठ के लिए कार्रवाइयाँ">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </summary>
          <div rst-row-menu-panel>
            <a href="/images/2/edit">संपादित करें</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">हटाएँ…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">कोई विवरण नहीं</p>
      <p rst-media-meta>1280 × 2400 · 318 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame="contain">
      <img src="/images/logo.svg" alt="Harbour" loading="lazy" decoding="async" width="240" height="240">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/3">Harbour लोगो</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="Harbour लोगो के लिए कार्रवाइयाँ">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </summary>
          <div rst-row-menu-panel>
            <a href="/images/3/edit">संपादित करें</a>
            <hr>
            <a class="rst-danger" href="/images/3/delete">हटाएँ…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>गहरे और हल्के रंग की पृष्ठभूमियों के लिए सिर्फ़ चिह्न।</p>
      <p rst-media-meta>240 × 240 · 3 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame="contain">
      <img src="/images/banner.png" alt="" loading="lazy" decoding="async" width="1200" height="200">
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/4">वसंत बैनर</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="वसंत बैनर के लिए कार्रवाइयाँ">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </summary>
          <div rst-row-menu-panel>
            <a href="/images/4/edit">संपादित करें</a>
            <hr>
            <a class="rst-danger" href="/images/4/delete">हटाएँ…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>मार्च में दुकान के ऊपर की पट्टी।</p>
      <p rst-media-meta>1200 × 200 · 64 KB</p>
    </div>
  </div>
</div>

इसे <div rst-list> के अंदर रखें।

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "भुगतान का चरण, कार्ड फ़ॉर्म खुला हुआ।" "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "संपादित करें") (dict "Danger" true "Href" "/images/1/delete" "Label" "हटाएँ…")) "Meta" "1280 × 3200 · 412 KB" "Name" "चेकआउट, चरण 2" "Src" "/images/checkout.png" "Width" 1280)
        (dict "Desc" "" "Height" 2400 "Href" "/images/2" "Menu" (list (dict "Href" "/images/2/edit" "Label" "संपादित करें") (dict "Danger" true "Href" "/images/2/delete" "Label" "हटाएँ…")) "Meta" "1280 × 2400 · 318 KB" "Name" "मूल्य पृष्ठ" "Src" "/images/pricing.png" "Width" 1280)
        (dict "Alt" "Harbour" "Desc" "गहरे और हल्के रंग की पृष्ठभूमियों के लिए सिर्फ़ चिह्न।" "Fit" "contain" "Height" 240 "Href" "/images/3" "Menu" (list (dict "Href" "/images/3/edit" "Label" "संपादित करें") (dict "Danger" true "Href" "/images/3/delete" "Label" "हटाएँ…")) "Meta" "240 × 240 · 3 KB" "Name" "Harbour लोगो" "Src" "/images/logo.svg" "Width" 240)
        (dict "Desc" "मार्च में दुकान के ऊपर की पट्टी।" "Fit" "contain" "Height" 200 "Href" "/images/4" "Menu" (list (dict "Href" "/images/4/edit" "Label" "संपादित करें") (dict "Danger" true "Href" "/images/4/delete" "Label" "हटाएँ…")) "Meta" "1200 × 200 · 64 KB" "Name" "वसंत बैनर" "Src" "/images/banner.png" "Width" 1200))}}

लोगो या बैनर के लिए Fit को "contain" पर सेट करें। स्क्रीनशॉट डिफ़ॉल्ट रखता है और अपना ऊपरी हिस्सा दिखाता है। जिस टाइल में Desc नहीं है, वह "कोई विवरण नहीं" कहती है।

चयन मोड, एक टाइल चुनी हुई

पूर्वावलोकन

इसे <div rst-list> के अंदर रखें।

<div rst-media>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/checkout.png" alt="" loading="lazy" decoding="async" width="1280" height="3200">
      <label rst-selbox>
        <input type="checkbox" name="id" value="1" checked aria-label="चेकआउट, चरण 2 चुनें">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/1">चेकआउट, चरण 2</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="चेकआउट, चरण 2 के लिए कार्रवाइयाँ">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </summary>
          <div rst-row-menu-panel>
            <a href="/images/1/edit">संपादित करें</a>
            <hr>
            <a class="rst-danger" href="/images/1/delete">हटाएँ…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc>भुगतान का चरण, कार्ड फ़ॉर्म खुला हुआ।</p>
      <p rst-media-meta>1280 × 3200 · 412 KB</p>
    </div>
  </div>
  <div rst-media-tile>
    <div rst-media-frame>
      <img src="/images/pricing.png" alt="" loading="lazy" decoding="async" width="1280" height="2400">
      <label rst-selbox>
        <input type="checkbox" name="id" value="2" aria-label="मूल्य पृष्ठ चुनें">
      </label>
    </div>
    <div rst-media-caption>
      <div rst-media-name>
        <a href="/images/2">मूल्य पृष्ठ</a>
        <details rst-row-menu name="rst-menus">
          <summary aria-label="मूल्य पृष्ठ के लिए कार्रवाइयाँ">
            <svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="1"/><circle cx="12" cy="5" r="1"/><circle cx="12" cy="19" r="1"/></svg>
          </summary>
          <div rst-row-menu-panel>
            <a href="/images/2/edit">संपादित करें</a>
            <hr>
            <a class="rst-danger" href="/images/2/delete">हटाएँ…</a>
          </div>
        </details>
      </div>
      <p rst-media-desc="none">कोई विवरण नहीं</p>
      <p rst-media-meta>1280 × 2400 · 318 KB</p>
    </div>
  </div>
</div>

इसे <div rst-list> के अंदर रखें।

{{template "media-grid" dict
    "Items" (list
        (dict "Desc" "भुगतान का चरण, कार्ड फ़ॉर्म खुला हुआ।" "Height" 3200 "Href" "/images/1" "Menu" (list (dict "Href" "/images/1/edit" "Label" "संपादित करें") (dict "Danger" true "Href" "/images/1/delete" "Label" "हटाएँ…")) "Meta" "1280 × 3200 · 412 KB" "Name" "चेकआउट, चरण 2" "Select" "1" "Selected" true "Src" "/images/checkout.png" "Width" 1280)
        (dict "Desc" "" "Height" 2400 "Href" "/images/2" "Menu" (list (dict "Href" "/images/2/edit" "Label" "संपादित करें") (dict "Danger" true "Href" "/images/2/delete" "Label" "हटाएँ…")) "Meta" "1280 × 2400 · 318 KB" "Name" "मूल्य पृष्ठ" "Select" "2" "Src" "/images/pricing.png" "Width" 1280))}}

ग्रिड और bulk-bar को एक ही फ़ॉर्म में रखें। हर चेकबॉक्स अपनी टाइल का Select मान "id" नाम से भेजता है; इसे बदलने के लिए SelectName सेट करें। फ़ॉर्म के अंदर मेनू के आइटम लिंक होने चाहिए।

pagination

साधारण लिंक की क्रमांकित पट्टी, ताकि JavaScript बंद होने पर भी पेजिंग चलती रहे।

लंबी सूची के बीच में

पूर्वावलोकन 
<nav rst-pagination aria-label="पोस्ट के पन्ने">
  <a href="/posts?page=3" rst-pagination-step="prev"><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 rst-pagination-word>पिछला</span></a>
  <a href="/posts?page=1">1</a>
  <span rst-pagination-gap aria-hidden="true">…</span>
  <a href="/posts?page=3" rst-pagination-wide>3</a>
  <span aria-current="page">4</span>
  <a href="/posts?page=5" rst-pagination-wide>5</a>
  <span rst-pagination-gap aria-hidden="true">…</span>
  <a href="/posts?page=9">9</a>
  <a href="/posts?page=5" rst-pagination-step="next"><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 rst-pagination-word>अगला</span></a>
</nav>
{{template "pagination" dict
    "Items" (list
        (dict "Href" "/posts?page=3" "Label" "पिछला" "Rel" "prev")
        (dict "Href" "/posts?page=1" "Label" "1")
        (dict "Gap" true)
        (dict "Href" "/posts?page=3" "Label" "3")
        (dict "Current" true "Label" "4")
        (dict "Href" "/posts?page=5" "Label" "5")
        (dict "Gap" true)
        (dict "Href" "/posts?page=9" "Label" "9")
        (dict "Href" "/posts?page=5" "Label" "अगला" "Rel" "next"))
    "Label" "पोस्ट के पन्ने"}}

पहला पृष्ठ, डिफ़ॉल्ट सुगम्य नाम

पूर्वावलोकन 
<nav rst-pagination aria-label="पृष्ठांकन">
  <span rst-pagination-disabled rst-pagination-step="prev"><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 rst-pagination-word>पिछला</span></span>
  <span aria-current="page">1</span>
  <a href="/posts?page=2">2</a>
  <a href="/posts?page=2" rst-pagination-step="next"><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 rst-pagination-word>अगला</span></a>
</nav>
{{template "pagination" dict
    "Items" (list
        (dict "Disabled" true "Label" "पिछला" "Rel" "prev")
        (dict "Current" true "Label" "1")
        (dict "Href" "/posts?page=2" "Label" "2")
        (dict "Href" "/posts?page=2" "Label" "अगला" "Rel" "next"))}}

कोई Label नहीं, इसलिए nav का सुगम्य नाम कैटलॉग से आता है।

empty-state

खाली-स्थिति कार्ड। खाली स्थिति, शुरुआती कदमों के रास्तों के साथ।

POST वाली कार्रवाई-बुलावे के साथ

पूर्वावलोकन 
<div rst-empty>
  <h2 rst-empty-title>यहाँ अभी कुछ नहीं है</h2>
  <p rst-empty-body>अभी कोई पोस्ट नहीं है। पहली पोस्ट से शुरुआत करना अच्छा रहेगा।</p>
  <form rst-empty-cta method="post" action="/posts/seed">
    <input type="hidden" name="csrf" value="tok-123">
    <button rst-btn="primary" type="submit">नमूना पोस्ट जोड़ें</button>
  </form>
</div>
{{template "empty-state" dict
    "Body" "अभी कोई पोस्ट नहीं है। पहली पोस्ट से शुरुआत करना अच्छा रहेगा।"
    "Title" "यहाँ अभी कुछ नहीं है"
    "ActionLabel" "नमूना पोस्ट जोड़ें"
    "PostAction" "/posts/seed"
    "Hidden" (list (list "csrf" "tok-123"))}}

सिर्फ़ वाक्य

पूर्वावलोकन 
<div rst-empty>
  <p rst-empty-body>इस पोस्ट पर अभी कोई टिप्पणी नहीं है।</p>
</div>
{{template "empty-state" dict "Body" "इस पोस्ट पर अभी कोई टिप्पणी नहीं है।"}}