VueSual Lib

Install

npm install @yaroslav_ant/vuesual-library

Then, import and register the component:

import Vue from "vue";
import { VslBadge } from "@yaroslav_ant/vuesual-library";

Vue.component(VslBadge);

Import styles into top application level (main.js):

import "@yaroslav_ant/vuesual-library/src/assets/vsl-theme.scss";

Components

VslAvatar

VslBadge

VslButton

<VslButton @click="handleButtonClick">
  Оформить заказ
</VslButton>

Default values of props

| Property | Type | Default value | |-----------------|:----------------------------------------------------------------------------------------------------------------------: |-----------------| |variant |string "primary" | "secondary" | "tertiary" | "primary-outlined" | "secondary-outlined" | "tertiary-outlined" |"primary" | |size |string "default" | "small" |"default" | |disabled |boolean |false |

VslBreadcrumbs

VslCheckbox

<VslCheckbox
  label="Label"
  @change="handleCheckboxChange"
/>

Default values of props

| Property | Type | Default value | |-------------|:--: | --------------| |label |string | '' |

VslDropdown

VslMarquee

<VslMarquee :text="marqueeText" />
<VslMarquee>
  <pre><span>{{ marqueeText }}</span></pre>
</VslMarquee>

Default values of props

| Property | Type | Default value | |-------------|:-------: |---------------| |text |string |'' | |duration |number |10 | |delay |number |0 | |repeat |number | string |"infinite" | |paused |boolean |false | |reverse |boolean |false |

VslProgressCircular

VslQuote

VslRating