wiz-buttons

Use this component to create and handle actionable buttons in horizontal or vertical layouts, with customizable styles and alignment options.

Learn more about components

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

Usage

Markup:

<wiz-buttons
  :items="[
    {
      name: 'Learn more',
      link: 'https://example.com',
      buttonColor: '#3498db',
      textAlign: 'center',
      width: 150,
    },
    {
      name: 'Contact us',
      link: 'https://example.com/contact',
      buttonColor: '#2ecc71',
      textAlign: 'center',
      width: 150,
    },
  ]"
  :align="'center'"
  :horizontal="true"
/>

The default itemTemplate:

{
  borderFlag: false,
  borderColor: '#2573ba',
  borderWidth: 0,
  borderRadius: 0,
  buttonColor: '#2baadf',
  name: '<strong>Button</strong>',
  textAlign: 'center',
  link: 'https://example.com',
  width: 100,
  dataMsysLinkname: '',
}

The align property supports dynamic alignment adjustments:

<wiz-buttons :align="'center'" />

wiz-buttons adapts to different screen sizes, ensuring buttons stack vertically on smaller screens using the following styles:

@media screen and (max-width: 480px) {
  .wiz-buttons {
    width: 100% !important;
  }
}

Properties

The following properties are available:

Property	Type	Default value	Description
align	string	left	Button text alignment. One of: "center", "left", "right".
horizontal	boolean	true	Defines buttons orientation. If "true", the buttons are displayed in a row. If "false", the buttons are displayed in a column.
items	array	[...]	Array of button objects containing properties like "name", "link", "buttonColor", "textAlign", and "width".
itemTemplate	object	function ()	Defines default styles for buttons if specific properties aren't provided in the "items" array.
paddingLeftRight	number	20	Left and right padding for buttons.
paddingTopBottom	number	15	Top and bottom padding for buttons.