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

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

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

ফর্ম

প্রতিটি কন্ট্রোল, বাস্তব ফর্ম যে অবস্থাগুলোতে সেগুলোকে রাখে সেই অবস্থায়। প্রতিটি বসে প্যাডিংযুক্ত rst-box-এ, কারণ এই পার্শিয়ালগুলো সেটাই ধরে নেয়।

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

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

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

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

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

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

field

লেবেল, ইনপুট, ঐচ্ছিক ইঙ্গিত, সহায়তা আর ত্রুটি। সাধারণ টেক্সট-ধরনের কন্ট্রোল, স্পষ্ট ID সহ।

সাদামাটা

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_bare">Title</label>
<input rst-input type="text" id="f_bare" name="f_bare">
</div></form></section>

একটি ইঙ্গিতসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_hint">Slug <span rst-field-hint>(lowercase, no spaces)</span></label>
<input rst-input type="text" id="f_hint" name="f_hint">
</div></form></section>

কন্ট্রোলের নিচে সহায়তাসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_help">Email</label>
<input rst-input type="email" id="f_help" name="f_help" autocomplete="email" aria-describedby="f_help-help">
<p rst-field-help id="f_help-help">We only use this to send you replies.</p>
</div></form></section>

আবশ্যিক

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_required">Full name</label>
<input rst-input type="text" id="f_required" name="f_required" required>
</div></form></section>

একটি ত্রুটিসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_error">Email</label>
<input rst-input type="email" id="f_error" name="f_error" value="grace@" aria-invalid="true" aria-describedby="f_error-error">
<p rst-field-error id="f_error-error" role="alert">That does not look like an email address.</p>
</div></form></section>

ছোট

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_short">Postcode</label>
<input rst-input="short" type="text" id="f_short" name="f_short" value="D02 XY45">
</div></form></section>

প্রধান ক্ষেত্র

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="f_primary">Title</label>
<input rst-input="primary" type="text" id="f_primary" name="f_primary" value="Quarterly board meeting">
</div></form></section>

field-text

লেবেলসহ একটি টেক্সট ইনপুট, id তৈরি হয় Name থেকে। আবশ্যিক চিহ্নের তারাটি aria-hidden। প্রোগ্রাম্যাটিক সংকেত হলো ইনপুটের required অ্যাট্রিবিউট।

সাদামাটা

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_bare">Title</label>
  <input rst-input id="ft_bare" name="ft_bare" type="text">
</div></form></section>

একটি ইঙ্গিতসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_hint">Headline</label>
  <input rst-input id="ft_hint" name="ft_hint" type="text" aria-describedby="ft_hint-hint">
  <small rst-field-hint id="ft_hint-hint">Shown in the list.</small>
</div></form></section>

আবশ্যিক

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_required">Display name <span rst-field-required aria-hidden="true">*</span></label>
  <input rst-input id="ft_required" name="ft_required" type="text" autocomplete="nickname" required>
</div></form></section>

একটি ত্রুটিসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_error">Title</label>
  <input rst-input id="ft_error" name="ft_error" type="text" value="Release notes" aria-invalid="true" aria-describedby="ft_error-error">
  <small rst-field-error id="ft_error-error">A post with that title already exists.</small>
</div></form></section>

প্রধান ক্ষেত্র

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ft_primary">What is it?</label>
  <input rst-input="primary" id="ft_primary" name="ft_primary" type="text" value="Quarterly board meeting">
</div></form></section>

ফর্মের প্রধান ক্ষেত্রে — যেমন শিরোনাম বা নাম — Primary যোগ করুন, যাতে ইনপুটটি আরও প্রকট দেখায়।

field-textarea

একটি textarea-র চারপাশে field-text-এর মোড়ক।

সাদামাটা

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_bare">Notes</label>
  <textarea rst-textarea id="ta_bare" name="ta_bare" rows="3"></textarea>
</div></form></section>

একটি ইঙ্গিতসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_hint">Bio</label>
  <textarea rst-textarea id="ta_hint" name="ta_hint" rows="3" aria-describedby="ta_hint-hint"></textarea>
  <small rst-field-hint id="ta_hint-hint">Shown on your profile.</small>
</div></form></section>

