3shape-design-system

How to use

Install packages

npm i 3shape-design-system @webcomponents/webcomponentsjs

Add polyfill import

import '@webcomponents/webcomponentsjs/webcomponents-bundle.js';
// or dynamical
import '@webcomponents/webcomponentsjs/webcomponents-loader.js';

Add components import

import '3shape-design-system';

Use tags

<g-select
    label="Label"
    name="test"
    required
></g-select>

Props

| Prop | Type | Default | Description | | --- | --- | --- | --- | | {label} | String | null | label text | | {required} | Boolean | null | shows required field (label is required) | | {disabled} | Boolean | null | disabled state | | {name} | String | null | input name | | {hint} | String | null | hint text | | {error} | String | null | error message | | {value} | String | null | controlled input value | | {onChange} | Function | null | controlled input change handler |

How to develop

npm i

npm run watch

npm run serve

Go to http://localhost:8000