Skip to content

Commit e80cb13

Browse files
meteorlxymeteorlxy
committed
docs: add default theme built-in components reference
1 parent 27abb26 commit e80cb13

File tree

2 files changed

+204
-2
lines changed

2 files changed

+204
-2
lines changed

‎docs/reference/default-theme/components.md

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,104 @@
11
# Built-in Components
22

3-
> TODO
3+
## Badge <Badge text="badge" />
4+
5+
- Props:
6+
- type
7+
- Type: `'tip' | 'warning' | 'danger'`
8+
- Default: `'tip'`
9+
- text
10+
- Type: `string`
11+
- Default: `''`
12+
- vertical
13+
- Type: `'top' | 'middle' | 'bottom' | undefined`
14+
- Default: `undefined`
15+
16+
- Example:
17+
18+
**Input**
19+
20+
```md
21+
- VuePress - <Badge type="tip" text="v2" vertical="top" />
22+
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
23+
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
24+
```
25+
26+
**Output**
27+
28+
- VuePress - <Badge type="tip" text="v2" vertical="top" />
29+
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
30+
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
31+
32+
## CodeGroup
33+
34+
- Details:
35+
36+
Wrapper of the [CodeGroupItem](#codegroupitem) components.
37+
38+
## CodeGroupItem
39+
40+
- Props:
41+
- title
42+
- Type: `string`
43+
- Required: `true`
44+
- active
45+
- Type: `boolean`
46+
- Default: `false`
47+
48+
- Details:
49+
50+
This component must be placed inside a [CodeGroup](#codegroup) component.
51+
52+
Use the `active` prop to set the initial active item, or the first item will be activated by default.
53+
54+
- Example:
55+
56+
**Input**
57+
58+
````md
59+
<CodeGroup>
60+
<CodeGroupItem title="YARN">
61+
62+
```bash:no-line-numbers
63+
yarn
64+
```
65+
66+
</CodeGroupItem>
67+
68+
<CodeGroupItem title="NPM" active>
69+
70+
```bash:no-line-numbers
71+
npm install
72+
```
73+
74+
</CodeGroupItem>
75+
</CodeGroup>
76+
````
77+
78+
**Output**
79+
80+
<CodeGroup>
81+
<CodeGroupItem title="YARN">
82+
83+
```bash:no-line-numbers
84+
yarn
85+
```
86+
87+
</CodeGroupItem>
88+
89+
<CodeGroupItem title="NPM" active>
90+
91+
```bash:no-line-numbers
92+
npm install
93+
```
94+
95+
</CodeGroupItem>
96+
</CodeGroup>
97+
98+
:::warning
99+
You must add an empty line between the starting tag of `<CodeGroupItem>` and the code fence, otherwise the code fence will not be parsed correctly by Markdown.
100+
101+
All content must be valid Markdown first, and then a Vue SFC.
102+
103+
Learn more: [Advanced > Markdown and Vue SFC](../../guide/advanced/markdown.md)
104+
:::

‎docs/zh/reference/default-theme/components.md

Lines changed: 102 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,104 @@
11
# 内置组件
22

3-
> TODO
3+
## Badge <Badge text="badge" />
4+
5+
- Props:
6+
- type
7+
- 类型： `'tip' | 'warning' | 'danger'`
8+
- 默认值： `'tip'`
9+
- text
10+
- 类型： `string`
11+
- 默认值： `''`
12+
- vertical
13+
- 类型： `'top' | 'middle' | 'bottom' | undefined`
14+
- 默认值： `undefined`
15+
16+
- 示例：
17+
18+
**输入**
19+
20+
```md
21+
- VuePress - <Badge type="tip" text="v2" vertical="top" />
22+
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
23+
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
24+
```
25+
26+
**输出**
27+
28+
- VuePress - <Badge type="tip" text="v2" vertical="top" />
29+
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
30+
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
31+
32+
## CodeGroup
33+
34+
- 详情：
35+
36+
[CodeGroupItem](#codegroupitem) 组件的 Wrapper 。
37+
38+
## CodeGroupItem
39+
40+
- Props:
41+
- title
42+
- 类型： `string`
43+
- 是否必需： `true`
44+
- active
45+
- 类型： `boolean`
46+
- 默认值： `false`
47+
48+
- 详情：
49+
50+
该组件必须放置在 [CodeGroup](#codegroup) 组件的内部。
51+
52+
可以通过 `active` Prop 来设置初始激活的元素。如果不设置，默认激活第一个元素。
53+
54+
- 示例：
55+
56+
**输入**
57+
58+
````md
59+
<CodeGroup>
60+
<CodeGroupItem title="YARN">
61+
62+
```bash:no-line-numbers
63+
yarn
64+
```
65+
66+
</CodeGroupItem>
67+
68+
<CodeGroupItem title="NPM" active>
69+
70+
```bash:no-line-numbers
71+
npm install
72+
```
73+
74+
</CodeGroupItem>
75+
</CodeGroup>
76+
````
77+
78+
**输出**
79+
80+
<CodeGroup>
81+
<CodeGroupItem title="YARN">
82+
83+
```bash:no-line-numbers
84+
yarn
85+
```
86+
87+
</CodeGroupItem>
88+
89+
<CodeGroupItem title="NPM" active>
90+
91+
```bash:no-line-numbers
92+
npm install
93+
```
94+
95+
</CodeGroupItem>
96+
</CodeGroup>
97+
98+
:::warning
99+
你必须在 `<CodeGroupItem>` 的开始标签和代码块之间添加一个空行，否则代码块无法被 Markdown 正确解析。
100+
101+
所有内容首先都必须是合法的 Markdown ，然后才是一个 Vue SFC 。
102+
103+
了解更多： [深入 > Markdown 与 Vue SFC](../../guide/advanced/markdown.md)
104+
:::

0 commit comments

Comments
 (0)