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

प्रदर्शन

वे छोटे शब्दावली टुकड़े जिनसे स्क्रीन जुड़ती है: स्थिति, पहचान, प्रगति, और चेतावनी का इकलौता रूप।

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

status-pill

रिकॉर्ड की स्थिति एक रंगीन पिल के रूप में, रंग और लेबल दोनों के साथ।

पूर्वावलोकन

neutral

<span rst-status rst-tone="neutral">मसौदा</span>

positive

<span rst-status rst-tone="positive">प्रकाशित</span>

warning

<span rst-status rst-tone="warning">निर्धारित</span>

negative

<span rst-status rst-tone="negative">विफल</span>

neutral

{{template "status-pill" dict "Label" "मसौदा"}}

positive

{{template "status-pill" dict "Label" "प्रकाशित" "Tone" "positive"}}

warning

{{template "status-pill" dict "Label" "निर्धारित" "Tone" "warning"}}

negative

{{template "status-pill" dict "Label" "विफल" "Tone" "negative"}}

neutral Tone अपने-आप neutral होता है, इसलिए यह कॉल उसे छोड़ देती है।

badge

बड़े अक्षरों वाला किनारेदार छोटा चिप, स्थिर निशानों के लिए। यह status-pill से अलग है, जो रिकॉर्ड की स्थिति बताता है।

पूर्वावलोकन

कोई टोन नहीं (शांत डिफ़ॉल्ट)

<span rst-badge>मसौदा</span>

neutral

<span rst-badge="neutral">आंतरिक</span>

positive

<span rst-badge="positive">लाइव</span>

warning

<span rst-badge="warning">बीटा</span>

negative

<span rst-badge="negative">बिक चुका</span>

कोई टोन नहीं (शांत डिफ़ॉल्ट)

{{template "badge" dict "Label" "मसौदा"}}

neutral

{{template "badge" dict "Label" "आंतरिक" "Tone" "neutral"}}

positive

{{template "badge" dict "Label" "लाइव" "Tone" "positive"}}

warning

{{template "badge" dict "Label" "बीटा" "Tone" "warning"}}

negative

{{template "badge" dict "Label" "बिक चुका" "Tone" "negative"}}

meter

क्षमता बार, अपने आँकड़े के साथ।

पूर्वावलोकन

ख़ाली

<span rst-meter>
  <meter rst-meter-bar value="0" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>0/500</span>
</span>

कुछ हद तक भरा

<span rst-meter>
  <meter rst-meter-bar value="42" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>210/500</span>
</span>

लगभग भरा हुआ

<span rst-meter>
  <meter rst-meter-bar value="82" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>412/500</span>
</span>

भरा हुआ

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>500/500</span>
</span>

तय सीमा से ऊपर

<span rst-meter>
  <meter rst-meter-bar value="100" min="0" max="100" aria-hidden="true"></meter>
  <span rst-meter-num>700/500</span>
</span>

ख़ाली

{{template "meter" dict "Percent" 0 "Text" "0/500"}}

कुछ हद तक भरा

{{template "meter" dict "Percent" 42 "Text" "210/500"}}

लगभग भरा हुआ

{{template "meter" dict "Percent" 82 "Text" "412/500"}}

भरा हुआ

{{template "meter" dict "Percent" 100 "Text" "500/500"}}

तय सीमा से ऊपर

{{template "meter" dict "Percent" 140 "Text" "700/500"}}

तय सीमा से ऊपर पार्शियल में भराव 100% पर सीमित रहता है।

stat

डैशबोर्ड पर एक संख्या, उसके लेबल और उसमें कितना बदलाव हुआ, के साथ।

बड़ी संख्या

पूर्वावलोकन

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

<div rst-stat="lead">
  <span rst-stat-label>इस महीने की आय</span>
  <span rst-stat-num>€48,210</span>
  <span rst-stat-delta rst-tone="positive">&#43;12%</span>
  <span rst-stat-note>पिछले महीने की तुलना में</span>
</div>

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

{{template "stat" dict
    "Label" "इस महीने की आय"
    "Value" "€48,210"
    "Delta" "+12%"
    "Tone" "positive"
    "Note" "पिछले महीने की तुलना में"
    "Lead" true}}

