Toggle

Atom

Boolean ayarlar için sürgü kontrolü. Label, opsiyonel description ve 3 boyut destekler.

Checked

Preview

Notifications enabled

Code

<%- include('modules/ui/Toggle', { id: 'notif', label: 'Notifications enabled', checked: true }) %>

Unchecked

Preview

Dark mode

Code

<%- include('modules/ui/Toggle', { id: 'dark', label: 'Dark mode' }) %>

With description

Preview

Auto-save

Saves your work every 30 seconds

Code

<%- include('modules/ui/Toggle', { id: 'save', label: 'Auto-save', description: 'Saves your work every 30 seconds', checked: true }) %>

Disabled

Preview

Enabled (disabled)

Disabled option

Code

<%- include('modules/ui/Toggle', { id: 'a', label: 'Enabled (disabled)', checked: true,  disabled: true }) %>
<%- include('modules/ui/Toggle', { id: 'b', label: 'Disabled option',     checked: false, disabled: true }) %>

Sizes

Preview

Small

Medium

Large

Code

<%- include('modules/ui/Toggle', { id: 'sm', label: 'Small',  size: 'sm', checked: true }) %>
<%- include('modules/ui/Toggle', { id: 'md', label: 'Medium', size: 'md', checked: true }) %>
<%- include('modules/ui/Toggle', { id: 'lg', label: 'Large',  size: 'lg', checked: true }) %>

Source modules/ui/Toggle.ejs

<%
var _id   = locals.id   || 'toggle';
var _sz   = locals.size || 'md';
var _checked  = locals.checked  || false;
var _disabled = locals.disabled || false;
var _label    = locals.label    || '';
var _desc     = locals.description || null;

var track = { sm: 'h-4 w-7', md: 'h-5 w-9', lg: 'h-6 w-11' }[_sz] || 'h-5 w-9';
var thumb = { sm: 'h-3 w-3',   md: 'h-3.5 w-3.5', lg: 'h-4 w-4'   }[_sz] || 'h-3.5 w-3.5';
var onTx  = { sm: 'translate-x-3.5', md: 'translate-x-4', lg: 'translate-x-5' }[_sz] || 'translate-x-4';

var trackColor = _checked ? 'bg-primary' : 'bg-surface-sunken border border-border';
var thumbTx    = _checked ? onTx : 'translate-x-0';
%>

  
    checked<% } %>
      <% if (_disabled) { %>disabled<% } %>
      class="sr-only"
    />
    
    
  
  
    <%= _label %>
    <% if (_desc) { %>
      <%= _desc %>
    <% } %>