Banner

New version v0.0.1 🚀

Customizable, dismissible banners for Phoenix LiveView with flexible positioning and smooth animation transitions to enhance user interaction.

Installation:

mix mishka.ui.gen.component banner

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

Overview of the Phoenix and LiveView Banner Component

The Mishka Chelekom Banner module provides versatile banners with a variety of styles and colors. It offers an effective way to display announcements, notifications, or important information. Support components like Dismissable Banners , which allow users to hide banners with a smooth transition, enhancing user control and interactivity.

The Mishka Chelekom Banner component integrates seamlessly with Phoenix LiveView applications, offering customizable positioning and sizes to fit any design. With this Phoenix LiveView component , users can display banners for promotions, warnings, or announcements, with real-time updates. The module’s flexibility ensures it complements your design while maintaining functionality. The Dismissable Banner component provides users the ability to remove banners smoothly, ensuring a clean and streamlined user interface, while allowing temporary messages to be easily managed.

Default Variant

The default style of the Mishka Chelekom banner applies a solid background and border that change based on user interaction, making it perfect for delivering important notifications. With just a single setting, you can select from a range of color options, ensuring easy customization to match various design styles.

<.banner>Default White</.banner>
<.banner color="dark">Default Dark</.banner>
<.banner color="info">Default Info</.banner>
<.banner color="success">Default Success</.banner>
<.banner color="warning">Default Warning</.banner>
<.banner color="danger">Default Danger</.banner>
<.banner color="light">Default Light</.banner>
<.banner color="misc">Default Misc</.banner>
<.banner color="dawn">Default Dawn</.banner>
<.banner color="primary">Default Primary</.banner>
<.banner color="secondary">Default Secondary</.banner>

Outline Variant

The outline style of the Mishka Chelekom banner features a border. Using a single setting, you can choose from various color variants to suit your design needs.

<.banner variant="outline">Outline White</.banner>
<.banner variant="outline" color="dark">Outline Dark</.banner>
<.banner variant="outline" color="info">Outline Info</.banner>
<.banner variant="outline" color="success">Outline Success</.banner>
<.banner variant="outline" color="warning">Outline Warning</.banner>
<.banner variant="outline" color="danger">Outline Danger</.banner>
<.banner variant="outline" color="light">Outline Light</.banner>
<.banner variant="outline" color="misc">Outline Misc</.banner>
<.banner variant="outline" color="dawn">Outline Dawn</.banner>
<.banner variant="outline" color="primary">Outline Primary</.banner>
<.banner variant="outline" color="secondary">Outline Secondary</.banner>

Shadow Variant

The shadow variant of the Mishka Chelekom banner is similar to the default variant, but it also includes a subtle shadow along with a border and white background in light mode.

<.banner variant="shadow">Shadow White</.banner>
<.banner variant="shadow" color="dark">Shadow Dark</.banner>
<.banner variant="shadow" color="info">Shadow Info</.banner>
<.banner variant="shadow" color="success">Shadow Success</.banner>
<.banner variant="shadow" color="warning">Shadow Warning</.banner>
<.banner variant="shadow" color="danger">Shadow Danger</.banner>
<.banner variant="shadow" color="light">Shadow Light</.banner>
<.banner variant="shadow" color="misc">Shadow Misc</.banner>
<.banner variant="shadow" color="dawn">Shadow Dawn</.banner>
<.banner variant="shadow" color="primary">Shadow Primary</.banner>
<.banner variant="shadow" color="secondary">Shadow Secondary</.banner>

Unbordered Variant

The unbordered variant of the Mishka Chelekom banner is similar to the default variant, but without border.

