mirror of
https://github.com/zhigang1992/react.git
synced 2026-04-29 12:45:32 +08:00
130 lines
4.1 KiB
Plaintext
130 lines
4.1 KiB
Plaintext
import { Layout, Playground, Attributes } from 'lib/components'
|
|
import { Snippet, Spacer, Code } from 'components'
|
|
|
|
export const meta = {
|
|
title: 'Snippet',
|
|
group: 'Others',
|
|
}
|
|
|
|
## Snippet
|
|
|
|
Display a snippet of copyable code for the command line.
|
|
|
|
<Playground
|
|
desc="Basic usage."
|
|
scope={{ Snippet }}
|
|
code={`
|
|
<Snippet text="yarn add @zeit-ui/react" width="300px" />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="width"
|
|
desc="Specify width manually."
|
|
scope={{ Snippet }}
|
|
code={`
|
|
<Snippet text="yarn add @zeit-ui/react" width="100%" />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="types"
|
|
desc="Show different states with colors."
|
|
scope={{ Snippet, Spacer }}
|
|
code={`
|
|
<>
|
|
<Snippet text="yarn add @zeit-ui/react" type="dark" width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="success" width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="warning" width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="error" width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="secondary" width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="lite" width="300px" />
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="Multi Line"
|
|
scope={{ Snippet }}
|
|
code={`
|
|
<Snippet text={['cd project', 'now']} width="300px" />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="without copy"
|
|
desc="Hide icon for copy. (disable copy)"
|
|
scope={{ Snippet }}
|
|
code={`
|
|
<Snippet copy="prevent" text="yarn add @zeit-ui/react" width="300px" />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="custom symbol"
|
|
scope={{ Snippet }}
|
|
code={`
|
|
<Snippet symbol=">" text="yarn add @zeit-ui/react" width="300px" />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="custom toast"
|
|
scope={{ Snippet }}
|
|
code={`
|
|
<Snippet toastText="Code copied!" toastType="secondary" text="yarn add @zeit-ui/react" width="300px" />
|
|
`}
|
|
/>
|
|
|
|
<Playground
|
|
title="filled"
|
|
scope={{ Snippet, Spacer }}
|
|
code={`
|
|
<>
|
|
<Snippet text="yarn add @zeit-ui/react" type="success" filled width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="warning" filled width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="error" filled width="300px" />
|
|
<Spacer />
|
|
<Snippet text="yarn add @zeit-ui/react" type="secondary" filled width="300px" />
|
|
</>
|
|
`}
|
|
/>
|
|
|
|
<Attributes edit="/pages/en-us/components/snippet.mdx">
|
|
<Attributes.Title>Snippet.Props</Attributes.Title>
|
|
|
|
| Attribute | Description | Type | Accepted values | Default |
|
|
| ------------- | ----------------------- | ----------------------------- | -------------------------------- | ---------------------- |
|
|
| **text** | code snippet | `string` `Array<string>` | - | - |
|
|
| **type** | snippet types | [SnippetTypes](#snippettypes) | [SnippetTypes](#snippettypes) | `default` |
|
|
| **filled** | filled style | `boolean` | - | `false` |
|
|
| **width** | set CSS string | `string` | - | `initial` |
|
|
| **copy** | function of copy button | `CopyTypes` | `'default', 'slient', 'prevent'` | `default` |
|
|
| **symbol** | symbol snippet | `string` | - | `$` |
|
|
| **toastText** | toast text | `string` | - | `Copied to clipboard!` |
|
|
| **toastType** | toast type | `NormalTypes` | [NormalTypes](#normaltypes) | `success` |
|
|
| ... | native props | `HTMLAttributes` | `'id', 'name', 'className', ...` | - |
|
|
|
|
<Attributes.Title>SnippetTypes</Attributes.Title>
|
|
|
|
```ts
|
|
type SnippetTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error' | 'dark' | 'lite'
|
|
```
|
|
|
|
<Attributes.Title>NormalTypes</Attributes.Title>
|
|
|
|
```ts
|
|
type NormalTypes = 'default' | 'secondary' | 'success' | 'warning' | 'error'
|
|
```
|
|
|
|
</Attributes>
|
|
|
|
export default ({ children }) => <Layout meta={meta}>{children}</Layout>
|