1.3.0 • Published 11 months ago
Last release11 months ago
fc-confirm
An element by Forter
Usage
<script>
import '@forter/confirm';
</script>
<fc-confirm opened>
Are you sure you want to continue?
</fc-confirm>
Examples
<!-- confirm-button-text -->
<fc-confirm opened title="example" confirm-button-text="Foo">confirm text is changed!</fc-confirm>
<!-- cancel-button-text -->
<fc-confirm opened title="example" cancel-button-text="Foo">cancel text is changed</fc-confirm>
<!-- hide-confirm-button -->
<fc-confirm opened title="example" hide-confirm-button>confirm text is changed!</fc-confirm>
<!-- hide-cancel-button -->
<fc-confirm opened title="example" hide-cancel-button>confirm text is changed!</fc-confirm>
<!-- confirm -->
<p> Open: </p>
<fc-button
onclick="
FC.confirm({
title: 'Example',
content: 'Are you a Forker?',
confirmButtonText: 'Yes',
cancelButtonText: 'No'
})
.then((confirmed)=> confirmed ?
FC.toast.success({ message: 'You answered yes!'}) :
FC.toast.danger({ message: 'You answered no!'})
)"
>
Click me!
</fc-button>
<fc-confirm></fc-confirm>
Properties
| Property | Attribute | Type | Default | Description |
|---|
cancelButtonText | cancel-button-text | string | "Cancel" | the text displayed inside the cancel modal |
confirmButtonText | confirm-button-text | string | "Confirm" | the text displayed inside the confirm button |
height | height | string | null | Optional height for the modal |
hideCancelButton | hide-cancel-button | string | false | Hides the cancel button if ture |
hideConfirmButton | hide-confirm-button | string | false | Hides the confirm button if ture |
opened | opened | boolean | false | whether the confirm is open |
title | title | string | null | the text displayed inside the confirm button |
Events
| Event | Description |
|---|
on-cancel | when the cancel/close button was clicked |
on-confirm | when the confirm button was clicked |
on-opened | when opening a confirm you get this event |
CSS Custom Properties
| Property | Description |
|---|
--fc-confirm-height | height |
--fc-confirm-width | width |