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
• DataDisplay
  • BadgeChroma
• Form Elements
  • TextInputChroma
  • CheckboxChroma
• Navigation
  • LinkChroma
  • BreadcrumbChroma
• Layouts
  • JoinChroma
• Globals
  • SizesChroma
  • ColorsChroma

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'
]