Modal

New version v0.0.1 🚀

Interactive modals for Phoenix and Phoenix LiveView, enabling dynamic content display with customizable styles and full-screen mode.

Installation:

mix mishka.ui.gen.component modal

Source: View Source

Package: Mishka Chelekom

Tags:

Component Stateless JS-module

Overview of the Phoenix and LiveView Modal Component

The Mishka Chelekom modal component is a Phoenix LiveView component that provides a dynamic and customizable modal dialog for various use cases like displaying forms, notifications, or confirmation dialogs. It supports multiple configurations, including size, color, border radius, and padding, to fit seamlessly into your application's design.

This Phoenix LiveView component enables developers to easily adjust the modal’s appearance using props for size, colors, and styles. The modal component support full-screen mode options, focus management, and keyboard navigation, this component ensures an engaging and accessible user experience.

By using the class prop, you can apply custom classes or Tailwind CSS classes to customize the components design.

Note: You can use the show_modal and hide_modal functions to show and hide the modal by passing the modal's ID. These functions handle the modal's visibility and transitions, like appearing or disappearing with animations.

The default style of the Mishka Chelekom modal 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.

<.modal id="uniqu_id" color="white">White modal content goes here.</.modal>
<.modal id="uniqu_id" color="primary">Primary modal content goes here.</.modal>
<.modal id="uniqu_id" color="secondary">Secondary modal content goes here.</.modal>
<.modal id="uniqu_id" color="dark">Dark modal content goes here.</.modal>
<.modal id="uniqu_id" color="success">Success modal content goes here.</.modal>
<.modal id="uniqu_id" color="warning">Warning modal content goes here.</.modal>
<.modal id="uniqu_id" color="danger">Danger modal content goes here.</.modal>
<.modal id="uniqu_id" color="info">Info modal content goes here.</.modal>
<.modal id="uniqu_id" color="misc">Misc modal content goes here.</.modal>
<.modal id="uniqu_id" color="dawn">Dawn modal content goes here.</.modal>
<.modal id="uniqu_id" color="light">Light modal content goes here.</.modal>

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

<.modal id="uniqu_id" color="white" variant="outline">White modal content goes here.</.modal>
<.modal id="uniqu_id" color="primary" variant="outline">Primary modal content goes here.</.modal>
<.modal id="uniqu_id" color="secondary" variant="outline">Secondary modal content goes here.</.modal>
<.modal id="uniqu_id" color="dark" variant="outline">Dark modal content goes here.</.modal>
<.modal id="uniqu_id" color="success" variant="outline">Success modal content goes here.</.modal>
<.modal id="uniqu_id" color="warning" variant="outline">Warning modal content goes here.</.modal>
<.modal id="uniqu_id" color="danger" variant="outline">Danger modal content goes here.</.modal>
<.modal id="uniqu_id" color="info" variant="outline">Info modal content goes here.</.modal>
<.modal id="uniqu_id" color="misc" variant="outline">Misc modal content goes here.</.modal>
<.modal id="uniqu_id" color="dawn" variant="outline">Dawn modal content goes here.</.modal>
<.modal id="uniqu_id" color="light" variant="outline">Light modal content goes here.</.modal>

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

<.modal id="uniqu_id" color="white" variant="shadow">White modal content goes here.</.modal>
<.modal id="uniqu_id" color="primary" variant="shadow">Primary modal content goes here.</.modal>
<.modal id="uniqu_id" color="secondary" variant="shadow">Secondary modal content goes here.</.modal>
<.modal id="uniqu_id" color="dark" variant="shadow">Dark modal content goes here.</.modal>
<.modal id="uniqu_id" color="success" variant="shadow">Success modal content goes here.</.modal>
<.modal id="uniqu_id" color="warning" variant="shadow">Warning modal content goes here.</.modal>
<.modal id="uniqu_id" color="danger" variant="shadow">Danger modal content goes here.</.modal>
<.modal id="uniqu_id" color="info" variant="shadow">Info modal content goes here.</.modal>
<.modal id="uniqu_id" color="misc" variant="shadow">Misc modal content goes here.</.modal>
<.modal id="uniqu_id" color="dawn" variant="shadow">Dawn modal content goes here.</.modal>
<.modal id="uniqu_id" color="light" variant="shadow">Light modal content goes here.</.modal>

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

