डिज़ाइन सिस्टम जो कुछ देता है, उसका अवलोकन। थीम: day। भाषा: हिन्दी।
सूची स्क्रीन
सामान्य सूची स्क्रीन: शीर्षक, टूलबार और पंक्तियाँ, जो डेस्कटॉप और मोबाइल दोनों पर काम करती हैं।
पहले से बने, आपस में एक जैसे 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>