Snippet
Display a snippet of copyable code for the command line.
General
Basic Usage
yarn add @bolio-ui/core
Width
Specify width manually.
yarn add @bolio-ui/core
Types
Show different states with colors.
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
Rounded
You can completely round the corners of any type of Snippet with the rounded property.
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
Multi Line
You can use multi line of the Snippet with the array in text prop.
cd project
now
Without Copy
Hide icon for copy. (disable copy)
yarn add @bolio-ui/core
Custom Symbol
You can custom symbol of the Snippet with the property symbol.
yarn add @bolio-ui/core
Custom Toast
You can custom toast of the Snippet with the property toastText and toastType.
yarn add @bolio-ui/core
Filled
Show different states filled with colors.
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
yarn add @bolio-ui/core
APIs
Snippet.Props
| Attribute | Description | Type | Accepted values | Default |
|---|---|---|---|---|
| text | code snippet | string string[] | - | - |
| type | snippet types | SnippetTypes | SnippetTypes | default |
| filled | filled style | boolean | - | false |
| width | set CSS string | string | - | initial |
| copy | function of copy button | CopyTypes | CopyTypes | default |
| symbol | symbol snippet | string | - | $ |
| toastText | toast text | string | - | Copied to clipboard! |
| toastType | toast type | ToastTypes | ToastTypes | success |
| ... | native props | HTMLAttributes | 'id', 'name', 'className', ... | - |
SnippetTypes
type SnippetTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
CopyTypes
type CopyTypes = 'default' | 'silent' | 'prevent'
ToastTypes
type ToastTypes =
| 'default'
| 'primary'
| 'secondary'
| 'success'
| 'warning'
| 'error'
| 'info'
Previous
Slider
Next
Spacer
MADE & DESIGNED WITHBY BRUNO ANDRADE
