0.0.17 • Published 10 months ago

@oicl/openbridge-webcomponents v0.0.17

Weekly downloads
-
License
Apache-2.0
Repository
github
Last release
10 months ago

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-webcomponents

Setup

  1. Add the css file to your project:
    import '@oicl/openbridge-webcomponents/src/palettes/variables.css';
  2. Select the pallet by setting the data-obc-theme attribute on the html tag:
    <html lang="en" data-obc-theme="day"></html>

  3. Install the Noto Sans font by using the attached NotoSans.tff file. Add the following to your css:

    @font-face {
  font-family: 'Noto Sans';
  src: url('path/to/NotoSans.tff');
}

* {
  font-family: Noto Sans;
}

  4. Import the desired components in your project, for instance:

    import '@oicl/openbridge-webcomponents/dist/components/top-bar/top-bar.js';

  5. Use the components in your project:

    <obc-top-bar></obc-top-bar>

Contributing

Contributions are welcome!

@lit-labs/observers@lit/localizelit
@oicl/openbridge-webcomponents-react@oicl/openbridge-webcomponents-vue
0.0.15-dev-20241119201940

1 year ago

0.0.17-dev-20250326181407

10 months ago

0.0.16-dev-20250210131901

12 months ago

0.0.15-dev-20241205133420

1 year ago

0.0.15-dev-20250206192636

12 months ago

0.0.15-dev-20241127183633

1 year ago

0.0.15-dev-20241203212146

1 year ago

0.0.15-dev-20241125212938

1 year ago

0.0.15-dev-20241205184658

1 year ago

0.0.15-dev-20241106185316

1 year ago

0.0.15-dev-20241122185953

1 year ago

0.0.15-dev-20241205132814

1 year ago

0.0.15-dev-20250207104003

12 months ago

0.0.15-dev-20241106154355

1 year ago

0.0.15-dev-20241113182547

1 year ago

0.0.15-dev-20250206195757

12 months ago

0.0.15-dev-20250206191351

12 months ago

0.0.15-dev-20241203184948

1 year ago

0.0.15-dev-20241127113847

1 year ago

0.0.15-dev-20241125211335

1 year ago

0.0.15-dev-20241112205851

1 year ago

0.0.15-dev-20241104120701

1 year ago

0.0.15-dev-20250205200936

12 months ago

0.0.15-dev-20250206192612

12 months ago

0.0.15-dev-20250205131647

12 months ago

0.0.15-dev-20250207120332

12 months ago

0.0.17-dev-20250303112901

11 months ago

0.0.15-dev-20241203211234

1 year ago

0.0.15-dev-20250127114442

1 year ago

0.0.15-dev-20250210125726

12 months ago

0.0.15-dev-20250210103359

12 months ago

0.0.16

12 months ago

0.0.17

11 months ago

0.0.15-dev-20250206192744

12 months ago

0.0.15-dev-20241124190908

1 year ago

0.0.15-dev-20241203211143

1 year ago

0.0.15-dev-20241203183951

1 year ago

0.0.15-dev-20250210112554

12 months ago

0.0.15-dev-20241203211543

1 year ago

0.0.15-dev-20241204123732

1 year ago

0.0.15-dev-20241112185305

1 year ago

0.0.15-dev-20250209144815

12 months ago

0.0.15-dev-20241204141405

1 year ago

0.0.15-dev-20241205135617

1 year ago

0.0.15-dev-20241204140752

1 year ago

0.0.15-dev-20241205131735

1 year ago

0.0.15-dev-20241123190545

1 year ago

0.0.15-dev-20240925080218

1 year ago

0.0.15-dev-20240923190011

1 year ago

0.0.15-dev-20240923191659

1 year ago

0.0.15-dev-20240923193604

1 year ago

0.0.15-dev-20240923194534

1 year ago

0.0.15-dev-20240923195223

1 year ago

0.0.15-dev-20240923184809

1 year ago

0.0.15-dev-20240916185711

1 year ago

0.0.15-dev-20240916083108

1 year ago

0.0.15-dev-20240915195432

1 year ago

0.0.15-dev-20240913120022

1 year ago

0.0.15-dev-20240913123347

1 year ago

0.0.15-dev-20240913083746

1 year ago

0.0.15-dev-20240913081426

1 year ago

0.0.15-dev-20240913082855

1 year ago

0.0.15-dev-20240905195857

1 year ago

0.0.15-dev-20240905203037

1 year ago

0.0.15-dev-20240905083013

1 year ago

0.0.15-dev-20240814165355

1 year ago

0.0.15-dev-20240814145458

1 year ago

0.0.14

2 years ago

0.0.15-dev-20240814163530

1 year ago

0.0.15-dev-20240814170531

1 year ago

0.0.15

2 years ago

0.0.13

2 years ago

0.0.12

2 years ago

0.0.10

2 years ago

0.0.9

2 years ago

0.0.8

2 years ago

0.0.7

2 years ago

0.0.6

2 years ago

0.0.5

2 years ago

0.0.4

2 years ago