orto-ui

Default theme

import OrtoUi from 'orto-ui';

Vue.use(OrtoUi);

Custom theme

import OrtoUi from 'orto-ui';
import * as CustomTheme from './themes/custom';

Vue.use(OrtoUi, {
    theme: CustomTheme
});

Vue.use(OrtoUi);

Custom config

manage default values by props

import OrtoUi from 'orto-ui';

const customConfig = {
    CButton: {
        variant: 'tertiary',
        size: 'sm',
        tag: 'a'
    }
};

Vue.use(OrtoUi, {
    config: customConfig
});

Manual components list

import OrtoUi from 'orto-ui';

Vue.use(OrtoUi, {
    components: ['CButton']
});

Individual components

Default theme

import { CButton } from 'orto-ui';

Vue.use(CButton);

Custom theme

import { CButton } from 'orto-ui';

const btnTheme = {
    baseClass: 'block align-top'
};

Vue.use(CButton, btnTheme);

Roadmap

| # | Component | MVP | Doc | Unit | Gemini | StoryBook | Accessibility | | --- | ------------------------------- | --- | --- | ---- | ------ | --------- | ------------- | | 1 | button | + | + | + | - | + | - | | 2 | link | + | + | + | - | + | - | | 3 | container row col | + | + | + | - | + | - | | 4 | list list-item list-toggle | + | + | +- | - | + | - | | 5 | tabs tab tab-panels tab-panel | + | + | +- | - | + | - | | 6 | checkbox checkbox-group | + | + | + | - | + | - | | 7 | radio radio-group | + | + | + | - | + | - | | 8 | form-panel | + | - | + | - | + | - | | 9 | form | + | + | + | - | + | - | | 10 | form-input | + | - | + | - | + | - | | 11 | form-field | + | - | - | - | + | - | | 12 | dropdown | + | + | + | - | + | - | | 13 | form-custom-select | + | + | + | - | + | - | | 14 | badge | + | + | + | - | + | - | | 15 | picture | + | + | + | - | + | - | | 16 | rating | + | + | + | - | + | - |