master @ 10 LINES
[ HISTORY ] [ UP ]
┌─ ASTRO ────────────────────────────────────────────────────────────────────┐
│ --- │
│ // Two-state toggle on a checkbox, following the Checkbox pattern: the │
│ // native input is visually removed, the mark renders 7 stable cells. │
│ import type { Props } from "./Switch"; │
│ import "./Switch.scss"; │
│ │
│ const { label, name, checked = false, disabled = false } = Astro.props as Props; │
│ --- │
│ <label class="switch"><input type="checkbox" role="switch" name={name} checked={ch │
│ ecked} disabled={disabled} /><span class="switch-mark" aria-hidden="true"></span>{ │
│ " " + label}</label> │
└────────────────────────────────────────────────────────────────────────────────────┘
┌─ ASTRO ──────────────────────────────┐
│ --- │
│ // Two-state toggle on a checkbox, following │
│ the Checkbox pattern: the │
│ // native input is visually removed, the mar │
│ k renders 7 stable cells. │
│ import type { Props } from "./Switch"; │
│ import "./Switch.scss"; │
│ │
│ const { label, name, checked = false, disabl │
│ ed = false } = Astro.props as Props; │
│ --- │
│ <label class="switch"><input type="checkbox" │
│ role="switch" name={name} checked={checked} │
│ disabled={disabled} /><span class="switch-m │
│ ark" aria-hidden="true"></span>{" " + label} │
│ </label> │
└──────────────────────────────────────────────┘
──────────────────────────────────────────────────────────────────────────────────────
OOKNET
────────────────────────────────────────────────
OOKNET