মূল বিষয়ে যান
মেনু
ভাষা, এখন বাংলা
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo ডিজাইন সিস্টেম

ডিজাইন সিস্টেম যা কিছু দেয়, তার সংক্ষিপ্ত পরিচয়। থিম: day। ভাষা: বাংলা

উপস্থাপন

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

আগে থেকে তৈরি, পরস্পর সঙ্গতিপূর্ণ UI উপাদান, সার্ভারে রেন্ডার করা।

ফ্রেমওয়ার্কের নিজের পরিভাষায় এগুলিকে partial বলা হয়: ui.Templates() partial ফেরত দেয়, আর docs/site/templates.md সেই নামেই এগুলির নথি রাখে। এই পাতার শব্দ বদলেছে; কোডের শব্দ বদলায়নি।

এখানকার লিংকগুলি নিষ্ক্রিয়

লিংক নিষ্ক্রিয়, নমুনার সোর্স আলাদা করে দেওয়া আছে।

নিচের প্রতিটি নমুনা নিজের ফ্রেমে।

নমুনার বিষয়বস্তু ইংরেজিতে। নমুনা শেলগুলি অনূদিত।

status-pill

রেকর্ডের অবস্থা রঙিন পিল হিসেবে, রং আর লেবেল দুটোই।

পূর্বনির্ধারিত টোন (neutral)

প্রিভিউ
<span rst-status rst-tone="neutral">Draft</span>

neutral

প্রিভিউ
<span rst-status rst-tone="neutral">Draft</span>

positive

প্রিভিউ
<span rst-status rst-tone="positive">Published</span>

warning

প্রিভিউ
<span rst-status rst-tone="warning">Scheduled</span>

negative

প্রিভিউ
<span rst-status rst-tone="negative">Failed</span>

badge

বড় হরফের সীমানাযুক্ত ছোট একটি চিপ, স্থির চিহ্নের জন্য। এটি status-pill থেকে আলাদা, যা রেকর্ডের অবস্থা বোঝায়।

কোনও টোন নেই (শান্ত ডিফল্ট)

প্রিভিউ
<span rst-badge>Draft</span>

neutral

প্রিভিউ
<span rst-badge="neutral">Internal</span>

positive

প্রিভিউ
<span rst-badge="positive">Live</span>

warning

প্রিভিউ
<span rst-badge="warning">Beta</span>

negative

প্রিভিউ
<span rst-badge="negative">Sold out</span>

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>

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

stat

ড্যাশবোর্ডে একটি সংখ্যা, তার লেবেল আর কতটা বদলেছে সহ।

বড় সংখ্যাটি

প্রিভিউ
<div rst-stats><div rst-stat="lead"><span rst-stat-label>Revenue this month</span><span rst-stat-num>€48,210</span><span rst-stat-delta rst-tone="positive">&#43;12%</span><span rst-stat-note>vs. last month</span></div></div>

সারির কোনও একটি সংখ্যায় Lead যোগ করুন, সেটি বড় হয়ে যাবে। একই কম্পোনেন্ট, শুধু বড়।

ছোট একটি সংখ্যা

প্রিভিউ
<div rst-stats><div rst-stat><span rst-stat-label>Unpaid invoices</span><span rst-stat-num>24</span></div></div>

আপনার কেবল একটি লেবেল আর একটি সংখ্যা দরকার। বাকি সবই ঐচ্ছিক।

যখন কমাটাই ভালো

প্রিভিউ
<div rst-stats><div rst-stat><span rst-stat-label>Time to first reply</span><span rst-stat-num>1h 12m</span><span rst-stat-delta rst-tone="positive">−38%</span><span rst-stat-note>vs. last week</span></div></div>

রংটা আপনি ঠিক করেন, কম্পোনেন্ট নয়। এখানে সংখ্যা কমেছে আর সেটা সুসংবাদ, তাই পরিবর্তনটি সবুজ।

যখন বাড়াটাই খারাপ

প্রিভিউ
<div rst-stats><div rst-stat><span rst-stat-label>Failed payments</span><span rst-stat-num>9</span><span rst-stat-delta rst-tone="negative">&#43;3</span><span rst-stat-note>vs. last week</span></div></div>