একটি ত্রুটিসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_error">Summary</label>
  <textarea rst-textarea id="ta_error" name="ta_error" rows="3" aria-invalid="true" aria-describedby="ta_error-error">…</textarea>
  <small rst-field-error id="ta_error-error">A summary needs at least twenty characters.</small>
</div></form></section>

আবশ্যিক

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field>
  <label rst-field-label for="ta_required">Reason for refund <span rst-field-required aria-hidden="true">*</span></label>
  <textarea rst-textarea id="ta_required" name="ta_required" rows="3" required></textarea>
</div></form></section>

field-select

নেটিভ select-এর চারপাশে field-এর মোড়ক। দশটির বেশি অপশন হলে select, select.js-এর ছেঁকে নেওয়া কম্বোবক্স চালু করে; তবু ফর্ম যা পাঠায় তা ওই নেটিভ select-ই।

তিনটি বিকল্প: নেটিভ select

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_few">Role</label>
<select rst-input id="sel_few" name="sel_few"><option value="Admin" selected>Admin</option><option value="Editor">Editor</option><option value="Member">Member</option></select>
</div></form></section>

বারোটি বিকল্প: ফিল্টারযোগ্য কম্বোবক্স

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_many">City</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="১টি ফলাফল" aria-describedby="sel_many-help"><option value="Dublin" selected>Dublin</option><option value="Lisbon">Lisbon</option><option value="Madrid">Madrid</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option><option value="Athens">Athens</option><option value="Helsinki">Helsinki</option><option value="Reykjavík">Reykjavík</option><option value="Warsaw">Warsaw</option><option value="Zagreb">Zagreb</option><option value="Tallinn">Tallinn</option><option value="Valletta">Valletta</option></select>
<p rst-field-help id="sel_many-help">Start typing to filter.</p>
</div></form></section>

দশটির বেশি অপশন হলে পার্শিয়ালটি select.js চালু করে। দশের কম হলে করে না: গুটিকয় জিনিসের মধ্যে খোঁজা আসবাব মাত্র, সাহায্য নয়।

বারোটি অপশন, Plain — উন্নতিটি নাকচ করা

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_plain">City</label>
<select rst-input id="sel_plain" name="sel_plain"><option value="Dublin" selected>Dublin</option><option value="Lisbon">Lisbon</option><option value="Madrid">Madrid</option><option value="Berlin">Berlin</option><option value="Rome">Rome</option><option value="Athens">Athens</option><option value="Helsinki">Helsinki</option><option value="Reykjavík">Reykjavík</option><option value="Warsaw">Warsaw</option><option value="Zagreb">Zagreb</option><option value="Tallinn">Tallinn</option><option value="Valletta">Valletta</option></select>
</div></form></section>

আবশ্যিক, একটি ত্রুটিসহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_error">Role</label>
<select rst-input id="sel_error" name="sel_error" required aria-invalid="true" aria-describedby="sel_error-error"><option value="Admin" selected>Admin</option><option value="Editor">Editor</option><option value="Member">Member</option></select>
<p rst-field-error id="sel_error-error" role="alert">Pick a role for this person.</p>
</div></form></section>

হাতে লেখা, optgroup সহ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-field><label rst-field-label for="sel_grouped">Region</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="১টি ফলাফল">
<optgroup label="Europe"><option value="dublin" selected>Dublin</option><option value="lisbon">Lisbon</option><option value="warsaw">Warsaw</option></optgroup>
<optgroup label="Americas"><option value="montreal">Montréal</option><option value="lima">Lima</option><option value="austin">Austin</option></optgroup>
<optgroup label="Asia"><option value="osaka">Osaka</option><option value="hanoi">Hanoi</option><option value="dhaka">Dhaka</option></optgroup>
<optgroup label="Africa"><option value="accra">Accra</option><option value="nairobi">Nairobi</option><option value="tunis">Tunis</option></optgroup>
</select>
</div></form></section>

এখানে Options একটি সমতল তালিকা, তাই দলবদ্ধ পছন্দগুলো অ্যাপ নিজেই মার্কআপ হিসেবে লেখে। select.js দলগুলো ফেলে না দিয়ে এঁকে দেয়; হাতে লেখা কোনো select চাইলে data-rst-select="false" দিয়ে উন্নতিটি একেবারেই নাকচ করতে পারে।

