Toggle

Ejemplo básico de toggle demostrando el comportamiento principal.

Paquete: @solidiom/toggle
Versión: 0.0.1-next.0
Estado: stable

Ejemplos

import * as Toggle from "@solidiom/toggle"

;<Toggle.Root>Contenido de Toggle</Toggle.Root>

Ver código fuente

        export function Root(props: ToggleRootProps) {
  const { value, requestChange } = createControllableValue<boolean, "press">({
    value: props.pressed,
    defaultValue: props.defaultPressed ?? false,
    onChange: (next: boolean) => props.onPressedChange?.(next),
  })

  const handleClick = () => {
    if (props.disabled) return
    requestChange(!value(), createChangeDetails("press"))
  }

  return (
    <button
      type="button"
      aria-pressed={value() ? "true" : "false"}
      aria-disabled={props.disabled ? "true" : undefined}
      onClick={handleClick}
      class={props.class}
      style={props.style}
      {...applySemanticAttrs({
        scope: "toggle",
        part: "root",
        state: value() ? "on" : "off",
        disabled: props.disabled,
      })}
    >
      {props.children}
    </button>
  )
}