| Installation unpkg |
|---|
| Add following script before closing body tag: |
<script src="https://unpkg.com/csc-ui@0.0.69/dist/cscwebcomponents/cscwebcomponents.js"></script> |
| Installation npm |
|---|
npm install csc-ui |
| Note! Your framework might need some extra configuration to enable custom elements etc. See: https://stenciljs.com/docs/overview |
| Example usage |
|---|
Use these color codes as the color attribute of a csc-ui component |
<c-button outlined color="blue">Button text</c-button> |
primary / green
secondary
tertiary
dark-blue
blue
red
alt-green
light-green
grey
light-grey
light-grey-blue
yellow
| Opacity |
|---|
Add class alpha-90 - alpha-10 to adjust opacity |
<c-button outlined color="blue" class="alpha-50">Button text</c-button> |
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
100%
90%
80%
70%
60%
50%
40%
30%
20%
10%
<c-card>| Attribute | Type | Description |
|---|---|---|
| color | (string) | Card background color |
| pa | (number) | Card padding x 4 px |
| px | (number) | Card vertical padding x 4 px |
| py | (number) | Card horizontal padding x 4 px |
| ma | (number) | Card margin x 4 px |
| mx | (number) | Card vertical margin x 4 px |
| my | (number) | Card horizontal margin x 4 px |
| elevation | (number) | Card shadow distance |
| no-radius | (boolean) | Remove radius from corners |
| Example usage |
|---|
<c-card pa="4">Card content</c-card> |
Text
...no border radius
...with more elevation!
<c-button>| Attribute | Type | Description |
|---|---|---|
| no-radius | (boolean) | Remove radius from corners |
| loading | (boolean) | Show spinning loading indicator |
| disabled | (boolean) | Disabled button |
| color | (string) | Button color |
| fit | (boolean) | Fit button width to container |
| outlined | (boolean) | Outlined style |
| dense | (boolean) | Smaller button with less padding |
| Example usage |
|---|
<c-button outlined color="blue">Button text</c-button> |
<c-text-field>| Attribute | Type | Description |
|---|---|---|
| label | (string) | Label of text field |
| rows | (integer) | Number of rows in text field |
| required | (boolean) | Asterisk + validation if empty |
| valid | (boolean) | Bind to custom validation property |
| placeholder | (string) | Placeholder text |
| dense | (boolean) | Decreased height |
| readonly | (boolean) | Read only text field |
| disabled | (boolean) | Disabled text field |
| number | (boolean) | number type field |
| Example usage |
|---|
<c-text-field label="Label" rows="2" required></c-text-field> |
<c-select>| Attribute | Type | Description |
|---|---|---|
| label | (string) | Label of dropdown |
| dense | (boolean) | Decreased height |
| required | (boolean) | Asterisk + validation if empty |
| placeholder | (string) | Placeholder text |
| value | (object) | Selected item value |
| items | (array) | Array of items with name and value properties |
| items-per-page | (number) | Max items before adding scrollbars |
| Example usage |
|---|
<c-select label="Select" name="units" placeholder="test" value="" items-per-page="4"></c-select> |
<c-autocomplete>| Attribute | Type | Description |
|---|---|---|
| label | (string) | Label of autocomplete |
| query | (string) | Query string for external filtering |
| value | (object) | Selected item value |
| items | (array) | Array of items with name and value properties |
| Example usage |
|---|
<c-autocomplete label="Label" value="default1" query="Default 1" items="items" required></c-autocomplete> |
<c-radio>| Attribute | Type | Description |
|---|---|---|
| label | (string) | Label for radio group |
| items | (array) | Array of items with label and value properties |
| selected | (object) | Selected item from items array |
| color | (string) | Radio button color |
| Example usage |
|---|
<c-radio label="Label" items="array" selected="item"></c-radio> |
<c-checkbox>| Attribute | Type | Description |
|---|---|---|
| label | (string) | Label for checkbox |
| checked | (boolean) | Checkbox selected |
| color | (string) | Checkbox color |
| Example usage |
|---|
<c-checkbox label="Label" checked="booleanValue"></c-checkbox> |
<c-tab>| Attribute | Type | Description |
|---|---|---|
| active | (boolean) | Active tab |
| Example usage |
|---|
<c-tab active="booleanValue">Tab text</c-tab> |
<c-tab-button>| Attribute | Type | Description |
|---|---|---|
| label | (string) | Tab button label |
| color | (string) | Tab button color |
| icon | (string) | Tab button icon |
| active | (boolean) | Active tab button |
| Example usage |
|---|
<c-tab-button icon="storage" label="Label">Description text</c-tab-button> |
<c-toggle>| Attribute | Type | Description |
|---|---|---|
| subtitle | (string) | Optional additional text |
| description | (string) | Optional additional text |
| fit | (boolean) | Fit to container |
| color | (string) | Toggle button color |
| active | (boolean) | Active toggle button |
| Example usage |
|---|
<c-toggle>Button text</c-toggle> |
<c-toggle active fit color="pink">Button text</c-toggle> |
<c-toggle subtitle="Subtitle" description="Description">Button text</c-toggle> |