Indicator

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 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.

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 base, natural, white, primary, secondary, dark, success, warning, danger, info, silver, 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="base" />
<.indicator color="natural" />
<.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="silver" />
<.indicator color="misc" />
<.indicator color="dawn" />

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="silver" />
<.indicator pinging color="misc" />
<.indicator pinging color="dawn" />

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" />

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 top_left />
<.indicator top_center />
<.indicator top_right />
<.indicator middle_left />
<.indicator middle_right />
<.indicator bottom_left />
<.indicator bottom_center />
<.indicator bottom_right />