Lists Component
A Bootstrap 5 component for creating various types of lists with flexible styling options.
Parameters:
Core Options:
- type: string - Type of list (required)
Values: 'unordered', 'ordered', 'unstyled', 'inline', 'description'
- items: array - List items (required for non-description lists)
- class: string - Additional CSS classes
- attributes: array - Additional HTML attributes
Description List Options:
- terms: array - List of terms (required for description lists)
- descriptions: array - List of descriptions (required for description lists)
- horizontal: boolean - Display list horizontally (default: false)
- breakpoint: string - Breakpoint for horizontal layout
Values: 'sm', 'md', 'lg', 'xl', 'xxl'
Inline List Options:
- separator: string - Custom separator between inline items
Example Usage:
Basic List:
{{ component('content/lists', {
type: 'unordered',
items: [
'First item',
'Second item with <strong>bold</strong> text',
'Third item'
]
}) }}
Description List:
{{ component('content/lists', {
type: 'description',
terms: ['Term 1', 'Term 2'],
descriptions: ['Description 1', 'Description 2'],
horizontal: true,
breakpoint: 'md'
}) }}
Inline List with Separator:
{{ component('content/lists', {
type: 'inline',
items: ['Home', 'Products', 'About'],
separator: ' | '
}) }}
All available options for the Lists component
ThemedComponent::make("content/lists")
->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)
->breakpoint('value') //string - Breakpoint for horizontal layout
->canSee('value') //bool - Whether the component should be visible or not (optional)
->class('value') //string - Additional CSS classes
->descriptions('value') //array - List of descriptions (required for description lists)
->horizontal('value') //boolean - Display list horizontally (default: false)
->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
->items('value') //array - List items (required for non-description lists)
->separator('value') //string - Custom separator between inline items
->terms('value') //array - List of terms (required for description lists)
->type('value') //string - Type of list (required)
->render();
Simple unordered and ordered lists
// Unordered list
echo ThemedComponent::make('content/lists')
->type('unordered')
->items([
'First item',
'Second item',
'Third item with <strong>bold</strong> text',
'Fourth item'
])
->render();
// Ordered list
echo ThemedComponent::make('content/lists')
->type('ordered')
->items([
'Step one',
'Step two',
'Step three',
'Step four'
])
->render();Unstyled and description lists with custom layouts
// Unstyled list
echo ThemedComponent::make('content/lists')
->type('unstyled')
->items([
'No bullets or numbers',
'Clean and minimal',
'Great for custom styling'
])
->render();
// Description list
echo ThemedComponent::make('content/lists')
->type('description')
->terms([
'HTML',
'CSS',
'JavaScript'
])
->descriptions([
'The structure of web pages',
'The styling language for web pages',
'The programming language of the web'
])
->horizontal(true)
->breakpoint('md')
->render();Different list styles including inline and custom formatting
// Inline list with separator
echo ThemedComponent::make('content/lists')
->type('inline')
->items([
'Home',
'Products',
'Services',
'Contact'
])
->separator(' | ')
->render();
// Custom styled list
echo ThemedComponent::make('content/lists')
->type('unordered')
->items([
'<span class="text-primary">Primary text</span>',
'<span class="text-success">Success text</span>',
'<span class="text-danger">Danger text</span>'
])
->class('text-large')
->render();The Twig template file for the Lists component
{# Lists Component
A Bootstrap 5 component for creating various types of lists with flexible styling options.
Parameters:
Core Options:
- type: string - Type of list (required)
Values: 'unordered', 'ordered', 'unstyled', 'inline', 'description'
- items: array - List items (required for non-description lists)
- class: string - Additional CSS classes
- attributes: array - Additional HTML attributes
Description List Options:
- terms: array - List of terms (required for description lists)
- descriptions: array - List of descriptions (required for description lists)
- horizontal: boolean - Display list horizontally (default: false)
- breakpoint: string - Breakpoint for horizontal layout
Values: 'sm', 'md', 'lg', 'xl', 'xxl'
Inline List Options:
- separator: string - Custom separator between inline items
Example Usage:
Basic List:
{{ component('content/lists', {
type: 'unordered',
items: [
'First item',
'Second item with <strong>bold</strong> text',
'Third item'
]
}) }}
Description List:
{{ component('content/lists', {
type: 'description',
terms: ['Term 1', 'Term 2'],
descriptions: ['Description 1', 'Description 2'],
horizontal: true,
breakpoint: 'md'
}) }}
Inline List with Separator:
{{ component('content/lists', {
type: 'inline',
items: ['Home', 'Products', 'About'],
separator: ' | '
}) }}
#}
{% set tag = 'ul' %}
{% set classes = [] %}
{# Determine list type and classes #}
{% if content.type == 'ordered' %}
{% set tag = 'ol' %}
{% elseif content.type == 'unstyled' %}
{% set classes = classes|merge(['list-unstyled']) %}
{% elseif content.type == 'inline' %}
{% set classes = classes|merge(['list-inline']) %}
{% elseif content.type == 'description' %}
{% set tag = 'dl' %}
{% if content.horizontal %}
{% set classes = classes|merge(['row']) %}
{% if content.breakpoint %}
{% set classes = classes|merge(['row-cols-' ~ content.breakpoint]) %}
{% endif %}
{% endif %}
{% endif %}
{# Add custom classes #}
{% if content.class %}
{% set classes = classes|merge([content.class]) %}
{% endif %}
<{{ tag }}
{% if classes|length > 0 %}class="{{ classes|join(' ')|trim }}"{% endif %}
{% if content.attributes %}
{% for attr, value in content.attributes %}
{{ attr }}="{{ value }}"
{% endfor %}
{% endif %}
>
{% if content.type == 'description' %}
{% for i in 0..((content.terms|length) - 1) %}
{% if content.horizontal %}
<div class="row mb-3">
<dt class="col-sm-3">{{ content.terms[i]|raw }}</dt>
<dd class="col-sm-9">{{ content.descriptions[i]|raw }}</dd>
</div>
{% else %}
<dt>{{ content.terms[i]|raw }}</dt>
<dd>{{ content.descriptions[i]|raw }}</dd>
{% endif %}
{% endfor %}
{% else %}
{% for item in content.items %}
<li{% if content.type == 'inline' %} class="list-inline-item"{% endif %}>
{% if content.type == 'inline' and content.separator and not loop.last %}
{{ item|raw }}<span class="list-inline-separator">{{ content.separator|raw }}</span>
{% else %}
{{ item|raw }}
{% endif %}
</li>
{% endfor %}
{% endif %}
</{{ tag }}>