Welcome to the Vue.js wrapper of Openbridge Web Components!
❗Caution❗ This repository is currently in early development and may not be stable. Please use with caution.
We have made an short introduction to the library. You can watch it here
Join our slack channel to get the latest updates and to ask questions. Click here to join the slack workspace, and join the #openbridge-webcomponents channel.
Storybook is a development environment for UI components. It allows you to browse a component library, view the different states of each component, and interactively develop and test components in isolation.
To access the Storybook for this project, click here.
The demo showcases the project's functionality using Vue.js. It provides a live demonstration of the project's features and allows you to interact with the application.
To access the demo, click here.
To use the components in your project, you can install the package from npm:
npm install @oicl/openbridge-webcomponents-vueSee also the vue demo for an example of how to use the components in a Vue.js project.
-
Add the css file to your project:
import '@oicl/openbridge-webcomponents/src/palettes/variables.css'
-
Select the pallet by setting the
data-obc-themeattribute on thehtmltag:<html lang="en" data-obc-theme="day">
-
Install the Noto Sans font by using the attached
NotoSans.tfffile. Add the following to your css:@font-face { font-family: 'Noto Sans'; src: url('path/to/NotoSans.tff'); } * { font-family: Noto Sans; }
-
Import the desired components in your project, for instance:
import ObcTopBar from '@oicl/openbridge-webcomponents-vue/components/top-bar/ObcTopBar'
-
Use the components in your project:
<ObcTopBar></ObcTopBar>
Contributions are welcome!