README.md

carbon-components-vue

[Experimental] Vue implementation of the Carbon Design System

A collection of Carbon Components implemented using Vue.js.

Project goals and principles

The intention is to provide a library of robust and high-quality components to assist a developer working with Vue.js to leverage the Carbon Design System in their applications. The components are built with best practices (see our Contribution Guidelines for more details) to make full use of the Vue.js framework and integrate simply and efficiently into Vue.js applications. We intend these components to be exemplary, and therefore value getting the design principles and details right over rushing to a tactical delivery.

This project is a collaborative effort to embody the Carbon design system in Vue.js. In terms of guidance for the component designs, reference has been made to carbon components react.

This project is intended to be strictly focused on Vue.js implementations of the Carbon Components.

• Each component, used as documented, should render the HTML with attached CSS and JS as specified and illustrated by Carbon Components, nothing more, nothing less.
• If we find a defect or deficiency in the Carbon Components, we should raise an issue with that project, and assist in delivering a fix if possible, rather than cause this project to deviate from the Carbon Components.
• This project will not include additional components not part of Carbon Components, however helpful they seem, nor combination components to enable particular patterns of usage. Such add-ons may be very useful but should form satellite projects to this one.
• In terms of component structure, names and properties, this project will follow the lead established by carbon components react, and only deviate if there are compelling reasons to do so.

Project State

Initial development ongoing.

Current Components

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.

Components	State	Link
CvAccordion	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvAccordion
CvBarGraph
CvBreadcrumb	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvBreadcrumb
CvButton	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvButton
CvCheckbox	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvCheckbox
CvCodeSnippet	Ready	http://vue.carbondesignsystem.com//?selectedKind=CvCodeSnippet&selectedStory=All
CvContentSwitcher	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvContentSwitcher
CvDataTable		carbon-design-system#51
CvDatePicker	Ready, uses core js	http://vue.carbondesignsystem.com/?selectedKind=CvDatePicker&selectedStory=All
CvDropdown		carbon-design-system#47
CvFileUploader	Ready	http://vue.carbondesignsystem.com//?selectedKind=CvFileUploader&selectedStory=All
CvForm	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvForm
CvGauge		carbon-design-system#49
CvIcon	Ready, non-core requries on carbon-icons	http://vue.carbondesignsystem.com//?selectedKind=CvIcon
CvInlineNotification	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvInlineNotification
CvLineGraph		carbon-design-system#53
CvLink	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvLink
CvList	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvList
CvLoading	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvLoading
CvModal	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvModal
CvNumberInput	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvNumberInput
CvOverflowMenu	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvOverflowMenu
CvPagination	Ready	http://vue.carbondesignsystem.com//?selectedKind=CvPagination&selectedStory=All
CvPieChart		carbon-design-system#52
CvProgress	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvProgress
CvRadioButton	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvRadioButton
CvScatterPlot		carbon-design-system#50
CvSearch	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvSearch
CvSelect	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvSelect
CvSlider	Ready	http://vue.carbondesignsystem.com//?selectedKind=CvSlider
CvStructuredList	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvStructuredList
CvTabs	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvTabs
CvTag	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvTag
CvTextArea	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvTextArea
CvTextInput	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvTextInput
CvTile	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvTile
CvToastNotification	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvToastNotification
CvToggle	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvToggle
CvTooltip	Ready, uses core js	http://vue.carbondesignsystem.com//?selectedKind=CvTooltip

Usage

General

The components do not import any of the carbon styles themselves. Use the SCSS or CSS from carbon-components to provide the styling. You can also use the unpkg cdn to bring in the styles wholesale - unpkg.com/carbon-components/css/carbon-components.css aliases the latest css file.

All at once

In your main js file (where you include Vue)

import CarbonComponentsVue from 'carbon-components-vue/src/index';
Vue.use(CarbonComponentsVue);

One at a time

<script>
...
import CvButton from 'carbon-components-vue/src/components/cv-button/cv-button';
...
components: {
  CvButton,
},
...
</script>

Development

Please refer to the Contribution Guidelines before starting any work.

Contributing

Fork, create branch, submit PR. The PR will be used as part of a review process.

Publishing this library on gh-pages

sh deploy-gh-pages.sh