पंक्ति के किसी एक आँकड़े में Lead जोड़ें, वह बड़ा हो जाएगा। यह वही कॉम्पोनेंट है, बस बड़ा।

छोटी संख्या

पूर्वावलोकन

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

<div rst-stat>
  <span rst-stat-label>बकाया इनवॉइस</span>
  <span rst-stat-num>24</span>
</div>

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

{{template "stat" dict "Label" "बकाया इनवॉइस" "Value" "24"}}

आपको बस एक लेबल और एक संख्या चाहिए। बाकी सब वैकल्पिक है।

जब घटना अच्छा हो

पूर्वावलोकन

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

<div rst-stat>
  <span rst-stat-label>पहले जवाब तक का समय</span>
  <span rst-stat-num>1 घं 12 मि</span>
  <span rst-stat-delta rst-tone="positive">−38%</span>
  <span rst-stat-note>पिछले हफ़्ते की तुलना में</span>
</div>

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

{{template "stat" dict
    "Label" "पहले जवाब तक का समय"
    "Value" "1 घं 12 मि"
    "Delta" "−38%"
    "Tone" "positive"
    "Note" "पिछले हफ़्ते की तुलना में"}}

रंग आप तय करते हैं, कॉम्पोनेंट नहीं। यहाँ संख्या घटी है और यह अच्छी खबर है, इसलिए बदलाव हरा है।

जब बढ़ना बुरा हो

पूर्वावलोकन

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

<div rst-stat>
  <span rst-stat-label>विफल भुगतान</span>
  <span rst-stat-num>9</span>
  <span rst-stat-delta rst-tone="negative">&#43;3</span>
  <span rst-stat-note>पिछले हफ़्ते की तुलना में</span>
</div>

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

{{template "stat" dict
    "Label" "विफल भुगतान"
    "Value" "9"
    "Delta" "+3"
    "Tone" "negative"
    "Note" "पिछले हफ़्ते की तुलना में"}}

यहाँ संख्या बढ़ी है और यह बुरी खबर है, इसलिए बदलाव लाल है।

जब कहा न जा सके

पूर्वावलोकन

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

<div rst-stat>
  <span rst-stat-label>सत्र की औसत अवधि</span>
  <span rst-stat-num>4 मि 12 से</span>
  <span rst-stat-delta rst-tone="neutral">&#43;18 से</span>
  <span rst-stat-note>शुक्रवार से</span>
</div>

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

{{template "stat" dict
    "Label" "सत्र की औसत अवधि"
    "Value" "4 मि 12 से"
    "Delta" "+18 से"
    "Note" "शुक्रवार से"}}

रंग न दें तो बदलाव धूसर रहेगा। जब कह न सकें कि यह अच्छा है या बुरा, तब ऐसा करें।

छोटा करके लिखी संख्या

पूर्वावलोकन

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

<div rst-stat>
  <span rst-stat-label>भेजे गए संदेश</span>
  <span rst-stat-num><data value="4120">4.1k</data></span>
</div>

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

{{template "stat" dict "Label" "भेजे गए संदेश" "Value" "4.1k" "Exact" "4120"}}

4120 की जगह 4.1k दिखा रहे हैं? पूरी संख्या Exact में रखें। स्क्रीन रीडर वही पढ़ते हैं जो स्क्रीन पर है, इसलिए जो कुछ व्यक्ति को चाहिए वह संख्या में ही रखें।

person

आद्याक्षर अवतार, नाम और ईमेल। लोगों के रिकॉर्ड जल्दी पहचानने के लिए।

नाम और ईमेल

पूर्वावलोकन 
<a rst-person href="/people/1">
  <span rst-person-av aria-hidden="true">G</span>
  <span rst-person-meta>
    <span rst-person-name>Grace Hopper</span>
    <span rst-person-email>grace@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/1"
    "Name" "Grace Hopper"
    "Email" "grace@example.com"
    "Initial" "G"}}

बड़ा, दिखाने वाली स्क्रीन के शीर्ष का आकार

पूर्वावलोकन 
<a rst-person="lg" href="/people/2">
  <span rst-person-av aria-hidden="true">A</span>
  <span rst-person-meta>
    <span rst-person-name>Ada Lovelace</span>
    <span rst-person-email>ada@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/2"
    "Name" "Ada Lovelace"
    "Email" "ada@example.com"
    "Initial" "A"
    "Large" true}}