field-check

টগল করার একমাত্র উপায়: সত্যিকারের একটি চেকবক্স, সুইচের চেহারায়, কীবোর্ড আর স্ক্রিন রিডার অক্ষত।

চালু

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_on" checked><span rst-switch-track aria-hidden="true"></span> Email me about replies</label></form></section>

বন্ধ

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_off"><span rst-switch-track aria-hidden="true"></span> Email me about mentions</label></form></section>

নিষ্ক্রিয়

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><label rst-switch><input type="checkbox" name="notify_disabled" disabled><span rst-switch-track aria-hidden="true"></span> Email me a weekly digest</label></form></section>

choice-field

অপশন কার্ড — রেডিও বা চেকবক্স দলের পছন্দের রূপ। Title ছোট থাকে; ব্যাখ্যা করে Desc।

একটি বাছুন

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><fieldset rst-choice><legend>Plan</legend><div rst-choice-cards><label><input type="radio" name="plan" value="free"><span><span rst-choice-title>Free</span><span rst-choice-desc>One project, community support.</span></span></label><label><input type="radio" name="plan" value="pro" checked><span><span rst-choice-title>Pro</span><span rst-choice-desc>Unlimited projects and a support inbox.</span></span></label></div></fieldset></form></section>

যেগুলো ইচ্ছা বাছুন

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><fieldset rst-choice><legend>Send me</legend><div rst-choice-cards><label><input type="checkbox" name="digest" value="replies" checked><span><span rst-choice-title>Replies</span><span rst-choice-desc>As they happen.</span></span></label><label><input type="checkbox" name="digest" value="weekly"><span><span rst-choice-title>Weekly digest</span><span rst-choice-desc>Monday mornings.</span></span></label></div></fieldset></form></section>

form-foot

ফর্মের শেষ সারি: একটি প্রধান সাবমিট আর ঐচ্ছিক একটি বাতিল লিঙ্ক। বাতিল একটি লিঙ্ক, কারণ ফর্ম ছেড়ে যাওয়া মানে অন্য পাতায় যাওয়া।

সংরক্ষণ ও বাতিল

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Save post</button>
  <a rst-btn href="/posts">Back to posts</a>
</div></form></section>

শুধু জমা দেওয়া

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Send invitation</button>
</div></form></section>

নিষ্ক্রিয় — কিছু ঘটার আগের বোতাম

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
  <button rst-btn="primary" type="submit">Publish</button>
  <a rst-btn href="/posts">Back to posts</a>
</div></form></section>

যে বোতাম কিছু বদলায় সেটি লোডিং অবস্থা পায়; যে বোতাম শুধু কিছু দেখায় — যেমন ডিসক্লোজার, ড্রপডাউন, ট্যাব — সেটি পায় না। rastrillo.js এই নিয়ম প্রতিটি ফর্মের প্রতিটি সাবমিট বোতামে প্রয়োগ করে, আলাদা করে চালু করার কিছু নেই।

কাজ চলছে — ফর্ম বেরোনোর সময় rastrillo.js যা লেখে

প্রিভিউ
<section rst-box><form rst-form method="post" action="#"><div rst-form-foot>
<button rst-btn="primary" type="submit" aria-busy="true" data-idle-label="Publish" disabled><span rst-spin aria-hidden="true"></span>Publishing…</button>
<a rst-btn href="/posts">Back to posts</a>
</div></form></section>

শুধু যে বোতামে ক্লিক হয়েছে সেটিই: ফর্মের অন্য সব সাবমিট বোতাম নিজের 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" href="/posts/1">বাতিল</a><button type="submit" rst-btn="danger">Delete this post</button></form></section>

সাধারণ, বাতিলের পূর্বনির্ধারিত ভাষায়

প্রিভিউ
<section rst-box><form rst-form-actions method="post" action="/posts/1/publish"><a rst-btn="ghost" href="/posts/1">বাতিল</a><button type="submit" rst-btn="primary">Publish</button></form></section>

কোনো CancelLabel নেই, তাই বাতিল লিঙ্কের কথাগুলো ক্যাটালগ থেকে আসে।