Vue 3 UI components
Install
Components
Avatar
Avatars are circular components that usually wrap an image or icon. They can be used to represent a person or an object.
Display an image that represents a person or an object, or displays the name initials as fallback. If wrapped in an avatar-group element, avatars are overlapped.
<Avatar :src="user.avatar" :initials="user.name" />Props
| prop | type | default | description |
|---|---|---|---|
| src |
string, null
|
undefined |
Image url |
| initials | string |
undefined |
Name from where extract fallback initials |
Events
None
Slots
None
CSS custom properties
--avatar-size: 2rem
--avatar-radius: 15%
Button
<Button primary @click="doSomething">Do it!</Button>Props
| prop | type | default | description |
|---|---|---|---|
| primary | boolean |
undefined |
|
| alert | boolean |
undefined |
|
| outline | boolean |
undefined |
|
| flat | boolean |
undefined |
|
| block | boolean |
undefined |
|
| loading | boolean |
undefined |
|
| disabled | boolean |
undefined |
|
| submit | boolean |
undefined |
|
| reset | boolean |
undefined |
Events
None
Slots
default
CSS custom properties
--button-padding: 0.5rem
--button-margin: 1px
--button-border-radius: 4px
--button-color: #f8f8f8
--button-font-color: #606068
--button-border: 1px solid #c8c8cf
Collapser
<Collapser>
<template #title>Title</template>
<section>Content</section>
</Collapser>Props
| prop | type | default | description |
|---|---|---|---|
| disabled | boolean |
undefined |
|
| open | boolean |
undefined |
Events
toggle
Slots
title Title
default Content
CSS custom properties
--collapser-padding: 0.75rem
--collapser-border: 1px solid #0001