list-item

➤ wl-list-item

Display an item in a list.

➤ Properties

Property	Attribute	Type	Default	Description
clickable	clickable	boolean	false	Makes the element clickable.
disabled	disabled	boolean	false	Disables the element.
name	name	string | undefined		Name of the native form element.
noRipple	noRipple	boolean	false	Deactivates the ripple.
readonly	readonly	boolean	false	Makes the element readonly (disabled but tabbable)
required	required	boolean	false	Makes the element required in a form context.
role	role	AriaRole	"listitem"	Role of the list item.
type	type	"button" | "submit"	"submit"	Type of the button.
value	value	string	""	Value of the form element.

➤ Slots

Name	Description
	Default content.
after	Right content.
before	Left content.

➤ CSS Custom Properties

Property	Description
--list-item-after-align-self	Alignment of the after slot
--list-item-after-margin	Margin of the after slot
--list-item-before-align-self	Alignment of the before slot
--list-item-before-margin	Margin of the before slot
--list-item-bg	Default background
--list-item-bg-active	Background when active
--list-item-bg-active-hover	Background when active and hover
--list-item-bg-disabled	Background when disabled
--list-item-bg-hover	Background when hover
--list-item-border-radius	Border radius
--list-item-color	Default color
--list-item-color-active	Color when active
--list-item-color-active-hover	Color when active and hover
--list-item-color-disabled	Color when disabled
--list-item-color-hover	Color when hover
--list-item-opacity-disabled	Opacity when disabled
--list-item-padding	Padding
--list-item-transition	Transition

➤ Usage

Go here to try the demo.

➤ Contributors

Andreas Mehlsen	You?

➤ License

Licensed under MIT.