UI-Component-Set
WARNING: this is a very early alpha version with limited components. More components will be added in the future.
Description
UI-Component-Set contains a set of Vue.js components written in Typescript, as well as a custom SCSS styling set of rules.
Table of Contents
Installation
npm install ui-componentsPrepare 'tsconfig.json'
Add "ui-component-set" to the "types" property. This will make Typescript UI-Component-Set type definitions, which is necessary for Vue.js components on this module to work properly.
Usage
-
SCSS styling can be imported using one of the following sintaxes
import 'ui-component-set/style/ui-components.scss';
require('ui-component-set/style/ui-components.scss');
NOTE: Vue components are written on Typescript, so they should be imported into a Vue.js project which is also written on that language. Vue.js components on this package can be imported by using any of the following sintaxes:
-
Import all components and then accesing specific components:
```typescript
import UIComponentSet from 'ui-component-set';
const <COMPONENT_NAME_1> = UIComponentSet.<COMPONENT_NAME_1>;
const <COMPONENT_NAME_2> = UIComponentSet.<COMPONENT_NAME_2>;
...
```
-
Import every specified component at once:
import { <COMPONENT_NAME_1>, <COMPONENT_NAME_2>, ... } from 'ui-component-set';
```
3. ### Import single component at a time:
```typescript
import <COMPONENT_NAME_1> from 'ui-component-set/<component-name_1>';
import <COMPONENT_NAME_2> from 'ui-component-set/<component-name_2>';
...
```
## Available components
### Segmented Progress Bar (segmented-progress-bar)
| Property | Type | Default | Description |
|:----------------------------|:--------|:--------|:--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| progress | Number | 0 | Progress expressed as a number between 0 and 1.
| showBorder | Boolean | false | Display border surrounding the progress bar.
| borderColor | String | #000 | Progress bar border color. **Has no effect if 'showBorder' is false or not specified'** |
| segmentColor | String | #000 | Set color for progress bar segments. |
| enableBlinking | Boolean | false | If true, the segment next to the last active one will be blinking. |
| segments | Number | 10 | Number of segments used to display the progress. **Has no effect if 'fixedSegmentWidth' is specified.** |
| segmentOffset | Number | 2.5 | Define margin between segments. |
| height | String | 50px | Define height of the progress bar. accepted. |
| width | String | 100% | Define width of the progress bar. |
| borderRadius | String | 2.5px | Define 'border-radius' property for progress bar's border. **Has no effect if 'showBorder' is false or not specified.** |
| segmentBorderRadius | String | 2.5px | Define 'border-radius' property for the segments. |
| fixedSegmentWidth | Number | undefined | Define width for the segments. **If this property is specified, 'segments' will have no effect, as the number of segments will be calculated according to the 'fixedSegmentWidth' and 'segmentOffset' properties.**