Indicator

Overview of the Phoenix and LiveView Indicator Component

The Mishka Chelekom Indicator component is a Phoenix LiveView component that provides a versatile way to visually highlight specific areas or elements in your application. This component is perfect for notifications, status updates, or drawing attention to important UI elements.

This Phoenix LiveView component allows developers to easily customize the size, color, and position of the indicator. With options for ping animations and various positions around the parent element, you can create dynamic visual cues to enhance the user experience without writing extensive CSS.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the appearance and behavior of the components, allowing for flexible design changes.

Color prop in Phoenix LiveView indicator component

The color prop for the indicator component allows you to choose from a wide range of predefined color options to customize the visual appearance of the indicator. You can select from colors such as white, primary, secondary, dark, success, warning, danger, info, light, misc, and dawn. These colors allow you to seamlessly align the indicator's appearance with the overall design of your application, ensuring a cohesive and visually consistent user interface.

<.indicator color="white" />
<.indicator color="primary" />
<.indicator color="secondary" />
<.indicator color="dark" />
<.indicator color="success" />
<.indicator color="warning" />
<.indicator color="danger" />
<.indicator color="info" />
<.indicator color="light" />
<.indicator color="misc" />
<.indicator color="dawn" />

Pinging prop of Phoenix LiveView indicator component

The pinging prop in the indicator component is a boolean that adds an animated ping effect to the indicator when set to true. By default, the pinging prop is set to false, meaning no animation is applied. When enabled, the pinging effect creates a subtle pulse around the indicator, drawing attention to it and making it ideal for situations where you need to highlight notifications or status updates. This visual cue can help users easily identify important elements on the page without overwhelming the overall design.

<.indicator pinging color="white" />
<.indicator pinging color="primary" />
<.indicator pinging color="secondary" />
<.indicator pinging color="dark" />
<.indicator pinging color="success" />
<.indicator pinging color="warning" />
<.indicator pinging color="danger" />
<.indicator pinging color="info" />
<.indicator pinging color="light" />
<.indicator pinging color="misc" />
<.indicator pinging color="dawn" />

Size prop in Phoenix LiveView indicator component

The size prop for the indicator component provides several options to control the dimensions of the indicator. You can choose from sizes like extra_small, small, medium, large, and extra_large. This flexibility allows you to adjust the indicator's size to suit different use cases, whether it's a small notification dot or a large visual cue to grab attention.

<.indicator size="extra_small" />
<.indicator size="small" />
<.indicator size="medium" />
<.indicator size="large" />
<.indicator size="extra_large" />

border prop of Phoenix LiveView indicator component

The border prop in the Phoenix indicator component allows you to define the style and color of the border around the indicator. By default, the border is set to transparent, meaning no visible border is applied. You can choose from a wide range of predefined border colors such as primary, success, danger, and more, or set it to none to transparent the border. This prop is useful for adding visual emphasis to the indicator or matching its border with the design theme of your application.

<.indicator border="white" />
<.indicator border="primary" />
<.indicator border="secondary" />
<.indicator border="dark" />
<.indicator border="success" />
<.indicator border="warning" />
<.indicator border="danger" />
<.indicator border="info" />
<.indicator border="light" />
<.indicator border="misc" />
<.indicator border="dawn" />

Indicator position prop of Phoenix LiveView indicator component

The @indicator_positions prop in the indicator component provides several options for positioning the indicator around its parent element. You can select from the following positions:

top_left
top_center
top_right
middle_left
middle_right
bottom_left
bottom_center
bottom_right

This flexibility allows you to place the indicator in the most appropriate location, depending on the design and user interaction, whether you need the visual cue at the top, middle, or bottom of an element.

Indicator Wrapper

<.indicator top_left />
<.indicator top_center />
<.indicator top_right />
<.indicator middle_left />
<.indicator middle_right />
<.indicator bottom_left />
<.indicator bottom_center />
<.indicator bottom_right />

Name	Type	Required	Description
id	string	No	A unique identifier is used to manage state and interaction.
size	string	No	Determines the overall size of the elements, including padding and font size. Values: extra_small, small, medium, large, extra_large.
class	string	No	Custom CSS class for additional styling.
color	string	No	Determines the color theme of the indicator. Values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn.
border	string	No	Specifies the border style for the indicator. Values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn, transparent, none.
pinging	boolean	No	Enables a pinging animation to draw attention to the indicator.
position	string	No	Determines the position of the indicator relative to the parent element. Values: top_left, top_center, top_right, middle_left, middle_right, bottom_left, bottom_center, bottom_right.

Name	Type	Options	Recommended?
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--only`	string	indicator	Yes
`--module`	string	Something	NO

Mishka