Group

Group common ui components such as Button, Badge or Control together.

View Source 

Usage

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

Variants

• default 

Tokens

• vertical 

Installation

Follow instructions for individual framework usage below

• winduum 
• winduum-vue 
• winduum-react 

Examples

Button Group

html

<div class="ui-group">
    <button class="ui-btn">Button</button>
    <button class="ui-btn">Button</button>
    <button class="ui-btn">Button</button>
</div>
<div class="ui-group">
    <button class="ui-btn outline">Button</button>
    <button class="ui-btn outline">Button</button>
    <button class="ui-btn outline">Button</button>
</div>
<div class="ui-group">
    <button class="ui-btn muted">Button</button>
    <button class="ui-btn muted">Button</button>
    <button class="ui-btn muted">Button</button>
</div>

vue

<script setup lang="ts">
    import { UiGroup } from '@/components/ui/group'
    import { UiBtn } from '@/components/ui/btn'
</script>

<template>
    <UiGroup>
        <UiBtn>Button</UiBtn>
        <UiBtn>Button</UiBtn>
        <UiBtn>Button</UiBtn>
    </UiGroup>
</template>

jsx

import { UiGroup } from '@/components/ui/group'
import { UiBtn } from '@/components/ui/btn'

export function Example() {
    return (
        <>
            <UiGroup>
                <UiBtn>Button</UiBtn>
                <UiBtn>Button</UiBtn>
                <UiBtn>Button</UiBtn>
            </UiGroup>
        </>
    )
}

Badge Group

<div class="ui-group">
    <div class="ui-badge">Badge</div>
    <div class="ui-badge">Badge</div>
    <div class="ui-badge">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge bordered">Badge</div>
    <div class="ui-badge bordered">Badge</div>
    <div class="ui-badge bordered">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge muted">Badge</div>
    <div class="ui-badge muted">Badge</div>
    <div class="ui-badge muted">Badge</div>
</div>
<div class="ui-group">
    <div class="ui-badge bg-gray-200 text-dark">
        <span>npm</span>
    </div>
    <div class="ui-badge bg-info">
        <span>7.1.2</span>
    </div>
</div>

Control Group

<div class="ui-group">
    <div class="ui-control bg-body-secondary w-[--ui-control-height] flex-center justify-center">
        @
    </div>
    <div class="ui-control">
        <input type="tel" required>
    </div>
    <button class="ui-btn">Button</button>
</div>

Vertical Group

<div class="ui-group vertical">
    <a role="button" class="ui-btn">Link</a>
    <button type="submit" class="ui-btn">Button</button>
    <input type="button" value="Input" class="ui-btn" />
    <input type="submit" value="Submit" class="ui-btn" />
    <input type="radio" aria-label="Radio" class="ui-btn" />
    <input type="checkbox" aria-label="Checkbox" class="ui-btn" />
    <input type="reset" value="Reset" class="ui-btn" />
</div>

<div class="ui-group vertical">
    <div class="ui-control">
        <input type="text" placeholder="1234 1234 1234 1234" required>
    </div>
    <div class="ui-group">
        <div class="ui-control">
            <input type="text" placeholder="MM/YY" required>
        </div>
        <div class="ui-control">
            <input type="text" placeholder="CVC" required>
        </div>
    </div>
</div>