Skip to content
lostcoords / ui
Components

Components Sheet

Sheet

A draggable dialog with configurable heights.

Height: fit

New project

When
Category
Design
Owner
Interaction controller
app/javascript/controllers/demo_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["toast", "toasts"]

  press({ currentTarget }) {
    currentTarget.setAttribute(
      "aria-pressed",
      String(currentTarget.getAttribute("aria-pressed") !== "true"),
    )
  }

  select({ currentTarget }) {
    for (const tab of currentTarget.closest("[role=tablist]").querySelectorAll("[role=tab]")) {
      tab.setAttribute("aria-selected", String(tab === currentTarget))
    }
  }

  choose({ currentTarget }) {
    for (const button of currentTarget.closest("[role=group]").querySelectorAll("button")) {
      button.setAttribute("aria-pressed", String(button === currentTarget))
    }
  }

  toast() {
    this.toastsTarget.append(this.toastTarget.content.cloneNode(true))
  }
}

Height: medium large

New project

When
Category
Design
Owner
Interaction controller
app/javascript/controllers/demo_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["toast", "toasts"]

  press({ currentTarget }) {
    currentTarget.setAttribute(
      "aria-pressed",
      String(currentTarget.getAttribute("aria-pressed") !== "true"),
    )
  }

  select({ currentTarget }) {
    for (const tab of currentTarget.closest("[role=tablist]").querySelectorAll("[role=tab]")) {
      tab.setAttribute("aria-selected", String(tab === currentTarget))
    }
  }

  choose({ currentTarget }) {
    for (const button of currentTarget.closest("[role=group]").querySelectorAll("button")) {
      button.setAttribute("aria-pressed", String(button === currentTarget))
    }
  }

  toast() {
    this.toastsTarget.append(this.toastTarget.content.cloneNode(true))
  }
}

Height: large

New project

When
Category
Design
Owner
Interaction controller
app/javascript/controllers/demo_controller.js
import { Controller } from "@hotwired/stimulus"

export default class extends Controller {
  static targets = ["toast", "toasts"]

  press({ currentTarget }) {
    currentTarget.setAttribute(
      "aria-pressed",
      String(currentTarget.getAttribute("aria-pressed") !== "true"),
    )
  }

  select({ currentTarget }) {
    for (const tab of currentTarget.closest("[role=tablist]").querySelectorAll("[role=tab]")) {
      tab.setAttribute("aria-selected", String(tab === currentTarget))
    }
  }

  choose({ currentTarget }) {
    for (const button of currentTarget.closest("[role=group]").querySelectorAll("button")) {
      button.setAttribute("aria-pressed", String(button === currentTarget))
    }
  }

  toast() {
    this.toastsTarget.append(this.toastTarget.content.cloneNode(true))
  }
}

API reference

avatar_class

avatar_class(size: :base, ink: false, linked: false, extra: nil)
ParameterDefaultValues
size:base:base · :lg · :sm · :xl
inkfalsetrue · false
linkedfalsetrue · false
extranilAdditional Tailwind classes

button_class

button_class(variant: :default, size: :base, block: false, extra: nil)
ParameterDefaultValues
variant:default:default · :accent · :secondary · :glass · :ghost · :danger
size:base:sm · :base · :lg · :nav
blockfalsetrue · false
extranilAdditional Tailwind classes

dialog_class

dialog_class(kind = :modal, extra: nil)
ParameterDefaultValues
kind:modal:modal · :context
extranilAdditional Tailwind classes

sheet_data

sheet_data(data = {}, detents: "fit")
ParameterDefaultValues
data{}—
detents"fit""fit" · "medium large" · "large"

sheet_row_class

sheet_row_class(extra: nil)
ParameterDefaultValues
extranilAdditional Tailwind classes

sheet_row_label_class

sheet_row_label_class(extra: nil)
ParameterDefaultValues
extranilAdditional Tailwind classes

sheet_chip_class

sheet_chip_class(active: false, member: false, extra: nil)
ParameterDefaultValues
activefalsetrue · false
memberfalsetrue · false
extranilAdditional Tailwind classes

sheet_datetime_input_class

sheet_datetime_input_class(extra: nil)
ParameterDefaultValues
extranilAdditional Tailwind classes

sheet_text_input_class

sheet_text_input_class(extra: nil)
ParameterDefaultValues
extranilAdditional Tailwind classes

Controller options

AttributeTypeDefault
data-sheet-detents-valueString"fit"