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 |