@forter/confirm

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