बिना आद्याक्षर

पूर्वावलोकन 
<a rst-person href="/people/3">
  <span rst-person-av="empty" aria-hidden="true"></span>
  <span rst-person-meta>
    <span rst-person-name>बिना स्वीकार किया आमंत्रण</span>
    <span rst-person-email>invited@example.com</span>
  </span>
</a>
{{template "person" dict
    "Href" "/people/3"
    "Name" "बिना स्वीकार किया आमंत्रण"
    "Email" "invited@example.com"}}

actor

किसने क्या किया, शब्दों में: किसी व्यक्ति का नाम, या एजेंट और वह व्यक्ति जिसके लिए उसने काम किया। कोई बैज नहीं, कोई आइकन नहीं।

किसी व्यक्ति के लिए काम करता एजेंट

पूर्वावलोकन 
<span rst-actor>Grace Hopper के लिए Claude</span>
{{template "actor" dict "Actor" .Actor}}

किसी subject को नाम में बदलने के लिए बूट पर एक बार ui.ActorName सेट करें। ऐप खुद, यानी शून्य Actor, कुछ भी रेंडर नहीं करता।

एक व्यक्ति

पूर्वावलोकन 
<span rst-actor>Grace Hopper</span>
{{template "actor" dict "Actor" .Actor}}

callout

चेतावनी की इकलौती शब्दावली: रंगी हुई पट्टी, टोन का चिह्न, वैकल्पिक मोटा शीर्षक, और एक अनुच्छेद।

info

पूर्वावलोकन 
<div rst-callout rst-tone="info">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="M12 16v-4"/><path d="M12 8h.01"/></svg>
  </span>
  <div rst-callout-body>
    <p>साइट प्रकाशित होने तक पोस्ट केवल सदस्यों को दिखती हैं।</p>
  </div>
</div>
{{template "callout" dict
    "Body" "साइट प्रकाशित होने तक पोस्ट केवल सदस्यों को दिखती हैं।"
    "Tone" "info"}}

positive

पूर्वावलोकन 
<div rst-callout rst-tone="positive">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="m9 12 2 2 4-4"/></svg>
  </span>
  <div rst-callout-body>
    <strong>भुगतान जुड़ गए हैं</strong>
    <p>अब आप टिकटों का भुगतान ले सकते हैं।</p>
  </div>
</div>
{{template "callout" dict
    "Body" "अब आप टिकटों का भुगतान ले सकते हैं।"
    "Title" "भुगतान जुड़ गए हैं"
    "Tone" "positive"}}

warning

पूर्वावलोकन 
<div rst-callout rst-tone="warning">
  <span rst-callout-ic 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="m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3Z"/><path d="M12 9v4"/><path d="M12 17h.01"/></svg>
  </span>
  <div rst-callout-body>
    <strong>बेचना शुरू करने के लिए भुगतान जोड़ें</strong>
    <p>आपका कार्यक्रम लाइव है, पर अभी भुगतान नहीं ले सकता।</p>
  </div>
</div>
{{template "callout" dict
    "Body" "आपका कार्यक्रम लाइव है, पर अभी भुगतान नहीं ले सकता।"
    "Title" "बेचना शुरू करने के लिए भुगतान जोड़ें"
    "Tone" "warning"}}

negative

पूर्वावलोकन 
<div rst-callout rst-tone="negative">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>पिछला आयात विफल रहा</strong>
    <p>कुछ नहीं बदला गया। पंक्ति 91 ठीक करें और फिर कोशिश करें।</p>
  </div>
</div>
{{template "callout" dict
    "Body" "कुछ नहीं बदला गया। पंक्ति 91 ठीक करें और फिर कोशिश करें।"
    "Title" "पिछला आयात विफल रहा"
    "Tone" "negative"}}

negative, चेतावनी के रूप में घोषित

पूर्वावलोकन 
<div rst-callout rst-tone="negative" role="alert">
  <span rst-callout-ic 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"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6"/><path d="m9 9 6 6"/></svg>
  </span>
  <div rst-callout-body>
    <strong>आयात रुक गया</strong>
    <p>कुछ नहीं बदला गया। पंक्ति 91 ठीक करें और फिर कोशिश करें।</p>
  </div>
