[Experimental] Vue implementation of the Carbon Design System
A collection of Carbon Components implemented using
Vue.js.
Vue.jsThe components do not import any of the carbon styles themselves. Use the SCSS or CSS from carbon-components to provide the styling.
- In your main js file (where you include Vue) you can include the styles wholesale:
import "carbon-components/css/carbon-components.min.css"; - You can also use the unpkg cdn to bring in the styles wholesale: unpkg.com/carbon-components/css/carbon-components.min.css aliases the latest minified css file.
- If you prefer to build the SCSS, in the
<style>tag of your top-level component you can include the styles wholesale:@import "~carbon-components/scss/globals/scss/styles.scss"; - Check out the Carbon Design System developers page for information on including individual component styles into your project.
View available Vue Components here. Usage information is in the notes tab.
Run the following command using npm:
npm install -S @carbon/vueIf you prefer Yarn, use the following command instead:
yarn add @carbon/vueNOTE: https://www.npmjs.com/package/current-script-polyfill is required for older browsers (e.g. IE11)
In your main js file (where you include Vue)
// No need for Babel
import CarbonComponentsVue from '@carbon/vue';alternatively if wanting to specify babel presets
// need babel
import CarbonComponentsVue from '@carbon/vue/src/index';
Vue.use(CarbonComponentsVue);In your main js file (where you include Vue)
// No need for Babel
import { CvButton } from '@carbon/vue';In a component file
<script>
...
import CvButton from '@carbon/vue/src/components/cv-button/cv-button';
...
components: {
CvButton,
},
...
</script>In your html file, no need to babel.
<script src="https://unpkg.com/vue@latest" />
<script src="https://unpkg.com/@carbon/vue" />
<script>
Vue.use(window['carbon-components-vue'].default);
<script>
. . . <cv-button>Hello</cv-button>v0.2.9
- Add gauge component - story is Data-viz/CvGauge
- Add pie chart component - story is Data-viz/CvPieChart
- Add router-link version of CvLink
v0.2.8 Correct duff deploy
v0.2.7
- Fix click on modal dialog closing it
v0.2.6
- Fix tab out of modal
- Remove unused vars
v0.2.5 - Minor fixes
- Make structured list native Vue
- Simplify structured list components
- Removed non-core CSS
- Fix to paginator reactivity
v0.2.4 - Minor fixes
- Make tooltip native Vue
- Tidy up a bit of unused code
- Make tabs native Vue and use carbon react pattern (breaks previous tab use)
v0.2.3 - Minor fixes
- Fix modal hide on main body click and show visible in story.
- Make cv-search native Vue.
- Make cv-number-input native Vue.
v0.2.2 - Minor fixes
- Fixed expandable tile and made it native Vue
- Made notification componentes native Vue
- Tidied toggle stories.
v0.2.0 - Moved to Storybook 4
- Knobs now operate as Vue properties the template is no longer replaced each time (as per Knobs in storybook 3)
- Story kinds array replaced by variants which define the settings used in each story.
- NOTE: slots no longer editable
v0.1.0 - First draft of carbon-components-vue implementation
This initial set of components, based on v9 of carbon components, includes draft implementations of all non-data viz components found in the core carbon components library. Public parts of the component: properties, events, data, methods, computed values are at this point subject to review at this point.
View available Vue.js components here. Usage information is available when you click the blue ? icon in the top right corner of the selected component.
Current Version: 0.1 :white_check_mark: Ready :warning: Under review :heavy_minus_sign: Not available
Please refer to the Contribution Guidelines before starting any work.
Fork, create branch, submit PR. The PR will be used as part of a review process.
sh deploy-gh-pages.sh