Modal from Forter Components
npm install @forter/modalA Container element for showing up a popup for different use cases.
``html`
Hello, this is the modal content.
`html
The Forter Decision Dashboard has some updates for you! Please refresh your browser window now.
Ch-ch-ch-changes.. ♪
Refresh Time!
Add New User
First Name
Last Name
Email
Role
User Access
discard this claim?
this is a multi line description text discard the claim lorem ipsum.
dismissed
apply!
`
| 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.opened
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 | boolean | false | Whether the modal is open |state
| | | any | | |toggleSlot
| | | any | | |width
| | width | string | | Width of the modal |
| Event |
|------------------|
| opened-changed |
| Name | Description |
|----------|---------------|
| | modal content |
| toggle | toggle button |
| 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` |