@forter/modal

fc-modal

A Container element for showing up a popup for different use cases.

Usage

<fc-modal>
   <fc-button slot="toggle" icon="forter" tooltip="Click to Open!"></fc-button>
   Hello, this is the modal content.
</fc-modal>

Examples

<!-- alert -->

<fc-modal demo-opened width="400px" height="220px">
  <fc-button slot="toggle" label="Click to Toggle Modal" icon="forter">
  </fc-button>
  <h1>Ch-ch-ch-changes.. ♪</h1>
  <p>The Forter Decision Dashboard has some updates for you!</p>
  <p>Please refresh your browser window now.</p>
  <fc-layout>
   <fc-button intent="apply" data-reason="apply" onClick="location.reload()">
      Refresh Time!
    </fc-button>
   </fc-layout>
</fc-modal>

<!-- dataEntry -->

<fc-modal demo-opened  height="400px" width="600px">
   <style>
      .item span {
        color: var(--fc-gray-600);
        font-size: 12px;
      }
   </style>
   <fc-button slot="toggle" label="Click to Toggle Modal" icon="forter"></fc-button>
   <h1>Add New User</h1>
   <fc-layout id="modal-content" rows="2" columns="2" gap="10px" flowColumns>
     <fc-layout flowColumns class="item">
       <span>First Name</span>
       <fc-input></fc-input>
     </fc-layout>

     <fc-layout flowColumns class="item">
       <span>Last Name</span>
       <fc-input></fc-input>
     </fc-layout>

     <fc-layout flowColumns class="item">
       <span>Email</span>
       <fc-input type="email"></fc-input>
     </fc-layout>

     <fc-layout flowColumns id="role" class="item">
       <span>Role</span>
       <fc-dropdown triggerLabel="trigger me">
  <fc-dropdown-item>User</fc-dropdown-item>icon
  <fc-dropdown-item>Support</fc-dropdown-item>
  <fc-dropdown-item>Admin</fc-dropdown-item>
       </fc-dropdown>
     </div>
   </fc-layout>

   <span column-start="1" column-end="3"> User Access </span>

   <fc-radio-group column-start="1" column-end="3">
        <fc-radio checked label="Allow user to access all related sites" value="all-sites-access"></fc-radio>
        <fc-radio label="Specify sites for user to access (at least 1 site)" value="specific-sites-access"></fc-radio>
   </fc-radio-group>

   <fc-button intent="cancel">Cancel</fc-button>
   <fc-button intent="apply">Apply</fc-button>

  </fc-layout>
</fc-modal>

<!-- areYouSure -->

<fc-modal demo-opened height="200px" width="300px">
   <fc-button slot="toggle">show modal</fc-button>
   <h1>discard this claim?</h1>
   <p>
   this is a multi line description text discard the claim lorem ipsum.
   </p>
   <fc-layout flowColumns columns=2>
   <fc-button intent="cancel" slot="cancel-button" data-reason="dismissed">
     dismissed
   </fc-button>
   <fc-button intent="apply" slot="accept-button" data-reason="apply">
     apply!
   </fc-button>
   </fc-layout>
</fc-modal>

Properties

Property	Attribute	Type	Default	Description
background		any
buttonSlots		any
height	height	string		Height of the modal
nonCloseable	non-closeable	boolean	false	Whether the user is able to close the modal. In some specific, rare cases ( e.g. a refresh modal) the user should not be able to close the modal until the desired action is performed.
opened	opened	boolean	false	Whether the modal is open
state		any
toggleSlot		any
width	width	string		Width of the modal

Events

Event
opened-changed

Slots

Name	Description
	modal content
toggle	toggle button

CSS Custom Properties

Property	Description
--fc-modal-background	modal's background. default: var(--fc-gray-100)
--fc-modal-border-radius	modal's border radius. default: 6px
--fc-modal-box-shadow	modal's drop-shadow. default: none
--fc-modal-height	modal's height. default: 636px
--fc-modal-overflow	modal's content overflow. default: auto
--fc-modal-padding	modal's padding. default: 20px 40px
--fc-modal-width	modal's width. default: 636px
--fc-modal-z-index	modal's z-index. default: 3