Package Exports

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (blue-web-components) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Blue Web Components

This library provides different kind of Web Components.
What are Web Components?

Goal is to make the components simple, independent and flexible to use.

If you are using React, Blue React might be a good libary of producitve components.

Usage

Install as NPM package

Install from NPM:

npm i blue-web-components

Install from GitHub repository:

npm i github:bruegmann/blue-web-components

Import it in your code:

import { Sidebar } from "blue-web-components/packages/sidebar/Sidebar.js"
import "blue-web-components/packages/sidebar/Sidebar.js"

TypeScript support is not all that great yet, but you can declare it anyway. In a React app with TypeScript import it and declare it once globally:

import { DOMAttributes } from "react"

// @ts-ignore
import { Sidebar } from "blue-web-components/packages/sidebar/Sidebar.js"
import "blue-web-components/packages/sidebar/Sidebar.js"

type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>

declare global {
    namespace JSX {
        interface IntrinsicElements {
            ["blue-sidebar"]: CustomElement<Sidebar>
        }
    }
}

Embedding directly to HTML

<script
    type="module"
    src="https://raw.githubusercontent.com/bruegmann/blue-web-components/main/packages/sidebar/Sidebar.js"
></script>

Use a Blue Web Component

<blue-sidebar></blue-sidebar>

Web Components support different attributes, properties and events. Take a look at the docs to find out more.

Styling

By default the Web Components have pretty basic styling. You can customize it using CSS Variables (Custom Properties). All CSS Variables by Blue Web Components start with --blue-.

Development

Use this command to run the site on a simple web server:

npm start

This will start Storybook.

Contributing

Fork it!
Create your feature branch: git checkout -b my-new-feature
Commit your changes: git commit -am 'Add some feature'
Push to the branch: git push origin my-new-feature
Submit a pull request :D

Credits

SVG code for ThreeStateCheckbox by Bootstrap Icons

License

GNU General Public License v3.0