এখানে সংখ্যা বেড়েছে আর সেটা দুঃসংবাদ, তাই পরিবর্তনটি লাল।

যখন বলা যায় না

প্রিভিউ
<div rst-stats><div rst-stat><span rst-stat-label>Average session length</span><span rst-stat-num>4m 12s</span><span rst-stat-delta rst-tone="neutral">&#43;18s</span><span rst-stat-note>since Friday</span></div></div>

রং না দিলে পরিবর্তনটি ধূসর থাকে। ভালো না খারাপ বলতে না পারলে তাই করুন।

সংক্ষেপে লেখা সংখ্যা

প্রিভিউ
<div rst-stats><div rst-stat><span rst-stat-label>Messages sent</span><span rst-stat-num><data value="4120">4.1k</data></span></div></div>

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

বড়, বিস্তারিত পর্দার শিরোনামের মাপ

প্রিভিউ
<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>

আদ্যক্ষর ছাড়া

প্রিভিউ
<a rst-person href="/people/3"><span rst-person-av="empty" aria-hidden="true"></span><span rst-person-meta><span rst-person-name>Unclaimed invitation</span><span rst-person-email>invited@example.com</span></span></a>

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>Posts are visible to members only until the site is published.</p></div></div>

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>Posts are visible to members only until the site is published.</p></div></div>

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>Payments are connected</strong><p>You can take payment for tickets now.</p></div></div>

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>Connect payments to start selling</strong><p>Your event is live but cannot take payment yet.</p></div></div>

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>The last import failed</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>

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>The import stopped</strong><p>Nothing was changed. Fix row 91 and try again.</p></div></div>

alert, role="alert" যোগ করে যাতে গুরুত্বপূর্ণ বার্তা দেখানো যায়।

detail-list

বিস্তারিত স্ক্রিনে কোনও রেকর্ড সম্পর্কে ডেফিনিশন লিস্ট। মেশিনঘেঁষা মানের জন্য মনো চিহ্ন।

চারটি তথ্য, একটি মেশিনঘেঁষা

প্রিভিউ
<section rst-box><dl rst-detail>
  <dt>Audience</dt>
  <dd>Members</dd>
  <dt>Main page</dt>
  <dd>No</dd>
  <dt>Published</dt>
  <dd><time datetime="2026-08-02">2 August 2026</time></dd>
  <dt>Reference</dt>
  <dd class="rst-mono">post_01H9ZQ</dd>
</dl></section>

notice

রিডাইরেক্টের পরে এক লাইনের নিশ্চিতকরণ। এটি dict নয়, সাধারণ একটি স্ট্রিং নেয়, আর ফাঁকা হলে কিছুই দেখায় না।

সংরক্ষণ হয়েছে জানানো একটি বার্তা

প্রিভিউ
<p rst-notice role="status">Post saved.</p>

form-error

ফর্মের ত্রুটির সারসংক্ষেপ লাইন, role="alert"। এটি সাধারণ একটি স্ট্রিং নেয়; ত্রুটি না থাকলে কিছুই দেখায় না।

প্রত্যাখ্যাত একটি জমা

প্রিভিউ
<p rst-form-error role="alert">That title is already taken.</p>

job-status

পটভূমির কাজের পোল-করা অংশ। কাজ চলাকালীনই কেবল data-poll বৈশিষ্ট্যটি বসে — সেটি বাদ দেওয়াই পোলিং থামানোর উপায়।

চলছে

প্রিভিউ

<div rst-job data-poll="/jobs/1/fragment" data-poll-every="2">
  <span rst-spin aria-hidden="true"></span> <strong>Import</strong> is running — 128 of 400…
  <progress rst-job-bar value="32" min="0" max="100" aria-hidden="true"></progress>
</div>

এটি পোল করে: এই পাতার একমাত্র নমুনা যা নেটওয়ার্কের কাছে কিছু চায়, আর স্ট্যাটিক সাইটে তার উত্তর কখনোই আসে না।

সম্পন্ন

প্রিভিউ

<div rst-job>
  <strong>Import</strong> finished.
</div>

ব্যর্থ

প্রিভিউ

<div rst-job>
  <strong>Import</strong> failed: row 91: no such column &#34;published&#34;
</div>