Toggle

Atom

Boolean ayarlar için sürgü kontrolü. peer tabanlı CSS ile çalışır; label 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' }) %>

No label

Preview

Code

<%- include('modules/ui/Toggle', { id: 't', 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 _sz = locals.size || 'md';
  var _ch = locals.checked ? 'checked' : '';
  var _dis = locals.disabled ? 'disabled' : '';
  
  var wClass = {
    sm: 'w-8 h-4',
    md: 'w-11 h-6',
    lg: 'w-14 h-7'
  }[_sz] || 'w-11 h-6';

  var dotClass = {
    sm: 'h-3 w-3 peer-checked:translate-x-4',
    md: 'h-5 w-5 peer-checked:translate-x-5',
    lg: 'h-6 w-6 peer-checked:translate-x-7'
  }[_sz] || 'h-5 w-5 peer-checked:translate-x-5';

  var _id = locals.id || 'toggle-' + Math.random().toString(36).substr(2, 9);
%>

  
     <%= _dis %>
      <% if (locals.name)     { %>name="<%= locals.name %>"<% } %>
      <% if (locals.value)    { %>value="<%= locals.value %>"<% } %>
      <% if (locals.onchange) { %>onchange="<%= locals.onchange %>"<% } %>
    >
    
    
  
  <% if (locals.label) { %>
    <%= locals.label %>
  <% } %>