Result 结果
Result 告诉用户一件事的结局:表单提交成功了、任务跑完了、页面找不到了,或者没有权限查看。图标和标题说明结果,描述解释原因,底部给出下一步可以做什么。
演示
基础用法
一个状态、一个标题、一段描述。
状态
info、success、warning 和 error 显示对应颜色的符号。Elegant 下是带柔和光晕的圆形,Brutal 下是墨线描边的方块。
HTTP 状态码
404、403、500 和 418 直接用大号数字显示状态码。404 用信息色(没出错,只是页面不在这里),403 用警告色,500 用错误色,418 用俏皮一点的强调色。
尺寸
size 会同时调整图标、标题和正文的大小。
内容和操作
children 放在描述下面,footer 放在最底部,一般是几个按钮。
自定义图标
icon 会替换掉状态图标。它通过 currentColor 拿到状态色,字号就是图标尺寸,所以宽高设为 1em 的 SVG 正好铺满。
属性
| 名称 | 类型 | 默认值 | 说明 | 版本 |
|---|---|---|---|---|
status | info | success | warning | error | 404 | 403 | 500 | 418 | info | 决定图标和颜色。HTTP 状态码显示为数字。 | 未发布 |
title | ReactNode | undefined | 标题。 | 未发布 |
description | ReactNode | undefined | 标题下方的说明文字。 | 未发布 |
size | small | medium | large | huge | medium | 图标和文字的尺寸。 | 未发布 |
icon | ReactNode | undefined | 替换状态图标。颜色跟随状态,1em 等于图标尺寸。 | 未发布 |
footer | ReactNode | undefined | 底部的操作区,居中排成一行,放不下时换行。 | 未发布 |
children | ReactNode | undefined | 描述和底部之间的额外内容。 | 未发布 |
Result 也接受原生 div 属性和 ref。图标对读屏软件是隐藏的,所以要让标题把发生了什么说清楚。如果结果是在用户操作之后出现的(比如提交表单),加上 role="status"(失败时用 role="alert"),读屏软件才会播报。