@flk/modal

Modal

A simple lightweight modal implementation for FalakJS.

Installation

flk install flk-modal

Table of contents

• Modal
• Installation
• Table of contents
• Usage
  • Using the close event
• Available attributes
• Configurations

Usage

In any component you want to use the modal, just include it with an if statement.

home-page.component.html

<h1>Home sweet home</h1>

<flk-modal *if="this.showProfile" header="My profile info">
  <!-- Modal body here -->
</flk-modal>

Using the close event

As the *if statement is used to initialize the modal component, we need to tell the component when it closes to change our if criteria so the modal no longer be opened.

close event handles this case.

home-page.component.html

<h1>Home sweet home</h1>

<flk-modal *if="this.showProfile" (close)="this.showProfile = null" header="My profile info">
  <!-- Modal body here -->
</flk-modal>

So when the modal is closed, it changes our opening condition to be null thus the modal no longer is opened until the condition showProfile is set to true again.

The header attribute is used to set the modal header text, it could be used as a static attribute header="header text" or a dynamic attribute [header]="this.profileHeader".

Available attributes

Here is the full list of attributes

Attribute	Type	Default value	Description
header	option	N/a	Modal header text.
id	option	Random string	Modal id for more control.
class	option	Random string	The class is passed to the modal content wrapper.
close-keyboard	prop	true	If set to true, the modal will be closed when the user presses esc key.
close-btn	prop	true	If set to true, the modal will be closed when the user clicks on the top close icon.
close-backdrop	prop	true	If set to true, the modal will be closed when the user presses on the dimmed overlay.
theme	prop	default	Default theme is white modal, available options default, dark, dark-transparent.

Configurations

The following list could be set as default value in the config.js file

Main Configuration key: modal

key	Type	Default value	Description
keyboard	Boolean	true	Close the modal when user presses the esc key.
closeBtn	boolean	true	Close the modal when user click on the close icon.
backdrop	boolean	true	Close the modal when the user presses on the dimmed overlay. icon.
theme	string	default	Modal theme, available options default, dark, dark-transparent.