My UI set
This is a simple set of vue-components for documenting and visualizing the UI-kit of your project.
Code expample
<template>
<div id="app">
<!-- this need currentCategory prop -->
<!-- eslint-disable-next-line vue/no-unused-vars -->
<MyUi v-if="isDevMode" custom-css-properties-container=".my-ui" #default="{ currentCategory }">
<MyUiCategory name="Buttons">
<MyUiComponent>
<MyButton text="Button"></MyButton>
</MyUiComponent>
<MyUiComponent name="MyButton loading">
<MyButton is-loading></MyButton>
</MyUiComponent>
<MyUiComponent name="MyButton red">
<MyButton color="red" text="Warning!!!!"></MyButton>
</MyUiComponent>
</MyUiCategory>
</MyUi>
</div>
</template>
<script>
import { MyUi, MyUiCategory, MyUiComponent } from 'my-ui-set';
// ...
</script>
Components and props
MyUi
custom-css-properties-container - container selector from which css properties will be taken. By default, shows all custom css properties .
MyUiCategory
name - name of category
MyUiComponent
name - name of component. By default, shows the component's vue tag