Skip to content
This repository was archived by the owner on Sep 20, 2024. It is now read-only.

Commit 61af11f

Browse files
tianxiacstianxiacs
authored
Add files via upload
1 parent 5683d3a commit 61af11f

File tree

2 files changed

+167
-2
lines changed

2 files changed

+167
-2
lines changed

‎packages/chakra-ui-docs/pages/zh/accessibility.mdx

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,9 @@
1-
# 可访问性
1+
# 辅助功能
22

3-
自Chakra UI创始，可访问性即为研发核心。通过我们的工作来让您专注于研发您的应用项目。
3+
自Chakra UI创始，可访问性即为研发核心。通过我们的前期工作来让您专注于研发您的应用项目。
4+
5+
所有著作都符合WAI-ARIA标准。
6+
7+
我们已撰写@chakra-ui/vue内部各组件的辅助功能的描述。我们称这个文件为辅助功能报告。在各部分的目录内可找到相应的accessibility.md文件。
8+
9+
您也可以在文档页面内找到相应的辅助功能。

‎packages/chakra-ui-docs/pages/zh/alert.mdx

Lines changed: 159 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,159 @@
1+
import SEO from '../components/SEO'
2+
3+
<SEO
4+
title="Alert"
5+
description="Alerts are used to communicate a state that affects a system, feature or page."
6+
/>
7+
8+
# 警告
9+
10+
警告可以用于传达影响系统，功能或页面的情况。
11+
12+
请看CAlert的<a href="https://github.com/chakra-ui/chakra-ui-vue/blob/master/packages/chakra-ui-core/src/CAlert/accessibility.md">accessibility report</a>
13+
14+
## 导入
15+
16+
Chakra UI Vue导出四个相关组件。
17+
18+
- CAlert： 警告组件的封装器
19+
- CAlertIcon： 基于status属性而改变的警告可视标识
20+
- CAlertTitle： 屏幕阅读器宣读的警告标题
21+
- CAlertDescription： 屏幕阅读器宣读的警告描述
22+
23+
<br />
24+
25+
```js
26+
import {
27+
CAlert,
28+
CAlertIcon,
29+
CAlertTitle,
30+
CAlertDescription,
31+
} from "@chakra-ui/vue";
32+
```
33+
34+
## 使用
35+
36+
```vue live=true
37+
<c-alert status="error">
38+
<c-alert-icon />
39+
<c-alert-title :mr="2">Your browser is outdated!</c-alert-title>
40+
<c-alert-description>Your Chakra experience may be degraded.</c-alert-description>
41+
<c-close-button position="absolute" right="8px" top="8px" />
42+
</c-alert>
43+
```
44+
45+
46+
### 设定警告状态
47+
传输status属性可改变警告状态。
48+
此操作会影响CAlert的颜色搭配和标识。
49+
CAlert支持error, success, warning和info这些状态。
50+
51+
52+
<br />
53+
54+
```vue live=true
55+
<c-stack>
56+
<c-alert status="info">
57+
<c-alert-icon />
58+
Chakra is going live on April 15th. Get ready!
59+
</c-alert>
60+
<c-alert status="success">
61+
<c-alert-icon />
62+
Sage mode chakra successfully infused.
63+
</c-alert>
64+
<c-alert status="warning">
65+
<c-alert-icon />
66+
Using Amaterasu is irreversible. Proceed with caution.
67+
</c-alert>
68+
<c-alert status="error">
69+
<c-alert-icon />
70+
Unable to load Rasen-Shuriken. Please try again.
71+
</c-alert>
72+
</c-stack>
73+
```
74+
75+
### 自定义警告标识
76+
您可以通过此方法使用自定义警告标识：在CAlertIcon的name属性里传输标识的名字 <nuxt-link to="/icons">Click here</nuxt-link>来查看如何在您的Chakra应用里添加标识。
77+
78+
```vue live=true
79+
<c-alert>
80+
<c-alert-icon name="github" />
81+
<c-alert-title :mr="2">Kakashi Sensei followed you.</c-alert-title>
82+
<c-alert-description>Follow Kakashi to see his Kamui in action.</c-alert-description>
83+
<c-close-button position="absolute" right="8px" top="8px" />
84+
</c-alert>
85+
```
86+
87+
88+
### 变化
89+
90+
CAlert有四个组件可用。
91+
传输variant属性来使用subtle, solid, left-accent或top-accent其一。
92+
93+
```vue live=true
94+
<c-stack>
95+
<c-alert status="success" variant="subtle">
96+
<c-alert-icon />
97+
Data uploaded to the server. Fire on!
98+
</c-alert>
99+
<c-alert status="success" variant="solid">
100+
<c-alert-icon />
101+
Data uploaded to the server. Fire on!
102+
</c-alert>
103+
<c-alert status="success" variant="left-accent">
104+
<c-alert-icon />
105+
Data uploaded to the server. Fire on!
106+
</c-alert>
107+
<c-alert status="success" variant="top-accent">
108+
<c-alert-icon />
109+
Data uploaded to the server. Fire on!
110+
</c-alert>
111+
</c-stack>
112+
```
113+
114+
### 构成
115+
116+
CAlert和其他较小的组件能实现灵活性且使各种布局的创建变得简单。
117+
以下为自定义警告的风格和布局。
118+
119+
```vue live=true
120+
<c-alert
121+
status="success"
122+
variant="subtle"
123+
flexDirection="column"
124+
justifyContent="center"
125+
textAlign="center"
126+
height="200px"
127+
>
128+
<c-alert-icon size="40px" :mr="0" />
129+
<c-alert-title :mt="4" :mb="1" fontSize="lg">
130+
Application submitted!
131+
</c-alert-title>
132+
<c-alert-description maxWidth="sm">
133+
Thanks for submitting your application. Our team will get back to you soon.
134+
</c-alert-description>
135+
</c-alert>
136+
```
137+
138+
## 属性
139+
140+
### CAlert属性
141+
142+
CAlert是一个警告组件的封装器。它封装CFlex组件。
143+
144+
| 名称 | 类型 | 默认 | 描述 |
145+
|---------|------------------------------------------------|----------|----------------------------------------|
146+
| 状态 | `error`, `success`, `warning`, `info` | `info` | The status of the alert |
147+
| 变化 | `subtle`, `solid`, `left-accent`, `top-accent` | `subtle` | The variant of the alert style to use. |
148+
149+
### CAlertIcon属性
150+
151+
CAlertIcon创建CIcon且根据status属性来改变标识。它还会通过传输过的name属性来改变标识。
152+
153+
### CAlertTitle属性
154+
155+
CAlertTitle创建CBox组件。所有的CBox属性都适用。
156+
157+
### CAlertDescription属性
158+
159+
CAlertDescription创建CBox组件。所有的CBox属性都适用。

0 commit comments

Comments
 (0)