Color

Color supports checkbox and radio input types for displaying selected color.

View Source 

Usage

@import "winduum/src/ui/color/index.css" layer(components);

Variants

• default 
• interactive 

Props

• default-props 
• interactive-props 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Basic

html

<label class="ui-color" style="color: red">
    <input type="checkbox" aria-label="Red">
</label>
<label class="ui-color" style="color: blue">
    <input type="checkbox" aria-label="Blue">
</label>
<label class="ui-color" style="color: red; --ui-color-secondary: blue;">
    <input type="checkbox" aria-label="Red & Blue">
</label>

vue

<script setup lang="ts">
    import { UiColor } from '@/components/ui/color'
</script>

<template>
    <UiColor style="color: red">
        <input type="checkbox" aria-label="Red">
    </UiColor>
    <UiColor style="color: blue">
        <input type="checkbox" aria-label="Blue">
    </UiColor>
    <UiColor style="color: red; --ui-color-secondary: blue;">
        <input type="checkbox" aria-label="Red & Blue">
    </UiColor>
</template>

jsx

import { UiColor } from "@/components/ui/color"

export function Example() {
    return (
        <>
            <UiColor style="color: red">
                <input type="checkbox" aria-label="Red" />
            </UiColor>
            <UiColor style="color: blue">
                <input type="checkbox" aria-label="Blue" />
            </UiColor>
            <UiColor style="color: red; --ui-color-secondary: blue;">
                <input type="checkbox" aria-label="Red & Blue" />
            </UiColor>
        </>
    )
}

Disabled

<label class="ui-color" style="color: red">
    <input type="checkbox" disabled>
</label>
<label class="ui-color" style="color: blue">
    <input type="checkbox" disabled>
</label>
<label class="ui-color" style="color: red; --ui-color-secondary: blue;">
    <input type="checkbox" disabled>
</label>