ডিজাইন সিস্টেম যা কিছু দেয়, তার সংক্ষিপ্ত পরিচয়। থিম: signal। ভাষা: বাংলা।
তালিকার পর্দা
সাধারণ তালিকা স্ক্রিন: শিরোনাম, টুলবার আর সারি, ডেস্কটপ ও মোবাইল দুটোতেই চলে।
আগে থেকে তৈরি, পরস্পর সঙ্গতিপূর্ণ UI উপাদান, সার্ভারে রেন্ডার করা।
ফ্রেমওয়ার্কের নিজের পরিভাষায় এগুলিকে partial বলা হয়: ui.Templates() partial ফেরত দেয়, আর docs/site/templates.md সেই নামেই এগুলির নথি রাখে। এই পাতার শব্দ বদলেছে; কোডের শব্দ বদলায়নি।
এখানকার লিংকগুলি নিষ্ক্রিয়
লিংক নিষ্ক্রিয়, নমুনার সোর্স আলাদা করে দেওয়া আছে।
নিচের প্রতিটি নমুনা নিজের ফ্রেমে।
নমুনার বিষয়বস্তু ইংরেজিতে। নমুনা শেলগুলি অনূদিত।
page-header
স্ক্রিনের শিরোনাম বার: একটি h1, ঐচ্ছিক উপশিরোনাম, আর একটি প্রধান ক্রিয়া।
Hidden-এ কিছুই বলে না কোন জোড়াটি পাতা, তাই ডিফল্ট আচরণ page=4 এমন একটি ফলাফলের সেটে নিয়ে যাবে যেখানে আর চারটি পাতা নেই। অ্যাপ ClearHref দিয়ে সেটি আবার শুরুতে নিয়ে যায়।
<div rst-list><div rst-row>
<span rst-row-main><a href="/posts/2">Why we moved off the old runner</a><small rst-row-sub>Draft · saved 20 minutes ago</small></span>
</div></div>
seg-tabs
সার্ভারে রেন্ডার করা লিংক দিয়ে গড়া সেগমেন্টেড কন্ট্রোল। বর্তমান ট্যাব হলো একটি লিংকের উপর aria-current।
কোনো Label নেই, তাই nav-এর অ্যাক্সেসযোগ্য নাম ক্যাটালগ থেকে আসে।
empty-state
খালি-অবস্থার কার্ড। খালি অবস্থা, সঙ্গে শুরু করার পথ।
POST দিয়ে করা একটি আহ্বানসহ
<div rst-empty>
<h2 rst-empty-title>Nothing here yet</h2>
<p rst-empty-body>No posts yet. Your first one is a good place to start.</p>
<form rst-empty-cta method="post" action="/posts/seed">
<input type="hidden" name="csrf" value="tok-123">
<button rst-btn="primary" type="submit">Add sample posts</button>
</form>
</div>
শুধু বাক্যটি
<div rst-empty>
<p rst-empty-body>No comments on this post yet.</p>
</div>