<.banner variant="unbordered">Unbordered White</.banner>
<.banner variant="unbordered" color="dark">Unbordered Dark</.banner>
<.banner variant="unbordered" color="info">Unbordered Info</.banner>
<.banner variant="unbordered" color="success">Unbordered Success</.banner>
<.banner variant="unbordered" color="warning">Unbordered Warning</.banner>
<.banner variant="unbordered" color="danger">Unbordered Danger</.banner>
<.banner variant="unbordered" color="light">Unbordered Light</.banner>
<.banner variant="unbordered" color="misc">Unbordered Misc</.banner>
<.banner variant="unbordered" color="dawn">Unbordered Dawn</.banner>
<.banner variant="unbordered" color="primary">Unbordered Primary</.banner>
<.banner variant="unbordered" color="secondary">Unbordered Secondary</.banner>

Transparent Variant

The transparent variant of the Mishka Chelekom banner is similar to the default variant, but without border.

<.banner variant="transparent">Transparent White</.banner>
<.banner variant="transparent" color="dark">Transparent Dark</.banner>
<.banner variant="transparent" color="info">Transparent Info</.banner>
<.banner variant="transparent" color="success">Transparent Success</.banner>
<.banner variant="transparent" color="warning">Transparent Warning</.banner>
<.banner variant="transparent" color="danger">Transparent Danger</.banner>
<.banner variant="transparent" color="light">Transparent Light</.banner>
<.banner variant="transparent" color="misc">Transparent Misc</.banner>
<.banner variant="transparent" color="dawn">Transparent Dawn</.banner>
<.banner variant="transparent" color="primary">Transparent Primary</.banner>
<.banner variant="transparent" color="secondary">Transparent Secondary</.banner>

Border prop in Phoenix LiveView banner component

The border prop offers values like extra_small, small, medium, large, and extra_large. These values control the border size of the banner, allowing you to adjust the thickness to suit your design. Additionally, you can use boolean props such as left_border, right_border, hide_border, and full_border to change the border position, add, or remove borders as needed for greater customization.

<.banner border="extra_small">Border extra small of Banner</.banner>
<.banner border="small">Border small of Banner</.banner>
<.banner border="medium">Border medium of Banner</.banner>
<.banner border="large">Border large of Banner</.banner>
<.banner border="extra_large">Border extra large of Banner</.banner>

Border position in Phoenix LiveView banner component

The border_position attribute in the Mishka Chelekom Banner component controls the placement of the border on the banner. It accepts values such as top, bottom, full, and none. By default, the border is positioned at the bottom of the banner. Setting the value to top adds a border at the top, while full applies a border around the entire banner. The none option removes the border entirely, offering full flexibility in banner styling.

<.banner border_position="top">Border top of Banner</.banner>
<.banner border_position="bottom">Border bottom of Banner</.banner>
<.banner border_position="all">Border full of Banner</.banner>
<.banner border_position="none">No border on Banner</.banner>

Rounded and Rounded Position props

The rounded and rounded_position props in the Phoenix LiveView banner component provide flexibility for customizing the border radius of the banner's corners. By default, no border radius is applied (i.e., rounded="none and rounded_position="none), meaning the banner’s corners will remain sharp. However, if you wish to apply a rounded effect, you can specify a value for the rounded prop, which controls the size of the rounding (e.g., extra_small, small, medium, large, extra_large). Once you’ve set the rounding size, you can further refine the look by choosing a value for the rounded_position prop to determine which corners are rounded. For instance, setting rounded_position="top will only round the top corners, rounded_position="bottom will round just the bottom corners, and rounded_position="all will round all four corners of the banner. This combination allows for customizable and visually appealing banners that fit the design needs of your Phoenix LiveView application.

<.banner rounded="extra_small" rounded_position="top">extra small (top)</.banner>
<.banner rounded="extra_small" rounded_position="bottom">extra small (bottom)</.banner>
<.banner rounded="extra_small" rounded_position="all">extra small (all)</.banner>

<.banner rounded="small" rounded_position="top">small (top)</.banner>
<.banner rounded="small" rounded_position="bottom">small (bottom)</.banner>
<.banner rounded="small" rounded_position="all">small (all)</.banner>

<.banner rounded="medium" rounded_position="top">medium (top)</.banner>
<.banner rounded="medium" rounded_position="bottom">medium (bottom)</.banner>
<.banner rounded="medium" rounded_position="all">medium (all)</.banner>

