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 natural</.banner> <.banner color="white">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="silver">Default Silver</.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 natural</.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="silver">Outline Silver</.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 natural background in silver mode.
<.banner variant="shadow">Shadow natural</.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="silver">Shadow Silver</.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>
Bordered Variant
The Bordered variant of the Mishka Chelekom card has lighter background and a border. Bordered variant have also white and dark colors which are the same colors in the dark and light mode.
<.banner variant="bordered">Bordered natural</.banner> <.banner variant="bordered" color="dark">Bordered Dark</.banner> <.banner variant="bordered" color="white">Bordered White</.banner> <.banner variant="bordered" color="info">Bordered Info</.banner> <.banner variant="bordered" color="success">Bordered Success</.banner> <.banner variant="bordered" color="warning">Bordered Warning</.banner> <.banner variant="bordered" color="danger">Bordered Danger</.banner> <.banner variant="bordered" color="silver">Bordered Silver</.banner> <.banner variant="bordered" color="misc">Bordered Misc</.banner> <.banner variant="bordered" color="dawn">Bordered Dawn</.banner> <.banner variant="bordered" color="primary">Bordered Primary</.banner> <.banner variant="bordered" color="secondary">Bordered Secondary</.banner>
Transparent Variant
<.banner variant="transparent">Transparent natural</.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="silver">Transparent Silver</.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>
Gradient Variant
<.banner variant="gradient">Gradient natural</.banner> <.banner variant="gradient" color="info">Gradient Info</.banner> <.banner variant="gradient" color="success">Gradient Success</.banner> <.banner variant="gradient" color="warning">Gradient Warning</.banner> <.banner variant="gradient" color="danger">Gradient Danger</.banner> <.banner variant="gradient" color="silver">Gradient Silver</.banner> <.banner variant="gradient" color="misc">Gradient Misc</.banner> <.banner variant="gradient" color="dawn">Gradient Dawn</.banner> <.banner variant="gradient" color="primary">Gradient Primary</.banner> <.banner variant="gradient" color="secondary">Gradient 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</.banner> <.banner rounded="extra_small" rounded_position="bottom">extra small</.banner> <.banner rounded="extra_small" rounded_position="all">extra small</.banner> <.banner rounded="small" rounded_position="top">small</.banner> <.banner rounded="small" rounded_position="bottom">small</.banner> <.banner rounded="small" rounded_position="all">small</.banner> <.banner rounded="medium" rounded_position="top">medium</.banner> <.banner rounded="medium" rounded_position="bottom">medium</.banner> <.banner rounded="medium" rounded_position="all">medium</.banner> <.banner rounded="large" rounded_position="top">large</.banner> <.banner rounded="large" rounded_position="bottom">large</.banner> <.banner rounded="large" rounded_position="all">large</.banner> <.banner rounded="extra_large" rounded_position="top">extra large</.banner> <.banner rounded="extra_large" rounded_position="bottom">extra large</.banner> <.banner rounded="extra_large" rounded_position="all">extra large</.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-silver
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-light">Font Silver</.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"> Vertical </.banner> <.banner vertical_position="top" vertical_size="extra_small"> Vertical </.banner> <.banner vertical_position="top" vertical_size="small"> Vertical </.banner> <.banner vertical_position="top" vertical_size="medium"> Vertical </.banner> <.banner vertical_position="top" vertical_size="large"> Vertical </.banner> <.banner vertical_position="top" vertical_size="extra_large"> Vertical </.banner> <.banner vertical_position="bottom" vertical_size="none"> Vertical </.banner> <.banner vertical_position="bottom" vertical_size="extra_small"> Vertical </.banner> <.banner vertical_position="bottom" vertical_size="small"> Vertical </.banner> <.banner vertical_position="bottom" vertical_size="medium"> Vertical </.banner> <.banner vertical_position="bottom" vertical_size="large"> Vertical </.banner> <.banner vertical_position="bottom" vertical_size="extra_large"> Vertical </.banner> <.banner vertical_size="none">Vertical</.banner> <.banner vertical_size="extra_small">Vertical</.banner> <.banner vertical_size="small">Vertical</.banner> <.banner vertical_size="medium">Vertical</.banner> <.banner vertical_size="large">Vertical</.banner> <.banner vertical_size="extra_large">Vertical</.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 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.
handle_event("dismiss", params, socket)
<.banner right_dismiss>Right dismiss</.banner> <.banner left_dismiss>Left dismiss</.banner>