mirror of
https://github.com/zhigang1992/react.git
synced 2026-02-10 22:45:11 +08:00
133 lines
4.6 KiB
Plaintext
133 lines
4.6 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Card, Fieldset, Button, Text } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'fieldset',
|
|
description: 'tenotext',
|
|
}
|
|
|
|
## Fieldset
|
|
|
|
Display a collection of related information in a single unit.
|
|
|
|
<Playground
|
|
title="Basic"
|
|
scope={{ Fieldset, Button }}
|
|
code={`
|
|
<Fieldset>
|
|
<Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
|
|
<Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
|
|
<Fieldset.Footer>
|
|
<Fieldset.Footer.Status>
|
|
The Evil Rabbit Jumped over the Fence
|
|
</Fieldset.Footer.Status>
|
|
<Fieldset.Footer.Actions>
|
|
<Button auto size="mini">Actions</Button>
|
|
</Fieldset.Footer.Actions>
|
|
</Fieldset.Footer>
|
|
</Fieldset>
|
|
`} />
|
|
|
|
<Playground
|
|
title="Custom Text"
|
|
scope={{ Fieldset, Button, Text }}
|
|
code={`
|
|
<Fieldset>
|
|
<Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
|
|
<Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
|
|
<Fieldset.Footer>
|
|
<Fieldset.Footer.Status>
|
|
<Text type="error">An error has occurred.</Text>
|
|
</Fieldset.Footer.Status>
|
|
<Fieldset.Footer.Actions>
|
|
<Button auto size="mini" type="error">Revert</Button>
|
|
</Fieldset.Footer.Actions>
|
|
</Fieldset.Footer>
|
|
</Fieldset>
|
|
`} />
|
|
|
|
<Playground
|
|
title="Basic"
|
|
scope={{ Fieldset, Button }}
|
|
code={`
|
|
() => {
|
|
const handler = v => console.log(v)
|
|
return (
|
|
<Fieldset.Group value="two" onChange={handler}>
|
|
<Fieldset label="one">
|
|
<Fieldset.Title>The Evil Rabbit Jumped over the Fence</Fieldset.Title>
|
|
<Fieldset.Subtitle>The Evil Rabbit Jumped over the Fence</Fieldset.Subtitle>
|
|
<Fieldset.Footer>
|
|
<Fieldset.Footer.Status>The Evil Rabbit Jumped over the Fence</Fieldset.Footer.Status>
|
|
<Fieldset.Footer.Actions>
|
|
<Button auto size="mini">Actions</Button>
|
|
</Fieldset.Footer.Actions>
|
|
</Fieldset.Footer>
|
|
</Fieldset>
|
|
<Fieldset label="two">
|
|
<Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
|
|
<Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
|
|
<Fieldset.Footer>
|
|
<Fieldset.Footer.Status>The Fence Jumped over The Evil Rabbit</Fieldset.Footer.Status>
|
|
<Fieldset.Footer.Actions>
|
|
<Button auto size="mini">Actions</Button>
|
|
</Fieldset.Footer.Actions>
|
|
</Fieldset.Footer>
|
|
</Fieldset>
|
|
<Fieldset label="three">
|
|
<Fieldset.Title>The Fence Jumped over The Evil Rabbit</Fieldset.Title>
|
|
<Fieldset.Subtitle>The Fence Jumped over The Evil Rabbit</Fieldset.Subtitle>
|
|
<Fieldset.Footer>
|
|
<Fieldset.Footer.Status>The Fence Jumped over The Evil Rabbit</Fieldset.Footer.Status>
|
|
<Fieldset.Footer.Actions>
|
|
<Button auto size="mini">Actions</Button>
|
|
</Fieldset.Footer.Actions>
|
|
</Fieldset.Footer>
|
|
</Fieldset>
|
|
</Fieldset.Group>
|
|
)
|
|
}
|
|
`} />
|
|
|
|
<Attributes>
|
|
<Attributes.Title>Fieldset.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **value** | unique ident value (only in group) | `string` | - | - |
|
|
| **label** | group tab text (only in group) | `string` |- | - |
|
|
| **title** | title of fieldset | `ReactNode` / `string` | - | - |
|
|
| **subtitle** | subtitle of fieldset | `ReactNode` / `string` | - | - |
|
|
| **disabled** | disable fieldset | `boolean` | - | `false` |
|
|
| ... | native props | `FieldsetHTMLAttributes` | `'name', 'className', ...` | - |
|
|
|
|
<Attributes.Title>Fieldset.Footer.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| ... | native props | `HTMLAttributes` | - | - |
|
|
|
|
<Attributes.Title>Fieldset.Footer.Actions.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| ... | native props | `HTMLAttributes` | - | - |
|
|
|
|
<Attributes.Title>Fieldset.Footer.Status.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| ... | native props | `HTMLAttributes` | - | - |
|
|
|
|
<Attributes.Title>Fieldset.Group.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default
|
|
| ---------- | ---------- | ---- | -------------- | ------ |
|
|
| **value** | selected tab value | `string` | - | - |
|
|
| **onChange** | change tab event | `(value: string) => void` | - | - |
|
|
| ... | native props | `HTMLAttributes` | - | - |
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|