1.0.2 • Published 5 years ago
@jporto/carbon-vue v1.0.2
@jporto/carbon-vue

An opinionated Vue implementation of IBM™ Carbon Design System version 10.
See it in action here
Project setup
yarn installUsing storybook for development
yarn storybookCompiles and minifies for production
yarn buildRun your unit tests
yarn test:unitLints and fixes files
yarn lintUsing Carbon Vue in your project
Add carbon-vue to your project, as a dependency:
yarn add @jporto/carbon-vueUsing with Vue
Add the following to your App.vue file:
import Vue from 'vue'
import CarbonVue from '@jporto/carbon-vue'
Vue.use(CarbonVue)Using with Nuxt
Add a carbon-vue.js to /plugins folder:
import Vue from 'vue'
import CarbonVue from '@jporto/carbon-vue'
Vue.use(CarbonVue)Add your new plugin in nuxt.config.js
plugins: [
'carbon-vue.js`
]you can use any other name for the file.
Component List
| Component | Status | Stories | Themes |
|---|---|---|---|
| Accordion | ✔ | ✔ | ✔ |
| Breadcrumb | ✔ | ✔ | |
| Button | ✔ | ✔ | |
| Checkbox | ✔ | ✔ | |
| CodeSnippet | ✔ | ✔ | |
| ComboBox | ✔ | ✔ | ✔ |
| ContentSwitcher | |||
| DataTable | ✔ | ✘ | |
| DatePicker | |||
| Dropdown | ✔ | ✔ | |
| FileUploader | |||
| Form | ✔ | ✔ | |
| InlineLoading | |||
| InlineNotification | |||
| Link | ✔ | ✔ | |
| List | |||
| Loading | ✔ | ✔! | |
| Modal | ✔ | ✔ | |
| MultiSelect | |||
| NumberInput | ✔ | ✔ | |
| OverflowMenu | ✔ | ✔ | |
| Pagination | ✔ | ✔ | |
| Progress | ✔ | ✔ | |
| RadioButton | ✔ | ✔ | |
| Search | |||
| Select | ✔ | ✔ | |
| SkeletonText | |||
| Slider | ✔ | ✔ | |
| StructuredList | |||
| Tabs | ✔! | ✔ | |
| Tag | ✔ | ✔ | |
| TextArea | ✔ | ✔ | |
| TextInput | ✔ | ✔! | |
| Tile | ✔ | ✔ | |
| TimePicker | ✔ | ✔! | |
| ToastNotification | ✔ | ✔ | |
| Toggle | ✔ | ✔ | |
| Tooltip | ✔ | ✔ | |
| UIShell | ✔ | ✔ |
1.0.2
5 years ago