mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
107 lines
2.0 KiB
Markdown
107 lines
2.0 KiB
Markdown
# 内置组件
|
|
|
|
## Badge <Badge text="badge" />
|
|
|
|
- Props:
|
|
- type
|
|
- 类型： `'tip' | 'warning' | 'danger'`
|
|
- 默认值： `'tip'`
|
|
- text
|
|
- 类型： `string`
|
|
- 默认值： `''`
|
|
- vertical
|
|
- 类型： `'top' | 'middle' | 'bottom' | undefined`
|
|
- 默认值： `undefined`
|
|
|
|
- 示例：
|
|
|
|
**输入**
|
|
|
|
```md
|
|
- VuePress - <Badge type="tip" text="v2" vertical="top" />
|
|
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
|
|
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
|
|
```
|
|
|
|
**输出**
|
|
|
|
- VuePress - <Badge type="tip" text="v2" vertical="top" />
|
|
- VuePress - <Badge type="warning" text="v2" vertical="middle" />
|
|
- VuePress - <Badge type="danger" text="v2" vertical="bottom" />
|
|
|
|
## CodeGroup
|
|
|
|
- 详情：
|
|
|
|
[CodeGroupItem](#codegroupitem) 组件的 Wrapper 。
|
|
|
|
## CodeGroupItem
|
|
|
|
- Props:
|
|
- title
|
|
- 类型： `string`
|
|
- 是否必需： `true`
|
|
- active
|
|
- 类型： `boolean`
|
|
- 默认值： `false`
|
|
|
|
- 详情：
|
|
|
|
该组件必须放置在 [CodeGroup](#codegroup) 组件的内部。
|
|
|
|
可以通过 `active` Prop 来设置初始激活的元素。如果不设置，默认激活第一个元素。
|
|
|
|
- 示例：
|
|
|
|
**输入**
|
|
|
|
````md
|
|
<CodeGroup>
|
|
<CodeGroupItem title="YARN">
|
|
|
|
```bash:no-line-numbers
|
|
yarn
|
|
```
|
|
|
|
</CodeGroupItem>
|
|
|
|
<CodeGroupItem title="NPM" active>
|
|
|
|
```bash:no-line-numbers
|
|
npm install
|
|
```
|
|
|
|
</CodeGroupItem>
|
|
</CodeGroup>
|
|
````
|
|
|
|
**输出**
|
|
|
|
<CodeGroup>
|
|
<CodeGroupItem title="YARN">
|
|
|
|
```bash:no-line-numbers
|
|
yarn
|
|
```
|
|
|
|
</CodeGroupItem>
|
|
|
|
<CodeGroupItem title="NPM" active>
|
|
|
|
```bash:no-line-numbers
|
|
npm install
|
|
```
|
|
|
|
</CodeGroupItem>
|
|
</CodeGroup>
|
|
|
|
::: warning
|
|
你必须在 `<CodeGroupItem>` 的开始标签和代码块之间添加一个空行，否则代码块无法被 Markdown 正确解析。
|
|
|
|
所有内容首先都必须是合法的 Markdown ，然后才是一个 Vue SFC 。
|
|
|
|
了解更多： [深入 > Markdown 与 Vue SFC](../../guide/advanced/markdown.md)
|
|
|
|
或者你可以选择使用 [自定义容器](./markdown.md#自定义容器) 。
|
|
:::
|