mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 02:11:05 +00:00
docs(readme): add usage instructions
This commit is contained in:
parent
c7979a28af
commit
d03c56db0a
2 changed files with 29 additions and 120 deletions
1
.prettierignore
Normal file
1
.prettierignore
Normal file
|
@ -0,0 +1 @@
|
||||||
|
README.md
|
148
README.md
148
README.md
|
@ -1,131 +1,34 @@
|
||||||
# carbon-components-svelte
|
# carbon-components-svelte
|
||||||
|
|
||||||
> 🚧 UNDER CONSTRUCTION
|
[![NPM][npm]][npm-url]
|
||||||
|
[![Build][build]][build-badge]
|
||||||
|
|
||||||
> Svelte implementation of the Carbon Design System
|
> Svelte implementation of the [Carbon Design System](https://github.com/carbon-design-system)
|
||||||
|
|
||||||
Currently, this project is under active development. See the [ongoing project](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
|
**NOTE**: Currently, this project is under active development. See the [issue tracker](https://github.com/IBM/carbon-components-svelte/projects/1) for the anticipated v1.0.0 release.
|
||||||
|
|
||||||
## [Storybook](https://ibm.github.io/carbon-components-svelte)
|
## [Storybook](https://ibm.github.io/carbon-components-svelte) · [Svelte REPL](https://svelte.dev/repl/201b02d3a92440f99de9129e83a67871?version=3.16.7)
|
||||||
|
|
||||||
## Supported Components
|
## Getting Started
|
||||||
|
|
||||||
Currently, the following components are supported:
|
`carbon-components-svelte` can be installed as a development dependency.
|
||||||
|
|
||||||
- Accordion
|
```bash
|
||||||
- AccordionItem
|
yarn add -D carbon-components-svelte
|
||||||
- AccordionSkeleton
|
```
|
||||||
- Breadcrumb
|
|
||||||
- BreadcrumbItem
|
## Usage
|
||||||
- BreadcrumbSkeleton
|
|
||||||
- Button
|
```html
|
||||||
- ButtonSkeleton
|
<script>
|
||||||
- Checkbox
|
import { Button } from 'carbon-components-svelte';
|
||||||
- CheckboxSkeleton
|
</script>
|
||||||
- CodeSnippet
|
|
||||||
- CodeSnippetSkeleton
|
<Button>Primary</Button>
|
||||||
- ComboBox
|
<Button kind="secondary">Secondary</Button>
|
||||||
- ComposedModal
|
```
|
||||||
- ModalHeader
|
|
||||||
- ModalBody
|
Try it in the [Svelte REPL](https://svelte.dev/repl/201b02d3a92440f99de9129e83a67871?version=3.16.7).
|
||||||
- ModalFooter
|
|
||||||
- ContentSwitcher
|
|
||||||
- Switch
|
|
||||||
- Copy
|
|
||||||
- CopyButton
|
|
||||||
- DataTable
|
|
||||||
- DataTableSkeleton
|
|
||||||
- DatePicker
|
|
||||||
- DatePickerInput
|
|
||||||
- FileUploader
|
|
||||||
- FileUploaderButton
|
|
||||||
- FileUploaderItem
|
|
||||||
- FileUploaderDropContainer
|
|
||||||
- Filename
|
|
||||||
- Form
|
|
||||||
- FormGroup
|
|
||||||
- FormItem
|
|
||||||
- FormLabel
|
|
||||||
- Icon
|
|
||||||
- IconSkeleton
|
|
||||||
- InlineLoading
|
|
||||||
- Link
|
|
||||||
- ListBox
|
|
||||||
- ListBoxField
|
|
||||||
- ListBoxMenu
|
|
||||||
- ListBoxMenuIcon
|
|
||||||
- ListBoxMenuItem
|
|
||||||
- ListBoxSelection
|
|
||||||
- ListItem
|
|
||||||
- Loading
|
|
||||||
- MultiSelect
|
|
||||||
- Modal
|
|
||||||
- Notification
|
|
||||||
- ToastNotification
|
|
||||||
- InlineNotification
|
|
||||||
- NotificationActionButton
|
|
||||||
- NotificationButton
|
|
||||||
- NotificationIcon
|
|
||||||
- NotificationTextDetails
|
|
||||||
- NumberInput
|
|
||||||
- NumberInputSkeleton
|
|
||||||
- OrderedList
|
|
||||||
- OverflowMenu
|
|
||||||
- OverflowMenuItem
|
|
||||||
- Pagination
|
|
||||||
- PaginationSkeleton
|
|
||||||
- ProgressIndicator
|
|
||||||
- ProgressIndicatorSkeleton
|
|
||||||
- ProgressStep
|
|
||||||
- RadioButton
|
|
||||||
- RadioButtonSkeleton
|
|
||||||
- RadioButtonGroup
|
|
||||||
- Search
|
|
||||||
- SearchSkeleton
|
|
||||||
- Select
|
|
||||||
- SelectSkeleton
|
|
||||||
- SelectItem
|
|
||||||
- SelectItemGroup
|
|
||||||
- SkeletonPlaceholder
|
|
||||||
- SkeletonText
|
|
||||||
- Slider
|
|
||||||
- SliderSkeleton
|
|
||||||
- StructuredList
|
|
||||||
- StructuredListSkeleton
|
|
||||||
- StructuredListBody
|
|
||||||
- StructuredListHead
|
|
||||||
- StructuredListCell
|
|
||||||
- StructuredListRow
|
|
||||||
- StructuredListInput
|
|
||||||
- Tabs
|
|
||||||
- Tab
|
|
||||||
- TabContent
|
|
||||||
- TabsSkeleton
|
|
||||||
- Tag
|
|
||||||
- TagSkeleton
|
|
||||||
- TextArea
|
|
||||||
- TextAreaSkeleton
|
|
||||||
- TextInput
|
|
||||||
- TextInputSkeleton
|
|
||||||
- PasswordInput
|
|
||||||
- Tile
|
|
||||||
- ClickableTile
|
|
||||||
- SelectableTile
|
|
||||||
- ExpandableTile
|
|
||||||
- RadioTile
|
|
||||||
- Tile
|
|
||||||
- TileGroup
|
|
||||||
- RadioTile
|
|
||||||
- TimePicker
|
|
||||||
- TimePickerSelect
|
|
||||||
- Toggle
|
|
||||||
- ToggleSkeleton
|
|
||||||
- ToggleSmall
|
|
||||||
- ToggleSmallSkeleton
|
|
||||||
- Tooltip
|
|
||||||
- TooltipDefinition
|
|
||||||
- TooltipIcon
|
|
||||||
- UnorderedList
|
|
||||||
|
|
||||||
## Contributing
|
## Contributing
|
||||||
|
|
||||||
|
@ -136,3 +39,8 @@ Refer to the [Contributing guidelines](CONTRIBUTING.md).
|
||||||
## License
|
## License
|
||||||
|
|
||||||
[Apache 2.0](LICENSE)
|
[Apache 2.0](LICENSE)
|
||||||
|
|
||||||
|
[npm]: https://img.shields.io/npm/v/carbon-components-svelte.svg?color=blue
|
||||||
|
[npm-url]: https://npmjs.com/package/carbon-components-svelte
|
||||||
|
[build]: https://travis-ci.com/ibm/carbon-components-svelte.svg?branch=master
|
||||||
|
[build-badge]: https://travis-ci.com/ibm/carbon-components-svelte
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue