Navigation v1.0.0

Pill

Abgerundete Pill-/Chip-Schaltflächen zum Filtern und zur Kategorieauswahl. Unterstützt aktive/inaktive Zustände und Link- oder Schaltflächenverhalten.

Vorschau & Code

_pill.html.erb

███
  ████ █████████ █████████

  ██████
    ███ ██████ ██████████████████ ██████ ██████ ███████ ████ ██
    ███ ██████ ██████████████████ ██████ █████████████ █████ █████████████████████████ █████████████ ██
██

██
  █████ ███ ██

Get Access to View Code

pill_component.rb

█ ██████████████████████ ████

█████ █████████████ █ ███████████████████
  ███ ██████████████████ ███████ ██████ █████ ████ █████ ███ ████████████████
    ██████ █ █████
    ███████ █ ██████
    █████ █ ████
    █████ █ ████
    ██████████████ █ █████████████████████ ██ ██
  ███

Get Access to View Code

pill_component.html.erb

██ ██ █████ ██
  ███ ███████ ██████ █████ ██████ █████████████ █████ ████ ██
██ ████ ██
  ███████ █████████████ ██████████ ████████████ ███ ███ ████████ █ ███ ██ ████████████████████ ████████ ████████████ ███
    ███ █████ ██
  █████████
██ ███ ██

Get Access to View Code

Optionen

Name	Typ	Standard	Beschreibung
`label` *	String	erforderlich	Text to display in the pill
`active`	Boolean	`false`	Whether the pill is in active/selected state
`href`	String	`nil`	Link URL (renders as anchor tag if provided)
`data`	Hash	`{}`	Data attributes for the element
`class`	String	`""`	Additional CSS classes to apply

Name	Typ	Standard	Beschreibung
`label` *	String	erforderlich	Text to display in the pill
`active`	Boolean	`false`	Whether the pill is in active/selected state
`href`	String	`nil`	Link URL (renders as anchor tag if provided)
`data`	Hash	`{}`	Data attributes for the element

Änderungsprotokoll v1.0.0

- Initial release with default and active variants
- Supports both link and button behavior

Vollzugang erhalten

Schalte den Quellcode für diese und alle anderen Komponenten frei. Einmalige Zahlung für lebenslangen Zugang.

Jetzt Zugang erhalten