@forter/modal NPM

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 modaluntil 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`