Group

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

View Source 

Usage

@import "winduum/src/components/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="x-group">
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
    <button class="x-button">Button</button>
</div>
<div class="x-group">
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
    <button class="x-button outline">Button</button>
</div>
<div class="x-group">
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
    <button class="x-button muted">Button</button>
</div>

vue

<script setup lang="ts">
    import { Group } from '@/components/group'
    import { Button } from '@/components/button'
</script>

<template>
    <Group>
        <Button>Button</Button>
        <Button>Button</Button>
        <Button>Button</Button>
    </Group>
</template>

jsx

import { Group } from '@/components/group'
import { Button } from '@/components/button'

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

Badge Group

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

Control Group

<div class="x-group">
    <div class="x-control bg-body-secondary w-[--x-control-block-size] flex items-center justify-center">
        @
    </div>
    <div class="x-control">
        <input type="tel" required>
    </div>
    <button class="x-button">Button</button>
</div>

Vertical Group

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

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