মূল বিষয়ে যান
বিভাগসমূহ
ভাষা, এখন বাংলা
Rastrillo ডিজাইন সিস্টেম

উপস্থাপন

যে ছোট ছোট শব্দভান্ডার দিয়ে একটি পর্দা গড়া হয়: অবস্থা, পরিচয়, অগ্রগতি, আর সতর্কবার্তার একমাত্র রূপ।

প্রতিটি উদাহরণ সত্যিই চলে, কিন্তু এর লিংকগুলো কোথাও নিয়ে যায় না। 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"}}

বরাদ্দের বেশি পার্শিয়ালে ভরাট ১০০%-এ সীমাবদ্ধ থাকে।

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>২৪</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>৯</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"}}

৪১২০-এর বদলে 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"}}