0.6.0 • Published 10 months ago

chroma-ui-vue v0.6.0

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

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