<.banner rounded="large" rounded_position="top">large (top)</.banner>
<.banner rounded="large" rounded_position="bottom">large (bottom)</.banner>
<.banner rounded="large" rounded_position="all">large (all)</.banner>

<.banner rounded="extra_large" rounded_position="top">extra large (top)</.banner>
<.banner rounded="extra_large" rounded_position="bottom">extra large (bottom)</.banner>
<.banner rounded="extra_large" rounded_position="all">extra large (all)</.banner>

<.banner rounded="none" rounded_position="none">None</.banner>

Space prop

The space prop in the Phoenix LiveView banner component provides various spacing options, including extra_small, small, medium, large, and extra_large. These options define the vertical spacing between elements, with increasing amounts of space from extra_small to extra_large. If no specific value is provided, the default is set to extra_small, but custom values can also be applied when needed.

<.banner space="extra_small">Space extra small</.banner>
<.banner space="small">Space small</.banner>
<.banner space="medium">Space medium</.banner>
<.banner space="large">Space large</.banner>
<.banner space="extra_large">Space extra large</.banner>
<.banner space="none">Space none</.banner>

Padding prop

The padding in the Phoenix LiveView banner component provides various padding size options, including extra_small, small, medium, large, and extra_large. These options define the amount of space between the content inside the banner and its edges, with increasing amounts of padding from extra_small to extra_large. If no specific value is provided, the default padding is set to extra_small, ensuring a balanced and consistent look for the component.

<.banner padding="extra_small">Padding extra small</.banner>
<.banner padding="small">Padding small</.banner>
<.banner padding="medium">Padding medium</.banner>
<.banner padding="large">Padding large</.banner>
<.banner padding="extra_large">Padding extra large</.banner>
<.banner padding="none">Padding none</.banner>

Font weight prop

The font_weight prop in the Phoenix LiveView banner component allows you to customize the font weight of the text within the banner using Tailwind CSS classes. By default, it is set to font-normal, giving the text a regular weight. However, you can easily modify this by passing a different Tailwind class for font weight, such as font-bold to make the text bold, or other classes like font-light or font-medium to adjust the thickness of the text as per your design needs. This flexibility allows for easy control over the typography within the banner, ensuring it aligns with the desired visual hierarchy.

<.banner font_weight="font-thin">Font thin</.banner>
<.banner font_weight="font-extralight">Font extralight</.banner>
<.banner font_weight="font-light">Font light</.banner>
<.banner font_weight="font-normal">Font normal</.banner>
<.banner font_weight="font-medium">Font medium</.banner>
<.banner font_weight="font-semibold">Font semibold</.banner>
<.banner font_weight="font-bold">Font bold</.banner>
<.banner font_weight="font-extrabold">Font extrabold</.banner>
<.banner font_weight="font-black">Font black</.banner>

Vertical position and vertical size props in Phoenix LiveView banner component

The vertical_position and vertical_size props in the Phoenix LiveView banner component give you control over where the banner appears vertically on the screen and how much space is between the banner and the screen's edge. The vertical_position prop can be set to either top or bottom, determining whether the banner is aligned at the top or bottom of the viewport. Meanwhile, the vertical_size prop adjusts the spacing, with options like none, extra_small, small, medium, large, and extra_large. These size values control how much space is applied between the banner and the top or bottom edge, allowing you to tailor the layout according to your design needs, whether you want the banner to be flush against the edge or spaced further away.

<.banner vertical_position="top" vertical_size="none">
  Font light (Top No Size)
</.banner>

<.banner vertical_position="top" vertical_size="extra_small">
  Font light (Top Extra Small)
</.banner>

<.banner vertical_position="top" vertical_size="small">
  Font light (Top Small)
</.banner>

<.banner vertical_position="top" vertical_size="medium">
  Font light (Top Medium)
</.banner>

<.banner vertical_position="top" vertical_size="large">
  Font light (Top Large)
</.banner>

<.banner vertical_position="top" vertical_size="extra_large">
  Font light (Top Extra Large)
