expansion

➤ wl-expansion

Provide an expandable details-summary view.

➤ Properties

Property	Attribute	Type	Default	Description
ariaChecked	ariaChecked	string		Aria expanded attribute.
checked	checked	boolean	false	Opens the expansion.
disabled	disabled	boolean	false	Disables the element.
duration	duration	number	250	The duration of the animations.
icon	icon	string	"expand_more"	Icon name.
name	name	string		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	"radio"	Role of the radio behavior.
value	value	string	""	Value of the form element.

➤ Events

Event	Description
change	Dispatched when the checked property changes due to a user interaction.

➤ CSS Custom Properties

Property	Description
--expansion-bg	Default background
--expansion-color	Default color
--expansion-content-padding	Padding of the content
--expansion-elevation	Box shadow
--expansion-elevation-open	Box shadow when open
--expansion-header-bg-hover	Background of the header when :hover
--expansion-header-description-color	Color of the description slot in the header
--expansion-header-height	Height of the header
--expansion-header-height-open	Height of the header when open
--expansion-header-padding	Padding of the header
--expansion-header-title-margin	Margin of the title slot in the header
--expansion-header-transition	Transition of the header
--expansion-icon-transition	Transition of the icon
--expansion-margin-open	Margin when open
--expansion-transition	Transition

➤ Slots

Name	Description
	Default content.
description	Description to the left on the header.
indicator	Content to the right on the header.
title	Title to the left on the header.

➤ Usage

Go here to try the demo.

➤ Contributors

Andreas Mehlsen	You?

➤ License

Licensed under MIT.