ButtonGroup

Atom

Birbirini dışlayan seçenekler için segmentli buton grubu. 4 variant, 4 boyut ve disabled item desteği.

Outline (default)

Primary

Secondary

Ghost

Sizes

With disabled item

Icon-style labels

Source modules/ui/ButtonGroup.ejs

<%
var _v     = locals.variant || 'outline';
var _sz    = locals.size    || 'md';
var _items = locals.items   || [];
var _value = locals.value   || (_items[0] && _items[0].value) || '';

var sc = {
  xs: 'px-2 py-1 text-xs',
  sm: 'px-3 py-1.5 text-sm',
  md: 'px-4 py-2 text-sm',
  lg: 'px-5 py-2.5 text-base',
}[_sz] || 'px-4 py-2 text-sm';

var vc = {
  outline: {
    wrap:     'inline-flex rounded-md overflow-hidden border border-border divide-x divide-border',
    active:   'bg-surface-overlay font-semibold text-text-primary',
    inactive: 'bg-surface-base hover:bg-surface-overlay text-text-primary',
  },
  primary: {
    wrap:     'inline-flex rounded-md overflow-hidden',
    active:   'bg-primary text-primary-fg',
    inactive: 'bg-primary/20 hover:bg-primary/40 text-primary-fg',
  },
  secondary: {
    wrap:     'inline-flex rounded-md overflow-hidden',
    active:   'bg-secondary text-secondary-fg',
    inactive: 'bg-secondary/20 hover:bg-secondary/40 text-secondary-fg',
  },
  ghost: {
    wrap:     'inline-flex rounded-md overflow-hidden',
    active:   'bg-surface-overlay font-semibold text-text-primary',
    inactive: 'hover:bg-surface-overlay text-text-primary',
  },
}[_v] || {
  wrap: 'inline-flex rounded-md overflow-hidden border border-border divide-x divide-border',
  active: 'bg-surface-overlay font-semibold text-text-primary',
  inactive: 'bg-surface-base hover:bg-surface-overlay text-text-primary',
};
%>

  <% _items.forEach(function(item, i) {
    var isActive = item.value === _value;
    var isFirst  = i === 0;
    var isLast   = i === _items.length - 1;
    var roundL = (_v !== 'outline' && isFirst) ? ' rounded-l-md' : '';
    var roundR = (_v !== 'outline' && isLast)  ? ' rounded-r-md' : '';
  %>
    
  <% }); %>