</.banner>

<.banner vertical_position="bottom" vertical_size="none">
  Font thin (Bottom No Size)
</.banner>

<.banner vertical_position="bottom" vertical_size="extra_small">
  Font thin (Bottom Extra Small)
</.banner>

<.banner vertical_position="bottom" vertical_size="small">
  Font thin (Bottom Small)
</.banner>

<.banner vertical_position="bottom" vertical_size="medium">
  Font thin (Bottom Medium)
</.banner>

<.banner vertical_position="bottom" vertical_size="large">
  Font thin (Bottom Large)
</.banner>

<.banner vertical_position="bottom" vertical_size="extra_large">
  Font thin (Bottom Extra Large)
</.banner>

<.banner vertical_size="none">Font black (No Size)</.banner>

<.banner vertical_size="extra_small">Font black (Extra Small)</.banner>

<.banner vertical_size="small">Font black (Small)</.banner>

<.banner vertical_size="medium">Font black (Medium)</.banner>

<.banner vertical_size="large">Font black (Large)</.banner>

<.banner vertical_size="extra_large">Font black (Extra Large)</.banner>

Position and position size props

The position and position_size props in the Phoenix LiveView banner component allow for flexible control over the horizontal and vertical placement of the banner. The position prop offers various alignment options, such as top_left, top_right, bottom_left, bottom_right, center, and full. These determine where the banner will be placed on the screen. The position_size prop adds even more flexibility by controlling the distance between the banner and the edges of the viewport. You can choose values like none, extra_small, small, medium, large, and extra_large, adjusting how far the banner is from the specified position, whether it's on the top-left, top-right, bottom-left, or bottom-right. This allows for precise control over banner placement, ensuring it fits the layout and design requirements of the application.

<.banner vertical_position="top" vertical_size="none">
  Top No Size
</.banner>

<.banner vertical_position="top" vertical_size="extra_small">
  Top Extra Small
</.banner>

<.banner vertical_position="top" vertical_size="small">
  Top Small
</.banner>

<.banner vertical_position="top" vertical_size="medium">
  Top Medium
</.banner>

<.banner vertical_position="top" vertical_size="large">
  Top Large
</.banner>

<.banner vertical_position="top" vertical_size="extra_large">
  Top Extra Large
</.banner>

<.banner vertical_position="bottom" vertical_size="none">
  Bottom No Size
</.banner>

<.banner vertical_position="bottom" vertical_size="extra_small">
  Bottom Extra Small
</.banner>

<.banner vertical_position="bottom" vertical_size="small">
  Bottom Small
</.banner>

<.banner vertical_position="bottom" vertical_size="medium">
  Bottom Medium
</.banner>

<.banner vertical_position="bottom" vertical_size="large">
  Bottom Large
</.banner>

<.banner vertical_position="bottom" vertical_size="extra_large">
  Bottom Extra Large
</.banner>

<.banner position="top_left" position_size="none">
  Top Left No Size
</.banner>

<.banner position="top_left" position_size="extra_small">
  Top Left Extra Small
</.banner>

<.banner position="top_left" position_size="small">
  Top Left Small
</.banner>

<.banner position="top_left" position_size="medium">
  Top Left Medium
</.banner>

<.banner position="top_left" position_size="large">
  Top Left Large
</.banner>

<.banner position="top_left" position_size="extra_large">
  Top Left Extra Large
</.banner>

<.banner position="top_right" position_size="none">
  Top Right No Size
</.banner>

<.banner position="top_right" position_size="extra_small">
  Top Right Extra Small
</.banner>

<.banner position="top_right" position_size="small">
  Top Right Small
</.banner>

<.banner position="top_right" position_size="medium">
  Top Right Medium
</.banner>

<.banner position="top_right" position_size="large">
  Top Right Large
</.banner>

<.banner position="top_right" position_size="extra_large">
  Top Right Extra Large
</.banner>

<.banner position="bottom_left" position_size="none">
  Bottom Left No Size
</.banner>

