mirror of
https://github.com/zhigang1992/react.git
synced 2026-05-30 00:30:43 +08:00
dacd95987f
* docs: export individual style types for each component * docs: improve the copywriting content of the document * docs: optimize the document site experience on mobile devices
98 lines
2.5 KiB
Plaintext
98 lines
2.5 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Note } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'Note',
|
|
group: 'Feedback',
|
|
}
|
|
|
|
## Note
|
|
|
|
Display text that requires attention or provides additional information.
|
|
|
|
<Playground
|
|
desc="Show a piece of text or components."
|
|
scope={{ Note }}
|
|
code={`
|
|
<Note>This note details something important.</Note>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="secondary"
|
|
scope={{ Note }}
|
|
code={`
|
|
<Note type="secondary">This note details something important.</Note>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="status"
|
|
scope={{ Note }}
|
|
code={`
|
|
<>
|
|
<Note type="success">This note details something important.</Note>
|
|
<br/>
|
|
<Note type="warning">This note details something important.</Note>
|
|
<br/>
|
|
<Note type="error">This note details something important.</Note>
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="hidden label"
|
|
scope={{ Note }}
|
|
code={`
|
|
<Note label={false}>Just a quick note!</Note>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="custom label"
|
|
scope={{ Note }}
|
|
code={`
|
|
<Note label="custom">This note uses a custom label.</Note>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Filled Variant"
|
|
scope={{ Note }}
|
|
code={`
|
|
<>
|
|
<Note label="custom" filled>This note uses a custom label.</Note>
|
|
<br/>
|
|
<Note label={false} filled>Just a quick note!</Note>
|
|
<br/>
|
|
<Note type="success" label="success" filled>This note details a success.</Note>
|
|
<br/>
|
|
<Note type="warning" label="warning" filled>This note details a warning.</Note>
|
|
<br/>
|
|
<Note type="error" label="error" filled>This note details an error.</Note>
|
|
<br/>
|
|
<Note type="secondary" filled>This note details something important.</Note>
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Attributes edit="/pages/en-us/components/note.mdx">
|
|
<Attributes.Title>Note.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default |
|
|
| ---------- | ------------------------- | -------------------- | ------------------------ | --------- |
|
|
| **type** | note type | `NoteTypes` | [NoteTypes](#nodetypes) | `default` |
|
|
| **label** | show label or custom text | `boolean` / `string` | - | - |
|
|
| **filled** | fill color | `boolean` | - | `false` |
|
|
| ... | native props | `HTMLAttributes` | `'id', 'className', ...` | - |
|
|
|
|
<Attributes.Title>NoteTypes</Attributes.Title>
|
|
|
|
```ts
|
|
type NoteTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|