1.3.4 • Published 12 months ago
@markusand/ui-components v1.3.4
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