0.6.0 • Published 10 months ago
chroma-ui-vue v0.6.0
chroma-ui-vue
Installing
This package is built on top of daisyUI
Package manager
Using npm:
$ npm install chroma-ui-vue
Buttons
ButtonChroma
<script setup lang="ts">
import {ButtonChroma} from "chroma-ui-vue";
</script>
<template>
<ButtonChroma
color="primary"
size="xs"
:outline="true"
:disabled="true"
:loading="true"
:wide="true"
/>
</template>
const buttonColors = [
'neutral',
'primary',
'secondary',
'accent',
'ghost',
'link',
'info',
'success',
'warning',
'error'
]
Data Display
BadgeChroma
<script setup lang="ts">
import {BadgeChroma} from "chroma-ui-vue";
</script>
<template>
<BadgeChroma
color="primary"
:outline="true"
size="lg">
Badge
</BadgeChroma>
</template>
Form Elements
TextInputChroma
<script setup lang="ts">
import {TextInputChroma} from "chroma-ui-vue";
const inputValue = ref('');
</script>
<template>
<TextInputChroma
v-model="inputValue"
type="text"
size="xs"
error="Error message"
:required="true"
:disabled="false"
label="Input label"
placeholder="Type your name..."/>
</template>
const textInputTypes = [
'text',
'password',
]
TextareaChroma
<script setup lang="ts">
import {TextareaChroma} from "chroma-ui-vue";
const inputValue = ref('');
</script>
<template>
<TextareaChroma
v-model="inputValue"
size="lg"
error="Error message"
:required="true"
:disabled="false"
label="Textarea label"
placeholder="Type your name..."/>
</template>
CheckboxChroma
<script setup lang="ts">
import {CheckboxChroma} from "chroma-ui-vue";
const checked = ref(false);
</script>
<template>
<CheckboxChroma
label="Remember me"
size="md"
color="primary"
:disabled="false"
:checked="checked" />
</template>
Navigation
LinkChroma
<script setup lang="ts">
import {LinkChroma} from "chroma-ui-vue";
</script>
<template>
<LinkChroma
as="a"
href="https://www.npmjs.com/package/chroma-ui-vue"
target="_blank"
color="primary"
:no-underline="true">
I'm a simple link
</LinkChroma>
</template>
BreadcrumbsChroma
<script setup lang="ts">
import {BreadcrumbsChroma, BreadcrumbChroma} from "chroma-ui-vue";
</script>
<template>
<BreadcrumbsChroma>
<BreadcrumbChroma>Link 1</BreadcrumbChroma>
<BreadcrumbChroma>Link 2</BreadcrumbChroma>
<BreadcrumbChroma>Link 3</BreadcrumbChroma>
</BreadcrumbsChroma>
</template>
Layout
JoinChroma
<script setup lang="ts">
import {JoinChroma, ButtonChroma} from 'chroma-ui-vue'
</script>
<template>
<JoinChroma
orientation="horizontal"
:responsive="false">
<ButtonChroma join-item>Button 1</ButtonChroma>
<ButtonChroma join-item>Button 2</ButtonChroma>
<ButtonChroma join-item>Button 3</ButtonChroma>
</JoinChroma>
</template>
<script setup lang="ts">
import {JoinChroma, TextInputChroma, ButtonChroma} from 'chroma-ui-vue'
</script>
<template>
<JoinChroma>
<TextInputChroma join-item/>
<ButtonChroma join-item>Button 1</ButtonChroma>
</JoinChroma>
</template>
const orientations = [
'horizontal',
'vertical',
]
Globals
sizesChroma
const sizesChroma = [
'xs',
'sm',
'md',
'lg'
]
ColorsChroma
const colorsChroma = [
'primary',
'secondary',
'accent',
'info',
'success',
'warning',
'error'
]
0.6.0
10 months ago
0.5.2
10 months ago
0.5.1
10 months ago
0.5.0
10 months ago
0.4.0
10 months ago
0.3.0
10 months ago
0.2.0
10 months ago
0.1.15
10 months ago
0.1.14
10 months ago
0.1.13
10 months ago
0.1.12
10 months ago
0.1.11
10 months ago
0.1.10
10 months ago
0.1.9
10 months ago
0.1.8
10 months ago
0.1.7
10 months ago
0.1.6
10 months ago
0.1.5
10 months ago
0.1.4
10 months ago
0.1.3
10 months ago
0.1.2
10 months ago
0.1.1
10 months ago
0.1.0
10 months ago
0.0.0
10 months ago