</div>
{{template "callout" dict
    "Body" "कुछ नहीं बदला गया। पंक्ति 91 ठीक करें और फिर कोशिश करें।"
    "Title" "आयात रुक गया"
    "Tone" "negative"
    "Alert" true}}

alert, role="alert" जोड़ता है ताकि ज़रूरी संदेश दिखाए जा सकें।

detail-list

विवरण स्क्रीन पर किसी रिकॉर्ड की डेफ़िनिशन लिस्ट। मोनो चिह्न मशीन जैसे मानों के लिए।

चार तथ्य, एक मशीन जैसा

पूर्वावलोकन

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

<dl rst-detail>
  <dt>दर्शक</dt>
  <dd>सदस्य</dd>
  <dt>मुख्य पृष्ठ</dt>
  <dd>नहीं</dd>
  <dt>प्रकाशित</dt>
  <dd>
    <time datetime="2026-08-02">2 अगस्त 2026</time>
  </dd>
  <dt>संदर्भ</dt>
  <dd class="rst-mono">post_01H9ZQ</dd>
</dl>

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

{{template "detail-list" dict
    "Items" (list
        (dict "Label" "दर्शक" "Value" "सदस्य")
        (dict "Label" "मुख्य पृष्ठ" "Value" "नहीं")
        (dict "DateTime" "2026-08-02" "Label" "प्रकाशित" "Value" "2 अगस्त 2026")
        (dict "Label" "संदर्भ" "Mono" true "Value" "post_01H9ZQ"))}}

notice

रीडायरेक्ट के बाद एक पंक्ति की पुष्टि। यह dict नहीं, सादा स्ट्रिंग लेती है, और ख़ाली होने पर कुछ नहीं दिखाती।

सहेजे जाने का संदेश

पूर्वावलोकन 
<p rst-notice role="status">पोस्ट सहेजी गई।</p>
{{template "notice" "पोस्ट सहेजी गई।"}}

region:notice

वह सूचना जिसे हर शेल पेज पर रखता है, पेज डेटा का Notice दिखाते हुए, ताकि स्क्रीन रीडर फ़्लैश सुन सके और live.js उसे अपनी जगह भर सके।

सहेजे जाने का संदेश

पूर्वावलोकन 
<div id="notice" role="status">
  <p rst-notice>पोस्ट सहेजी गई।</p>
</div>
{{template "region:notice" dict "Notice" "पोस्ट सहेजी गई।"}}

form-error

फ़ॉर्म की त्रुटि सारांश पंक्ति, role="alert"। यह सादा स्ट्रिंग लेती है; त्रुटि न हो तो कुछ नहीं दिखाती।

अस्वीकृत सबमिशन

पूर्वावलोकन 
<p rst-form-error role="alert">यह शीर्षक पहले से लिया जा चुका है।</p>
{{template "form-error" "यह शीर्षक पहले से लिया जा चुका है।"}}

job-status

पृष्ठभूमि के काम का पोल किया जाने वाला हिस्सा। data-poll विशेषता तभी निकलती है जब काम चल रहा हो: उसे न देना ही पोलिंग रोकने का तरीका है।

चल रहा है

पूर्वावलोकन 

<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
  <span rst-spin aria-hidden="true"></span> <bdi><strong>आयात</strong></bdi> चल रहा है: <bdi>400 में से 128</bdi>…
  <progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>

{{template "job-status" dict
    "Name" "आयात"
    "Percent" 32
    "PollSeconds" 2
    "PollURL" "/jobs/1/fragment"
    "Progress" "400 में से 128"
    "Status" "running"}}

यह वाला पोल करता है: यह पृष्ठ का इकलौता नमूना है जो नेटवर्क से कुछ माँगता है, और स्थिर साइट पर उसका उत्तर कभी नहीं आता।

पूरा हुआ

पूर्वावलोकन 

<div rst-job>
  <bdi><strong>आयात</strong></bdi> पूरा हुआ।
</div>

{{template "job-status" dict "Name" "आयात" "Status" "done"}}

विफल

पूर्वावलोकन 

<div rst-job>
  <bdi><strong>आयात</strong></bdi> विफल हुआ: <bdi>row 91: no such column &#34;published&#34;</bdi>
</div>

{{template "job-status" dict
    "Err" "row 91: no such column \"published\""
    "Name" "आयात"
    "Status" "failed"}}