List Group Component
A Bootstrap 5 component for creating flexible and interactive lists with various styling options.
Parameters:
Core Options:
- items: array - Array of list items (required)
- text: string - Text content of the item (required)
- active: boolean - Whether the item is active (default: false)
- disabled: boolean - Whether the item is disabled (default: false)
- variant: string - Color variant (primary, secondary, success, danger, warning, info, light, dark)
- href: string - URL for link items (transforms item into anchor)
- icon: string - Icon class to display before text (e.g., 'bi bi-star')
Badge Options:
- badge: array - Badge configuration for list items
- text: string - Badge text (required if badge is used)
- variant: string - Badge variant (same values as item variant, default: primary)
Layout Options:
- flush: boolean - Remove outer borders and rounded corners (default: false)
- numbered: boolean - Show numbers before items (default: false)
- horizontal: boolean|string - Display horizontally
Values: true, 'sm', 'md', 'lg', 'xl', 'xxl'
- class: string - Additional CSS classes
Example Usage:
{{ component('content/list-group', {
items: [
{
text: 'Active item',
active: true,
variant: 'primary'
},
{
text: 'Item with badge',
badge: {
text: 'New',
variant: 'danger'
}
},
{
text: 'Linked item',
href: '#',
icon: 'bi bi-link'
}
],
numbered: true,
horizontal: 'md'
}) }}
All available options for the List-group component
ThemedComponent::make("content/list-group")
->active('value') //boolean - Whether the item is active (default: false)
->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)
->badge('value') //array - Badge configuration for list items
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional CSS classes
->disabled('value') //boolean - Whether the item is disabled (default: false)
->flush('value') //boolean - Remove outer borders and rounded corners (default: false)
->horizontal('value') //boolean|string - Display horizontally
->href('value') //string - URL for link items (transforms item into anchor)
->icon('value') //string - Icon class to display before text (e.g., 'bi bi-star')
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->items('value') //array - Array of list items (required)
->numbered('value') //boolean - Show numbers before items (default: false)
->text('value') //string - Badge text (required if badge is used)
->variant('value') //string - Badge variant (same values as item variant, default: primary)
->render();
Simple list group with text items
// Basic list group
echo ThemedComponent::make('content/list-group')
->items([
['text' => 'First item'],
['text' => 'Second item'],
['text' => 'Third item'],
['text' => 'Fourth item']
])
->render();List group with active states, badges, and custom styling
// Advanced list group with active and disabled items
echo ThemedComponent::make('content/list-group')
->items([
[
'text' => 'Active item with badge',
'active' => true,
'badge' => [
'text' => 'New',
'variant' => 'primary'
]
],
[
'text' => 'Item with custom variant',
'variant' => 'success'
],
[
'text' => 'Disabled item',
'disabled' => true
],
[
'text' => '<strong>HTML</strong> content with <em>formatting</em>'
]
])
->render();Different list group styles including horizontal, numbered, and custom content
// Horizontal list group
echo ThemedComponent::make('content/list-group')
->horizontal('md')
->items([
['text' => 'Horizontal at md'],
['text' => 'Responsive layout'],
['text' => 'Stacks on mobile']
])
->render();
// Numbered list group with links
echo ThemedComponent::make('content/list-group')
->numbered(true)
->items([
[
'text' => 'First numbered item',
'href' => '#!'
],
[
'text' => 'Second numbered item',
'href' => '#!',
'active' => true
],
[
'text' => 'Third numbered item',
'href' => '#!'
]
])
->render();
// Flush list group with custom content
echo ThemedComponent::make('content/list-group')
->flush(true)
->items([
[
'content' => '
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">List group item heading</h5>
<small>3 days ago</small>
</div>
<p class="mb-1">Some placeholder content in a paragraph.</p>
<small>And some small print.</small>
'
],
[
'content' => '
<div class="d-flex w-100 justify-content-between">
<h5 class="mb-1">Another heading</h5>
<small>1 day ago</small>
</div>
<p class="mb-1">Some more placeholder content.</p>
<small>Secondary text.</small>
'
]
])
->render();The Twig template file for the List-group component
{# List Group Component
A Bootstrap 5 component for creating flexible and interactive lists with various styling options.
Parameters:
Core Options:
- items: array - Array of list items (required)
- text: string - Text content of the item (required)
- active: boolean - Whether the item is active (default: false)
- disabled: boolean - Whether the item is disabled (default: false)
- variant: string - Color variant (primary, secondary, success, danger, warning, info, light, dark)
- href: string - URL for link items (transforms item into anchor)
- icon: string - Icon class to display before text (e.g., 'bi bi-star')
Badge Options:
- badge: array - Badge configuration for list items
- text: string - Badge text (required if badge is used)
- variant: string - Badge variant (same values as item variant, default: primary)
Layout Options:
- flush: boolean - Remove outer borders and rounded corners (default: false)
- numbered: boolean - Show numbers before items (default: false)
- horizontal: boolean|string - Display horizontally
Values: true, 'sm', 'md', 'lg', 'xl', 'xxl'
- class: string - Additional CSS classes
Example Usage:
{{ component('content/list-group', {
items: [
{
text: 'Active item',
active: true,
variant: 'primary'
},
{
text: 'Item with badge',
badge: {
text: 'New',
variant: 'danger'
}
},
{
text: 'Linked item',
href: '#',
icon: 'bi bi-link'
}
],
numbered: true,
horizontal: 'md'
}) }}
#}
<ul class="list-group{% if content.flush %} list-group-flush{% endif %}{% if content.numbered %} list-group-numbered{% endif %}{% if content.horizontal %}{% if content.horizontal == true %} list-group-horizontal{% else %} list-group-horizontal-{{ content.horizontal }}{% endif %}{% endif %}{% if content.class %} {{ content.class }}{% endif %}">
{%- for item in content.items -%}
{%- set tag = item.href ? 'a' : 'li' -%}
{%- set base_class = 'list-group-item' -%}
{%- set item_class = [
base_class,
item.active ? 'active' : '',
item.disabled ? 'disabled' : '',
item.variant ? 'list-group-item-' ~ item.variant : '',
item.href ? 'list-group-item-action' : ''
]|filter(v => v != '')|join(' ') -%}
<{{ tag }}
{%- if item.href %} href="{{ item.href }}"{% endif %}
class="{{ item_class }}"
{%- if item.disabled %} aria-disabled="true"{% endif %}
{%- if item.active %} aria-current="true"{% endif %}>
{%- if item.icon -%}
<i class="{{ item.icon }} me-2" aria-hidden="true"></i>
{%- endif -%}
{{ item.text|raw }}
{%- if item.badge -%}
<span class="badge {% if item.badge.variant %}bg-{{ item.badge.variant }}{% else %}bg-primary{% endif %} float-end">
{{ item.badge.text }}
</span>
{%- endif -%}
</{{ tag }}>
{%- endfor -%}
</ul>