跳到内容
菜单
语言，当前是简体中文
EnglishGaeilge简体中文Españolहिन्दीPortuguêsবাংলাРусский日本語廣東話Tiếng Việtالعربية

rastrillo 设计系统

设计系统所提供内容的总览。主题：plain。语言：简体中文。

列表页

通用列表页：标题、工具栏和行，桌面和移动端都适用。

预先做好、彼此一致的界面元素，在服务器端渲染。

框架自己的词汇把它们叫作 partial：ui.Templates() 返回的是 partial，docs/site/templates.md 也用这个名字。这页上的说法换了，代码里的没换。

这里的链接不可点

链接不可点，示例源码另行提供。

下面每个示例都在自己的框里。

示例内容为英文，示例外壳已翻译。

page-header

页面的标题栏：一个 h1、可选的副标题，以及一个主操作。

标题、副标题和一个主要操作

预览 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Posts</h1>
    <p rst-page-header-sub>Everything you have written, newest first.</p>
  </div>
  <a rst-btn="primary" href="/posts/new"><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="M5 12h14"/><path d="M12 5v14"/></svg>Write a post</a>
</header>

只有标题

预览 
<header rst-page-header>
  <div rst-page-header-titles>
    <h1>Settings</h1>
  </div>
</header>

list-bar

列表卡片顶部的工具栏，带搜索和筛选。

搜索，外加一个筛选下拉菜单

预览 
<div rst-list><div rst-lbar>
  <search><form rst-search method="get" action="/posts">
  <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="11" cy="11" r="8"/><path d="m21 21-4.3-4.3"/></svg>
  <input type="search" name="q" value="release" placeholder="Search posts" aria-label="Search posts">
  <a rst-search-clear href="/posts?sort=newest" aria-label="清除搜索"><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="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a>
  <input type="hidden" name="sort" value="newest">
  <button class="rst-sr-only" type="submit">搜索</button>
</form></search>
  <details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Filter by status: Paid">Paid <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="m6 9 6 6 6-6"/></svg></summary>
  <div rst-dropdown-menu>
    <a href="/posts">All</a>
    <a href="/posts?status=paid" aria-current="true">Paid <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="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?status=free">Free</a>
  </div>
</details>
</div></div>

list-search-submit

搜索表单真正的提交按钮：视觉上隐藏，但在 Tab 顺序里，一旦获得键盘焦点就现身。

默认标签

预览 
<section rst-box><button class="rst-sr-only" type="submit">搜索</button></section>

在你用 Tab 键进入之前，这里什么都看不到。

list-row-action

一条列表行：记录名称作为主链接、一行附加信息，以及一个次要操作。

前导标记、状态和一个操作

预览 
<div rst-list><div rst-row>
  <span rst-row-lead data-lead="accent" aria-hidden="true">RN</span>
  <span rst-row-main><a href="/posts/1">Release notes, August</a><small rst-row-sub>Published 2 August · 4 min read</small></span>
  <span rst-status rst-tone="positive">Published</span>
  <a rst-row-action href="/posts/1/edit" aria-label="Edit Release notes, August">Edit</a>
</div></div>

只有名称和辅助信息行

预览 
<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。

两个分区

预览 
<nav rst-seg-tabs aria-label="Post sections"><a href="?tab=basics" aria-current="page">Basics</a><a href="?tab=advanced">Advanced</a></nav>

dropdown

一个零 JavaScript 的折叠块：一个 summary 按钮，下面是一板普通链接。

已应用一项选择的筛选菜单

预览 
<details rst-dropdown name="rst-menus">
  <summary rst-btn aria-label="Sort posts: newest first">Newest <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="m6 9 6 6 6-6"/></svg></summary>
  <div rst-dropdown-menu>
    <a href="/posts?sort=newest" aria-current="true">Newest <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="M20 6 9 17l-5-5"/></svg></a>
    <a href="/posts?sort=oldest">Oldest</a>
    <a href="/posts?sort=title">By title</a>
  </div>
</details>

bulk-bar

选择模式下的顶部条，取代列表工具栏：计数、一个扩大选择的链接，以及操作菜单。

选中了三行

预览 
<div rst-list><div rst-bulkbar><a rst-bulkbar-close href="/posts" aria-label="完成选择"><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="M18 6 6 18"/><path d="m6 6 12 12"/></svg></a><span rst-bulkbar-count>3 selected</span><a rst-bulkbar-escalate href="/posts?select=all">Select all 412 matching</a><details rst-dropdown name="rst-menus"><summary>Actions<span rst-caret 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="m6 9 6 6 6-6"/></svg></span></summary><div rst-dropdown-menu><button type="submit" name="action" value="export">Export</button><button type="submit" name="action" value="unpublish">Unpublish</button><button type="submit" name="action" value="delete" class="rst-danger">Delete…</button></div></details></div></div>

破坏性的那一项放在最后：第一项才是外层表单按 Enter 时的隐含默认。

pagination

一排带编号的普通链接，所以关掉 JavaScript 也照样能翻页。

长列表的中间

预览 
<nav rst-pagination aria-label="Posts pages"><a href="/posts?page=3">Previous</a><a href="/posts?page=1">1</a><span rst-pagination-gap aria-hidden="true">…</span><a href="/posts?page=3">3</a><span aria-current="page">4</span><a href="/posts?page=5">5</a><span rst-pagination-gap aria-hidden="true">…</span><a href="/posts?page=9">9</a><a href="/posts?page=5">Next</a>
</nav>

第一页，使用默认的可访问名称

预览 
<nav rst-pagination aria-label="分页"><span rst-pagination-disabled>Previous</span><span aria-current="page">1</span><a href="/posts?page=2">2</a><a href="/posts?page=2">Next</a>
</nav>

没有 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>