mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-28 12:15:32 +08:00
5f9d42ffe7
Both examples have a heading that says "Vertical" even though the second one is clearly horizontal.
55 lines
1.3 KiB
Plaintext
55 lines
1.3 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Spacer, Container, Col } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'Spacer',
|
|
description: 'tenotext',
|
|
}
|
|
|
|
## Spacer
|
|
|
|
Provide empty space.
|
|
|
|
<Playground
|
|
title="Vertical"
|
|
scope={{ Spacer, Container }}
|
|
code={`
|
|
<>
|
|
<Container style={{ background: '#444' }}>
|
|
<Spacer y={1}/>
|
|
</Container>
|
|
<Spacer y={1}/>
|
|
<Container style={{ background: '#444' }}>
|
|
<Spacer y={2}/>
|
|
</Container>
|
|
<Spacer y={1}/>
|
|
<Container style={{ background: '#444' }}>
|
|
<Spacer y={3}/>
|
|
</Container>
|
|
</>
|
|
`} />
|
|
|
|
<Playground
|
|
title="Horizontal"
|
|
scope={{ Spacer, Container, Col }}
|
|
code={`
|
|
<Container>
|
|
<Col style={{ background: '#444' }} />
|
|
<Spacer x={5}/>
|
|
<Col style={{ background: '#444' }} />
|
|
</Container>
|
|
`} />
|
|
|
|
<Attributes edit="/pages/docs/components/spacer.mdx">
|
|
<Attributes.Title>Spacer.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **x** | x-axis spacing | `number` / `float` | - | 1 |
|
|
| **y** | y-axis spacing | `number` / `float` | - | 1 |
|
|
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|