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

rastrillo 设计系统

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

页面示例

这里的页面是供你复制的示例,不是组件。

登录

只展示一个主要的登录方式,其余放在下面。不要把注册和登录分开——一个两者都能用的按钮,要解释的更少,出错的也更少。

链接寄出之后

把地址原样显示回去。这是在苦等一封永远不会来的邮件之前,唯一能发现打错字的机会。

预览
<section rst-box>
  <h1>Check your email</h1>
  <p>We sent a link to <bdi>grace@example.com</bdi>.</p>
  <p><a href="/signin">Use a different address</a></p>
</section>

通行密钥

对已经有通行密钥的人来说这是最快的方式,什么都不用输。但也要提供第二种方式:人会弄丢设备,而一把用不了的通行密钥就是一道锁死的门。

预览
<section rst-box>
  <h1>Sign in</h1>
  <button rst-btn="primary" type="button">Use a passkey</button>
  <p><a href="/signin">Email me a link instead</a></p>
</section>

Google、Apple 等等

我们给你按钮,按各家公司的规定画好。我们不提供登录本身——那要你自己接到所用的服务商。

预览
<section rst-box>
  <h1>Sign in</h1>
  <form rst-form method="post" action="/auth/google"><button rst-btn type="submit">Continue with Google</button></form>
  <form rst-form method="post" action="/auth/apple"><button rst-btn type="submit">Continue with Apple</button></form>
  <p><a href="/signin">Email me a link instead</a></p>
</section>

邮箱和密码

如果你确实要用密码,沿用同样的“一个主入口”布局,并把重设密码的入口直接放在按钮下面,而不是藏起来。

我们不建议使用密码

人们会重复使用密码,密码会泄露,而妥善保存它们的责任落到你头上。请改用邮件里的链接加通行密钥,或只用通行密钥,或让人用已有的账号登录。下面这个页面之所以在这里,是因为有些产品仍然需要它,不是因为它是个好的默认选项。

预览
<section rst-box>
  <h1>Sign in</h1>
  <form rst-form method="post" action="/signin">
    <div rst-field>
      <label rst-field-label for="pw-email">Email</label>
      <input rst-input id="pw-email" name="email" type="email" autocomplete="email" required>
    </div>
    <div rst-field>
      <label rst-field-label for="pw-pass">Password</label>
      <input rst-input id="pw-pass" name="password" type="password" autocomplete="current-password" required>
    </div>
    <button rst-btn="primary" type="submit">Continue</button>
    <p><a href="/signin/reset">Forgotten your password?</a></p>
  </form>
</section>