Nagging Penguin Matriarchs

    @forter/modal

    4.5.0 • Public • Published

    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

    Install

    npm i @forter/modal

    DownloadsWeekly Downloads

    27

    Version

    4.5.0

    License

    Apache-2.0

    Unpacked Size

    124 kB

    Total Files

    51

    Last publish

    Collaborators

    • forter-npm
    • lirown
    • oweingart