<.modal id="uniqu_id" color="white" variant="unbordered">White modal content goes here.</.modal>
<.modal id="uniqu_id" color="primary" variant="unbordered">Primary modal content goes here.</.modal>
<.modal id="uniqu_id" color="secondary" variant="unbordered">Secondary modal content goes here.</.modal>
<.modal id="uniqu_id" color="dark" variant="unbordered">Dark modal content goes here.</.modal>
<.modal id="uniqu_id" color="success" variant="unbordered">Success modal content goes here.</.modal>
<.modal id="uniqu_id" color="warning" variant="unbordered">Warning modal content goes here.</.modal>
<.modal id="uniqu_id" color="danger" variant="unbordered">Danger modal content goes here.</.modal>
<.modal id="uniqu_id" color="info" variant="unbordered">Info modal content goes here.</.modal>
<.modal id="uniqu_id" color="misc" variant="unbordered">Misc modal content goes here.</.modal>
<.modal id="uniqu_id" color="dawn" variant="unbordered">Dawn modal content goes here.</.modal>
<.modal id="uniqu_id" color="light" variant="unbordered">Light modal content goes here.</.modal>

The transparent variant of the Mishka Chelekom modal is similar to the default variant, but without border and background color.

<.modal id="uniqu_id" color="white" variant="transparent">White modal content goes here.</.modal>
<.modal id="uniqu_id" color="primary" variant="transparent">Primary modal content goes here.</.modal>
<.modal id="uniqu_id" color="secondary" variant="transparent">Secondary modal content goes here.</.modal>
<.modal id="uniqu_id" color="dark" variant="transparent">Dark modal content goes here.</.modal>
<.modal id="uniqu_id" color="success" variant="transparent">Success modal content goes here.</.modal>
<.modal id="uniqu_id" color="warning" variant="transparent">Warning modal content goes here.</.modal>
<.modal id="uniqu_id" color="danger" variant="transparent">Danger modal content goes here.</.modal>
<.modal id="uniqu_id" color="info" variant="transparent">Info modal content goes here.</.modal>
<.modal id="uniqu_id" color="misc" variant="transparent">Misc modal content goes here.</.modal>
<.modal id="uniqu_id" color="dawn" variant="transparent">Dawn modal content goes here.</.modal>
<.modal id="uniqu_id" color="light" variant="transparent">Light modal content goes here.</.modal>

The padding prop allows developers to control the internal spacing around the content within the modal. The padding prop accepts values such as extra_small, small, medium, large, extra_large, and none, offering flexibility in adjusting the space around the content to fit the design requirements.

<.modal id="uniqu_id" padding="extra_small">Extra small padding</.modal>
<.modal id="uniqu_id" padding="small">Small padding</.modal>
<.modal id="uniqu_id" padding="medium">Medium padding</.modal>
<.modal id="uniqu_id" padding="large">Large padding</.modal>
<.modal id="uniqu_id" padding="extra_large">Extra large padding</.modal>
<.modal id="uniqu_id" padding="none">No padding</.modal>

The rounded prop controls the border radius of the modal, determining how rounded the corners of the modal are. The prop accepts values like extra_small, small, medium, large, and extra_large, allowing for customization of the modal’s appearance to align with the overall design. The default value is set to small, giving the modal subtle, rounded edges.

<.modal id="uniqu_id" rounded="extra_small">Extra small rounded</.modal>
<.modal id="uniqu_id" rounded="small">Small rounded</.modal>
<.modal id="uniqu_id" rounded="medium">Medium rounded</.modal>
<.modal id="uniqu_id" rounded="large">Large rounded</.modal>
<.modal id="uniqu_id" rounded="extra_large">Extra large rounded</.modal>
<.modal id="uniqu_id" rounded="none">No rounded</.modal>

