wiz-button

wiz-button is a customizable button element designed for e-Detailers. It provides a consistent button UI with configurable text content and click handling capabilities.

Features:

• Customizable button text
• Slot support for custom content
• Click event handling
• Default styling with override options

Learn more about components

• Import and registration
• Property and file types
• Configuration
• Components in eWizard Editor

Properties

The following properties are available:

Property	Type	Default value	Description
goToOptions	object	{...}	Slide object for navigator<br>slides transition.
text	string	Text	The editable text displayed on the content item layout in eWizard Editor.

Events and slots

Event	Parameters	Description
click	(event)	Emitted when the button is clicked. Passes the native click event as parameter

wiz-button uses the default slot to replace the default text with custom content.

Event handling:

methods: {
    handleButtonClick(event) {
        console.log('Button clicked!', event);
// Perform actions on button click
    }
}

Examples

Syntax:

<wiz-button :goToOptions="navigationItem" @click="handlerMethod"></wiz-button>

You can also use Vue event modifiers to handle click:

<wiz-button @click.prevent="handlerMethod"></wiz-button>

You can use custom text directly or using a slot:

<!-- With custom text -->
<wiz-button 
text="<div style='text-align: center; color: white;'>Submit</div>"
@click="handleButtonClick">
</wiz-button>

<!-- With custom content using slot -->
<wiz-button @click="handleButtonClick">
  <div class="custom-content">
    <span>Custom button</span>
    <i class="icon-arrow"></i>
  </div>
</wiz-button>

Example button with icon and text:

<wiz-button @click="submitForm">
  <div style="display: flex; align-items: center; justify-content: center; color: white;">
    <i class="fas fa-save" style="margin-right: 8px;"></i>
    <span>Save changes</span>
  </div>
</wiz-button>