Phoenix UI

Github Repo

Collapse

Collapse transition helps to make a UI expressive and easy to use.

Below you can view various implementations with example markup.

The component comes with three variants: filled, outlined, and standard (default).

Show source

Copy source

The component comes with three variants: filled, outlined, and standard (default).

Show source

Copy source

The component comes with three variants: filled, outlined, and standard (default).

Show source

Copy source

API documentation for the component. Learn about imports and available attributes.

There are multiple ways to import components.

Copy source


    # PhoenixUI macro which imports all components
    use PhoenixUI
    # Or import component individually
    import PhoenixUI.Components.Backdrop

Below is a list of attributes that can be applied to the component.

Name	Type	Default	Description
HTML attribute	any		Supports all HTML attributes.
align	:center \| :inherit \| :justify \| :left \| :right	:inherit	Set the text-align on the component.
color	any framework-provided color	:slate	The text color to use.
element	Any HTML Element	:p	HTML element to use.
extend_class	string		Adds additional classes.
margin	bool	true	If true, the text will have margin.
phx-{any}	binding		Supports all Phoenix DOM element bindings.
variant	:h1 \| :h2 \| :h3 \| :h4 \| :p	:p	The links to use.

API