The size prop in the Modal component defines the overall size of the modal, including aspects like padding, font size, and layout. This prop accepts a range of size values, such as extra_small, small, medium, large, extra_large, and even larger options like double_large, triple_large, and quadruple_large. Additionally, the screen option can be used to make the modal fill the entire screen. By default, the size is set to extra_large, but developers can easily adjust this prop to fit different content requirements or layout designs.

<.modal id="uniqu_id" size="extra_small">Extra small size</.modal>
<.modal id="uniqu_id" size="small">Small size</.modal>
<.modal id="uniqu_id" size="medium">Medium size</.modal>
<.modal id="uniqu_id" size="large">Large size</.modal>
<.modal id="uniqu_id" size="extra_large">Extra large size</.modal>
<.modal id="uniqu_id" size="double_large">Double large size</.modal>
<.modal id="uniqu_id" size="triple_large">Triple large size</.modal>
<.modal id="uniqu_id" size="quadruple_large">Quadruple large size</.modal>
<.modal id="uniqu_id" size="screen">Screen size</.modal>

The title attribute is used to specify the title of the modal element. This title is typically displayed at the top of the modal, providing users with a clear and concise description of the content or purpose of the modal. It enhances the user experience by giving context and focus to the information or actions within the modal. The title can be customized to suit the modal's content, making it a flexible attribute for naming various types of modals, such as alerts, forms, or informational messages.

<.modal id="uniqu_id" title="Title of modal"></.modal>

The show attribute is a boolean prop that determines the visibility of the modal component. By default, its value is set to false, meaning the modal will remain hidden until explicitly triggered. When set to true, the modal is displayed on the screen, allowing users to interact with its content. This attribute is useful for controlling when the modal should be shown or hidden, making it a key feature in managing dynamic content display based on user actions or programmatic events within the application.

<.modal id="uniqu_id" title="Title of modal" show></.modal>
<.modal id="uniqu_id" title="Title of modal" show={true}></.modal>
<.modal id="uniqu_id" title="Title of modal" show={false}></.modal>

The on_cancel attribute is used to define a custom JavaScript (JS) action that is triggered when the modal is closed or canceled. By default, it is set to an empty %JS{} structure, allowing developers to specify the behavior that should occur when users dismiss the modal, either by clicking a close button, pressing the escape key, or interacting with the modal's background. This attribute enables seamless control over the cancellation process, letting developers integrate specific actions like cleaning up resources, reverting changes, or updating the UI state based on user interaction.

<.modal id="uniqu_id" on_cancel={JS.push("close_modal")}>
  <div class="space-y-4">
    <p>
      Are you sure you want to delete this ite?
    </p>
   <div class="flex gap-4 justify-center">
     <.button class="w-full" color="success">
      Yes
    </.button>
     <.button class="w-full" color="danger" on_cancel>
      Cancel
    </.button>
   </div>
  </div>
</.modal>

Modal Component Props

Name	Type	Required	Description
id	string	Yes	A unique identifier is used to manage state and interaction.
title	string	No	Specifies the title of the modal component.
variant	string	No	Determines the style of the modal. Values: default, outline, transparent, shadow, unbordered.
color	string	No	Determines the color theme of the modal. Values: white, primary, secondary, dark, success, warning, danger, info, light, misc, dawn.
rounded	string	No	Determines the border radius of the modal. Values: extra_small, small, medium, large, extra_large, etc.
padding	string	No	Determines padding for the modal content. Values: extra_small, small, medium, etc. Default is medium.
size	string	No	Determines the overall size of the modal. Values: extra_small, small, large, screen, etc. Default is extra_large.
class	string	No	Custom CSS class for additional styling.
show	boolean	No	Determines whether the modal is visible. Default is false.
on_cancel	JS	No	Custom JavaScript hook for the on_cancel action.

Modal 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
`--rounded`	string	extra_small - small - medium - large - extra_large	Yes
`--padding`	string	extra_small - small - medium - large - extra_large - none	Yes
`--size`	string	extra_small - small - medium - large - extra_large - double_large - triple_large - quadruple_large - screen	Yes
`--only`	string	modal	Yes
`--module`	string	Something	NO