<.banner position="bottom_left" position_size="extra_small">
  Bottom Left Extra Small
</.banner>

<.banner position="bottom_left" position_size="small">
  Bottom Left Small
</.banner>

<.banner position="bottom_left" position_size="medium">
  Bottom Left Medium
</.banner>

<.banner position="bottom_left" position_size="large">
  Bottom Left Large
</.banner>

<.banner position="bottom_left" position_size="extra_large">
  Bottom Left Extra Large
</.banner>

<.banner position="bottom_right" position_size="none">
  Bottom Right No Size
</.banner>

<.banner position="bottom_right" position_size="extra_small">
  Bottom Right Extra Small
</.banner>

<.banner position="bottom_right" position_size="small">
  Bottom Right Small
</.banner>

<.banner position="bottom_right" position_size="medium">
  Bottom Right Medium
</.banner>

<.banner position="bottom_right" position_size="large">
  Bottom Right Large
</.banner>

<.banner position="bottom_right" position_size="extra_large">
  Bottom Right Extra Large
</.banner>

<.banner position="center">Center</.banner>

<.banner position="full">Full Width</.banner>

Dismiss button position

The right_dismiss and left_dismiss props are boolean attributes in the Phoenix LiveView banner component that control the placement of the dismiss button. When right_dismiss is set to true, the dismiss button appears on the right side of the banner, allowing users to close the banner from that side. Similarly, setting left_dismiss to true places the dismiss button on the left side of the banner. By default, if neither prop is specified, the dismiss button will be positioned on the left side, as the left_dismiss behavior is considered the default. These options provide flexibility for aligning the dismiss button based on the design and user interaction needs.

All components that have a dismiss button. When performing the operation, it sends an event to the server. for example


  handle_event("dismiss", params, socket)

<.banner right_dismiss>Right dismiss</.banner>
<.banner left_dismiss>Left dismiss (default)</.banner>

Banner component props

Name	Type	Required	Description
id	string	Yes	A unique identifier used to manage state and interaction.
size	string	No	Determines the overall size of the elements, including padding, font size, and other items. Default: large.
variant	string	No	Determines the style of the banner. Supported values: default, outline, transparent, shadow, unbordered.
color	string	No	Determines the color theme of the banner. Supported values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn.
border	string	No	Determines the border style. Default: extra_small.
border_position	string	No	Determines the border position. Supported values: top, bottom, full, none.
rounded	string	No	Determines the border radius. Supported values: extra_small, small, medium, large, extra_large, none.
rounded_position	string	No	Determines the rounded position. Supported values: top, bottom, all, none.
space	string	No	Space between items. Supported values: extra_small, small, medium, large, extra_large, none.
vertical_position	string	No	Specifies the vertical position of the banner. Supported values: top, bottom. Default: top.
vertical_size	string	No	Specifies the vertical size of the element. Default: none.
position	string	No	Determines the element position. Supported values: top_left, top_right, bottom_left, bottom_right, center, full. Default: full.
position_size	string	No	Determines the size for positioning the element. Supported values: extra_small, small, medium, large, extra_large, none. Default: none.
font_weight	string	No	Determines custom class for the font weight. Default: font-normal.
padding	string	No	Determines padding for items. Supported values: extra_small, small, medium, large, extra_large, none. Default: extra_small.
class	string	No	Custom CSS class for additional styling.
right_dismiss	boolean	No	Adds a dismiss button positioned on the right side of the banner.
left_dismiss	boolean	No	Adds a dismiss button positioned on the left side of the banner.

Banner CLI Arguments

Name	Type	Options	Recommended?
`--variant`	string	default - outline - transparent - shadow - unbordered	Yes
`--color`	string	white - primary - secondary - dark - success - warning - danger - info - light - misc - dawn	Yes
`--size`	string	extra_small - small - medium - large - extra_large	Yes
`--space`	string	extra_small - small - medium - large - extra_large - none	Yes
`--rounded`	string	extra_small - small - medium - large - extra_large - none	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--only`	string	banner	Yes
`--module`	string	Something	NO