components-steps.md

Components

This theme ships some components (as twig macros) that hide the complexity of rendering the same elements over and over again with the correct HTML.

Steps

Steps has been implemented to simplify the use of the Tabler Steps component.

Parameters

steps() macro, waits for 2 parameters:

Parameter	Description	Type	Default
steps	Array of Step	array	[]
options	Options object	object	{}

Step

Parameter	Description	Type	Default
href	Url href for the step when clicked	string	#
title	Title of the step	string	empty string
description	Description used as title HTML attribute	string	title value
active	Set if item is active	boolean	false
clickable	Allow click on step (change a to span)	boolean	true
attr	Allow custom attributes on step	object	{}
extraClass	Add extra classes on step	string	empty string

Options

Parameter	Description	Type	Default
tooltip	Set if bootstrap tooltip will be shown at step hover	boolean	false
color	Color of the steps	string	primary
counter	Enable step counter on each item	boolean	false
attr	Allow custom attributes on steps container	object	{}
extraClass	Add extra classes on steps container	string	empty string

Usage

{% from '@Tabler/components/steps.html.twig' import steps %}

{{ steps([
    {title : 'Step 1', clickable : false},
    {title : 'Step 2'},
    {title : 'Step 3', active : true},
    {title : 'Step 4', description : 'More detailed description'},
    {title : 'Step 5', href: 'https://www.google.com', clickable : true},
],{
    tooltip : true,
    color: 'red',
    counter : true,
}) }}

Preview

Next steps

Please go back to the Tabler bundle documentation to find out more about using the theme.