mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-29 12:45:32 +08:00
feat(text): add blockquote
This commit is contained in:
unix
@@ -61,6 +61,38 @@ Display text using well-defined typographic styles.
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Blockquote"
|
||||
scope={{ Text }}
|
||||
code={`
|
||||
<Text blockquote>
|
||||
Our mission is to make cloud computing accessible to everyone.
|
||||
</Text>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Types"
|
||||
scope={{ Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text type="success">
|
||||
Our mission is to make cloud computing accessible to everyone.
|
||||
</Text>
|
||||
<Text type="warning">
|
||||
Our mission is to make cloud computing accessible to everyone.
|
||||
</Text>
|
||||
<Text type="secondary">
|
||||
Our mission is to make cloud computing accessible to everyone.
|
||||
</Text>
|
||||
<Text type="error">
|
||||
Our mission is to make cloud computing accessible to everyone.
|
||||
</Text>
|
||||
<Text style={{ color: '#ccc' }}>
|
||||
Our mission is to make cloud computing accessible to everyone.
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="Compose"
|
||||
desc="Effect of multiple `Text` stacks"
|
||||
@@ -91,9 +123,20 @@ Display text using well-defined typographic styles.
|
||||
| **i** | component name | `boolean` | - | `false` |
|
||||
| **em** | component name | `boolean` | - | `false` |
|
||||
| **b** | component name | `boolean` | - | `false` |
|
||||
| **type** | text type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
|
||||
| **blockquote** | component name | `boolean` | - | `false` |
|
||||
| **type** | text type | `NormalTypes` | [TextTypes](#texttypes) | `default` |
|
||||
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>TextTypes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type TextTypes = 'default'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|
||||
|
||||
@@ -14,19 +14,14 @@ export const meta = {
|
||||
title="标题"
|
||||
scope={{ Text }}
|
||||
code={`
|
||||
() => {
|
||||
const text = 'JavaScript 是一门编程语言。'
|
||||
return (
|
||||
<>
|
||||
<Text h1>{text}</Text>
|
||||
<Text h2>{text}</Text>
|
||||
<Text h3>{text}</Text>
|
||||
<Text h4>{text}</Text>
|
||||
<Text h5>{text}</Text>
|
||||
<Text h6>{text}</Text>
|
||||
</>
|
||||
)
|
||||
}
|
||||
<>
|
||||
<Text h1>JavaScript 是一门编程语言。</Text>
|
||||
<Text h2>JavaScript 是一门编程语言。</Text>
|
||||
<Text h3>JavaScript 是一门编程语言。</Text>
|
||||
<Text h4>JavaScript 是一门编程语言。</Text>
|
||||
<Text h5>JavaScript 是一门编程语言。</Text>
|
||||
<Text h6>JavaScript 是一门编程语言。</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
@@ -51,11 +46,44 @@ export const meta = {
|
||||
code={`
|
||||
<>
|
||||
<Text small>
|
||||
函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。
|
||||
函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。
|
||||
</Text>
|
||||
|
||||
<Text small i>
|
||||
函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。
|
||||
函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="引用"
|
||||
scope={{ Text }}
|
||||
code={`
|
||||
<Text blockquote>
|
||||
事件能为网页添加真实的交互能力。
|
||||
</Text>
|
||||
`} />
|
||||
|
||||
<Playground
|
||||
title="色彩"
|
||||
desc="以不同的色彩区分文字的状态。"
|
||||
scope={{ Text }}
|
||||
code={`
|
||||
<>
|
||||
<Text type="success">
|
||||
中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。
|
||||
</Text>
|
||||
<Text type="warning">
|
||||
中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。
|
||||
</Text>
|
||||
<Text type="secondary">
|
||||
中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。
|
||||
</Text>
|
||||
<Text type="error">
|
||||
中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。
|
||||
</Text>
|
||||
<Text style={{ color: '#ccc' }}>
|
||||
中间的代理服务器必须转发未经修改的端到端消息头，并且必须缓存它们。
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
@@ -67,12 +95,12 @@ export const meta = {
|
||||
code={`
|
||||
<>
|
||||
<Text p>
|
||||
函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。
|
||||
函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。
|
||||
</Text>
|
||||
|
||||
<Text>
|
||||
<Text small del>函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。</Text>
|
||||
<Text small>函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。</Text>
|
||||
<Text small del>函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。</Text>
|
||||
<Text small b>函数用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。</Text>
|
||||
</Text>
|
||||
</>
|
||||
`} />
|
||||
@@ -95,17 +123,28 @@ export const meta = {
|
||||
|
||||
| 属性 | 描述 | 类型 | 推荐值 | 默认
|
||||
| ---------- | ---------- | ---- | -------------- | ------ |
|
||||
| **p** | component name | `boolean` | - | `true` |
|
||||
| **h1 - h6** | component name | `boolean` | - | `false` |
|
||||
| **small** | component name | `boolean` | - | `false` |
|
||||
| **span** | component name | `boolean` | - | `false` |
|
||||
| **del** | component name | `boolean` | - | `false` |
|
||||
| **i** | component name | `boolean` | - | `false` |
|
||||
| **em** | component name | `boolean` | - | `false` |
|
||||
| **b** | component name | `boolean` | - | `false` |
|
||||
| **type** | text type | `NormalTypes` | `'default', 'secondary', 'success', 'warning', 'error'` | `default` |
|
||||
| **p** | 渲染的组件名 | `boolean` | - | `true` |
|
||||
| **h1 - h6** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **small** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **span** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **del** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **i** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **em** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **b** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **blockquote** | 渲染的组件名 | `boolean` | - | `false` |
|
||||
| **type** | 文字类型 | `NormalTypes` | [TextTypes](#texttypes) | `default` |
|
||||
| ... | 原生属性 | `HTMLAttributes` | `'id', 'className', ...` | - |
|
||||
|
||||
<Attributes.Title>TextTypes</Attributes.Title>
|
||||
|
||||
```ts
|
||||
type TextTypes = 'default'
|
||||
| 'secondary'
|
||||
| 'success'
|
||||
| 'warning'
|
||||
| 'error'
|
||||
```
|
||||
|
||||
</Attributes>
|
||||
|
||||
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|
||||
|
||||
Reference in New Issue
Block a user