@oicl/openbridge-webcomponents v0.0.13
Openbridge Web Components
Welcome to the Openbridge Web Components! This readme file provides an overview of the project and its components.
❗Caution❗ This repository is currently in early development and may not be stable. Please use with caution.
Introduction video
We have made an short introduction to the library. You can watch it here
Table of Contents
Storybook
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.
Demo
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.
CSS file for palettes
The CSS file for the palettes is located at packages/openbridge-webcomponents/src/palettes/variables.css or by importing it directly from the package:
import '@oicl/openbridge-webcomponents/src/palettes/variables.css';The file is called variables.css and contains all the openbridge pallets (bright, day, dusk, night).
It can be used to set the color theme of components.
To select the pallet, set the data-obc-theme attribute on the html tag:
<html lang="en" data-obc-theme="day"></html>Installation
If you want to use the components in a Vue.js or React project we suggest that you use the wrapper packages @oicl/openbridge-webcomponents-vue or @oicl/openbridge-webcomponents-react respectively.
To use the components in your project, you can install the package from npm:
npm install @oicl/openbridge-webcomponentsSetup
- 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"></html> 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 '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';Use the components in your project:
<obc-top-bar></obc-top-bar>
Contributing
Contributions are welcome!