mirror of
https://github.com/zhigang1992/react.git
synced 2026-05-30 17:33:57 +08:00
106 lines
4.5 KiB
Plaintext
106 lines
4.5 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Collapse, Spacer, Text } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'Collapse',
|
|
group: 'Surfaces',
|
|
}
|
|
|
|
## Collapse
|
|
|
|
Display large amounts of text in collapsible sections. Commonly referred to as an accordion.
|
|
|
|
<Playground
|
|
scope={{ Collapse, Text }}
|
|
desc="Show title only by default."
|
|
code={`
|
|
<Collapse.Group>
|
|
<Collapse title="Question A">
|
|
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</Collapse>
|
|
<Collapse title="Question B">
|
|
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</Collapse>
|
|
</Collapse.Group>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Expanded"
|
|
desc="Specify what to display first."
|
|
scope={{ Collapse, Text }}
|
|
code={`
|
|
<Collapse.Group>
|
|
<Collapse title="Question A" initialVisible>
|
|
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</Collapse>
|
|
<Collapse title="Question B">
|
|
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</Collapse>
|
|
</Collapse.Group>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Subtitle"
|
|
desc="Add text or components as subtitle."
|
|
scope={{ Collapse, Text }}
|
|
code={`
|
|
<Collapse.Group>
|
|
<Collapse title="Question A" subtitle="More description about Question A">
|
|
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</Collapse>
|
|
<Collapse title="Question B" subtitle={<>More description about <Text b>Question A</Text></>}>
|
|
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</Collapse>
|
|
</Collapse.Group>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Shadow"
|
|
desc="Highlight importance at a higher level."
|
|
scope={{ Collapse, Text }}
|
|
code={`
|
|
<Collapse shadow title="Question A" subtitle="More description about Question A">
|
|
<Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit,
|
|
sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</Text>
|
|
</Collapse>
|
|
`}
|
|
/>
|
|
|
|
<Attributes edit="/pages/en-us/components/collapse.mdx">
|
|
<Attributes.Title>Collapse.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default |
|
|
| ------------------- | ---------------- | ---------------- | -------------------------------- | ------- |
|
|
| **title**(required) | collapse title | `string` | - | - |
|
|
| **subtitle** | description | `string` | - | - |
|
|
| **initialVisible** | initial expanded | `boolean` | - | `false` |
|
|
| **shadow** | show shadow card | `boolean` | - | `false` |
|
|
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
|
|
|
|
<Attributes.Title>Collapse.Group.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default |
|
|
| ------------- | -------------- | ---------------- | -------------------------------- | ------- |
|
|
| **accordion** | accordion mode | `boolean` | - | `true` |
|
|
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|