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 |