kylefang/react
1
0
Fork 0
mirror of https://github.com/zhigang1992/react.git synced 2026-04-24 04:15:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(card): add docs for card footer

Browse Source 
docs(card): fix missing external links
This commit is contained in:
unix
2020-04-22 09:03:10 +08:00
parent a1ea9197d1
commit e507334c20
2 changed files with 95 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
pages/en-us/components/card.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Card, Spacer, Row, Col } from 'components'
import { Card, Spacer, Row, Col, Link, Image, Text } from 'components'
export const meta = {
title: 'card',
@@ -10,7 +10,6 @@ export const meta = {
A common container component.
<Playground
title="Basic"
scope={{ Card }}
@@ -70,6 +69,43 @@ A common container component.
}
`} />
<Playground
title="With Footer"
scope={{ Card, Link, Spacer, Row }}
code={`
<Row style={{ flexWrap: 'wrap' }} justify="space-around">
<Card width="330px">
<h4>ZEIT UI React</h4>
<p>Modern and minimalist React UI library.</p>
<Card.Footer>
<Link pure color target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
<Card width="330px" type="dark">
<h4>ZEIT UI React</h4>
<p>Modern and minimalist React UI library.</p>
<Card.Footer>
<Link pure target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
</Row>
`} />
<Playground
title="With Image"
scope={{ Card, Link, Spacer, Text, Image }}
code={`
<Card width="400px">
<Image src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png"
height="200" width="400" style={{ objectFit: 'cover' }} />
<Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
<Text type="secondary" small>Modern and minimalist React UI library.</Text>
<Card.Footer>
<Link pure block target="_blank" href="https://github.com/zeit-ui/react">Visit source code on GitHub.</Link>
</Card.Footer>
</Card>
`} />
<Attributes edit="/pages/en-us/components/card.mdx">
<Attributes.Title>Card.Props</Attributes.Title>
@@ -78,7 +114,15 @@ A common container component.
| **hoverable** | add effect on hover | `boolean` | - | `false` |
| **shadow** | show shadow | `boolean` | - | `false` |
| **type** | card type | [CardType](#cardtype) | - | `default` |
| ... | native props | `HTMLAttributes` | `'className', ...` | - |
| **width** | CSS width value | `string` | - | `100%` |
| ... | native props | `HTMLAttributes` | `'id', className', ...` | - |
<Attributes.Title alias="Card.Actions">Card.Footer.Props</Attributes.Title>
| Attribute | Description | Type | Accepted values | Default
| ---------- | ---------- | ---- | -------------- | ------ |
| **disableAutoMargin** | cancel automatic margin value | `boolean` | - | `false` |
| ... | native props | `HTMLAttributes` | `'id', className', ...` | - |
<Attributes.Title>CardType</Attributes.Title>

50
pages/zh-cn/components/card.mdx
View File

@@ -1,5 +1,5 @@
import { Layout, Playground, Attributes } from 'lib/components'
import { Card, Row, Col } from 'components'
import { Card, Row, Col, Link, Spacer, Text, Image } from 'components'
export const meta = {
title: '卡片 Card',
@@ -72,6 +72,44 @@ export const meta = {
}
`} />
<Playground
title="卡片页脚"
scope={{ Card, Link, Spacer, Row }}
code={`
<Row style={{ flexWrap: 'wrap' }} justify="space-around">
<Card width="330px">
<h4>ZEIT UI React</h4>
<p>现代化、极简风格的 UI 库。</p>
<Card.Footer>
<Link pure color target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
<Card width="330px" type="dark">
<h4>ZEIT UI React</h4>
<p>现代化、极简风格的 UI 库。</p>
<Card.Footer>
<Link pure target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
</Row>
`} />
<Playground
title="组合图片"
scope={{ Card, Link, Spacer, Text, Image }}
code={`
<Card width="400px">
<Image src="https://user-images.githubusercontent.com/11304944/76085431-fd036480-5fec-11ea-8412-9e581425344a.png"
height="200" width="400" style={{ objectFit: 'cover' }} />
<Text h4 style={{ marginBottom: '0' }}>ZEIT UI React</Text>
<Text type="secondary" small>现代化、极简风格的 UI 库。</Text>
<Card.Footer>
<Link pure block target="_blank" href="https://github.com/zeit-ui/react">在 GitHub 上查看源码</Link>
</Card.Footer>
</Card>
`} />
<Attributes edit="/pages/zh-cn/components/card.mdx">
<Attributes.Title>Card.Props</Attributes.Title>
@@ -80,7 +118,15 @@ export const meta = {
| **hoverable** | 是否在悬停时增加阴影 | `boolean` | - | `false` |
| **shadow** | 是否总是显示阴影 | `boolean` | - | `false` |
| **type** | 卡片的类型 | [CardType](#cardtype) | - | `default` |
| ... | 原生属性 | `HTMLAttributes` | `'className', ...` | - |
| **width** | CSS 宽度属性 | `string` | - | `100%` |
| ... | 原生属性 | `HTMLAttributes` | `'id', className', ...` | - |
<Attributes.Title alias="Card.Actions">Card.Footer.Props</Attributes.Title>
| 属性 | 描述 | 类型 | 推荐值 | 默认
| ---------- | ---------- | ---- | -------------- | ------ |
| **disableAutoMargin** | 取消自动设置的 Margin 值 | `boolean` | - | `false` |
| ... | 原生属性 | `HTMLAttributes` | `'id', className', ...` | - |
<Attributes.Title>CardType</Attributes.Title>