Toggle Button Component
A component for creating toggle buttons with Bootstrap 5 styles.
Core Parameters:
- type: string - Toggle type (button, checkbox, radio) (default: 'button')
- text: string - Button text (required)
- name: string - Input name for radio/checkbox behavior (required for radio/checkbox)
- value: string - Input value (default: '1')
- id: string - Unique identifier (auto-generated if not provided)
Style Parameters:
- variant: string - Button variant (primary, secondary, success, danger, warning, info, light, dark) (default: 'primary')
- size: string - Button size (sm, lg) (optional)
- icon: string - Icon name (e.g., 'arrow-right', 'check') (optional)
- class: string - Additional CSS classes (optional)
State Parameters:
- pressed: boolean - Initial pressed state (default: false)
- disabled: boolean - Disabled state (default: false)
Advanced Parameters:
- attributes: array - Additional HTML attributes (optional)
Examples:
1. Basic Toggle Button:
{{ component('buttons/toggle', {
text: 'Toggle Me',
type: 'button',
variant: 'primary'
}) }}
2. Radio Toggle:
{{ component('buttons/toggle', {
type: 'radio',
name: 'options',
value: 'option1',
text: 'Option 1',
variant: 'success'
}) }}
3. Checkbox with Icon:
{{ component('buttons/toggle', {
type: 'checkbox',
name: 'features',
text: 'Enable Feature',
icon: 'check',
variant: 'info'
}) }}
All available options for the Toggle component
ThemedComponent::make("buttons/toggle")
->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional CSS classes (optional)
->disabled('value') //boolean - Disabled state (default: false)
->icon('value') //string - Icon name (e.g., 'arrow-right', 'check') (optional)
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->name('value') //string - Input name for radio/checkbox behavior (required for radio/checkbox)
->pressed('value') //boolean - Initial pressed state (default: false)
->size('value') //string - Button size (sm, lg) (optional)
->text('value') //string - Button text (required)
->type('value') //string - Toggle type (button, checkbox, radio) (default: 'button')
->value('value') //string - Input value (default: '1')
->variant('value') //string - Button variant (primary, secondary, success, danger, warning, info, light, dark) (default: 'primary')
->render();
Different types of toggle buttons: button, checkbox, and radio
// Button toggle
echo ThemedComponent::make('buttons/toggle')
->text('Button Toggle')
->type('button')
->render();
// Checkbox toggle
echo ThemedComponent::make('buttons/toggle')
->text('Checkbox Toggle')
->type('checkbox')
->name('feature1')
->render();
// Radio toggles
echo ThemedComponent::make('buttons/toggle')
->text('Option 1')
->type('radio')
->name('options')
->value('1')
->render();
echo ThemedComponent::make('buttons/toggle')
->text('Option 2')
->type('radio')
->name('options')
->value('2')
->render();Toggle buttons in different states: pressed and disabled
// Pressed state
echo ThemedComponent::make('buttons/toggle')
->text('Pressed Toggle')
->pressed(true)
->render();
// Disabled state
echo ThemedComponent::make('buttons/toggle')
->text('Disabled Toggle')
->disabled(true)
->render();Toggle buttons with different styles and features
// Primary variant
echo ThemedComponent::make('buttons/toggle')
->text('Primary Toggle')
->variant('primary')
->render();
// Success variant with icon
echo ThemedComponent::make('buttons/toggle')
->text('Success Toggle')
->variant('success')
->icon('check')
->render();
// Info variant with custom attributes
echo ThemedComponent::make('buttons/toggle')
->text('Info Toggle')
->variant('info')
->attributes(['data-custom' => 'value'])
->render();Toggle buttons in different sizes with custom classes
// Large toggle
echo ThemedComponent::make('buttons/toggle')
->text('Large Toggle')
->size('lg')
->render();
// Small toggle with custom class
echo ThemedComponent::make('buttons/toggle')
->text('Small Toggle')
->size('sm')
->class('custom-toggle')
->render();The Twig template file for the Toggle component
{# Toggle Button Component
A component for creating toggle buttons with Bootstrap 5 styles.
Core Parameters:
- type: string - Toggle type (button, checkbox, radio) (default: 'button')
- text: string - Button text (required)
- name: string - Input name for radio/checkbox behavior (required for radio/checkbox)
- value: string - Input value (default: '1')
- id: string - Unique identifier (auto-generated if not provided)
Style Parameters:
- variant: string - Button variant (primary, secondary, success, danger, warning, info, light, dark) (default: 'primary')
- size: string - Button size (sm, lg) (optional)
- icon: string - Icon name (e.g., 'arrow-right', 'check') (optional)
- class: string - Additional CSS classes (optional)
State Parameters:
- pressed: boolean - Initial pressed state (default: false)
- disabled: boolean - Disabled state (default: false)
Advanced Parameters:
- attributes: array - Additional HTML attributes (optional)
Examples:
1. Basic Toggle Button:
{{ component('buttons/toggle', {
text: 'Toggle Me',
type: 'button',
variant: 'primary'
}) }}
2. Radio Toggle:
{{ component('buttons/toggle', {
type: 'radio',
name: 'options',
value: 'option1',
text: 'Option 1',
variant: 'success'
}) }}
3. Checkbox with Icon:
{{ component('buttons/toggle', {
type: 'checkbox',
name: 'features',
text: 'Enable Feature',
icon: 'check',
variant: 'info'
}) }}
#}
{% set button_classes = ['btn'] %}
{# Add variant class #}
{% set variant = content.variant|default('primary') %}
{% set button_classes = button_classes|merge(['btn-' ~ variant]) %}
{# Add size class #}
{% if content.size %}
{% set button_classes = button_classes|merge(['btn-' ~ content.size]) %}
{% endif %}
{# Add custom classes #}
{% if content.class %}
{% set button_classes = button_classes|merge([content.class]) %}
{% endif %}
{# Determine the type #}
{% set type = content.type|default('button') %}
{% set input_type = type == 'radio' ? 'radio' : (type == 'checkbox' ? 'checkbox' : null) %}
{% if input_type %}
{# Radio/Checkbox toggle #}
{% set toggle_id = content.id|default('toggle-' ~ random(100000)) %}
<input
type="{{ input_type }}"
class="btn-check"
name="{{ content.name }}"
id="{{ toggle_id }}"
value="{{ content.value|default('1') }}"
{% if content.pressed %}checked{% endif %}
{% if content.disabled %}disabled{% endif %}
autocomplete="off"
>
<label
for="{{ toggle_id }}"
{% else %}
{# Regular toggle button #}
<button
type="button"
data-bs-toggle="button"
aria-pressed="{{ content.pressed|default(false) ? 'true' : 'false' }}"
{% endif %}
class="{{ button_classes|join(' ') }}"
{% if content.disabled %}disabled{% endif %}
{% if content.attributes %}
{% for attr, value in content.attributes %}
{{ attr }}="{{ value }}"
{% endfor %}
{% endif %}
>
{% if content.icon %}
{{ component('icons/icon', { name: content.icon, class: content.text ? 'me-2' : '' }) }}
{% endif %}
{% if content.text is defined %}
{{ content.text }}
{% endif %}
{% if input_type %}
</label>
{% else %}
</button>
{% endif %}