Skip to content

Commit

Permalink
updated docs and changed underscore to camelCase
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinpapst
kevinpapst committed Aug 31, 2022
1 parent aee7037 commit 1710f93
Show file tree
Hide file tree
Showing 3 changed files with 81 additions and 82 deletions.
108 changes: 54 additions & 54 deletions docs/components-carousel.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,71 +15,71 @@ See Tabler documentation at https://preview.tabler.io/carousel.html
| options | [Options](#Options) object | `object` | `{}` |

#### Item
| Parameter | Description | Type | Default |
|:-----------:|--------------------------------------------|:---------:|:-----------------:|
| image | Path to an image | `string` | |
| custom_content | Custom html content. overrides `image` if set. | `html (raw)` | `null` |
| title | Item title. | `string` | `null` |
| description | Item description. | `string` | `null` |

`item()` parameter requires either the `image` or `customContent` parameter:

| Parameter | Description | Type | Default |
|:-------------:|------------------------------------------------|:------------:|:-------:|
| image | Path to an image | `string` | |
| customContent | Custom html content. overrides `image` if set. | `html (raw)` | `null` |
| title | Item title. | `string` | `null` |
| description | Item description. | `string` | `null` |

#### Options
| Parameter | Description | Type | Default |
|:----------:|------------------------------------------------------|:---------:|:--------------:|
| id | Custom `id` to apply to the carousel | `mixed` | `rand(Number)` |
| extraClass | Add extra classes on steps container | `string` | _empty string_ |
| interval | Interval to change the slides | `int` | 5000 |
| touch | Support touch input. See: https://getbootstrap.com/docs/5.2/components/carousel/#options | `boolean` | `true` |
| pause | Auto stop sliding. See: https://getbootstrap.com/docs/5.2/components/carousel/#options | `mixed` | `false` |
| wrap | Restart again. See: https://getbootstrap.com/docs/5.2/components/carousel/#options | `boolean` | `true` |
| controls | Show controls | `boolean` | `false` |
| caption_custom_class | Apply custom class to caption | `string` | `d-none d-md-block` |
| caption_background | Show caption background | `boolean` | `true` |
| indicators | Show indicators | `boolean` | `true` |
| indicators_type | Set indicators type: `dots`, `thumbs` | `string` | _empty string_ |
| indicators_ratio | Set indicators ratio. See docs tabler | `string` | _empty string_ |
| indicators_orientation | Set indicators orientation. See docs tabler | `string` | `horizontal` |

| Parameter | Description | Type | Default |
|:---------------------:|--------------------------------------------------------------------------|:---------:|:-------------------:|
| id | Custom `id` to apply to the carousel | `mixed` | `rand(Number)` |
| extraClass | Add extra classes on steps container | `string` | _empty string_ |
| interval | Interval in milliseconds to change the slides | `int` | 5000 |
| touch | Support touch input (see Bootstrap docs) | `boolean` | `true` |
| pause | Auto stop sliding (see Bootstrap docs) | `mixed` | `false` |
| wrap | Restart again (see Bootstrap docs) | `boolean` | `true` |
| controls | Show controls | `boolean` | `false` |
| captionCustomClass | Apply custom class to caption | `string` | `d-none d-md-block` |
| captionBackground | Show caption background | `boolean` | `true` |
| indicators | Show indicators | `boolean` | `true` |
| indicatorsType | Set indicators type (allowed values: `dots`, `thumbs`) | `string` | _empty string_ |
| indicatorsRatio | Set indicators ratio (see Tabler docs) | `string` | _empty string_ |
| indicatorsOrientation | Set indicators orientation (see Tabler docs, allowed values: `vertical`) | `string` | _empty string_ |

Links:

- [Tabler docs](https://preview.tabler.io/docs/carousel.html)
- [Bootstrap docs](https://getbootstrap.com/docs/5.2/components/carousel/#options)

### Usage

```twig
{% from '@Tabler/components/carousel.html.twig' import carousel %}
{% set items =
{% set items = [
{
'key0':
{
'image': 'https://via.placeholder.com/640x360/1485bc/ffffff?text=Image+0',
},
'keyContent':
{
'custom_content': '<h1>Hello World</h1>',
},
'key1':
{
'image': 'https://via.placeholder.com/640x360/9dbf00/ffffff?text=Image+1',
'title': 'SOME Fancy Title',
'description': 'Lorem Ipsum NO HTML',
},
'key2':
{
'image': 'https://via.placeholder.com/640x360/bc147a/ffffff?text=Image+2',
},
'key3':
{
'image': 'https://via.placeholder.com/640x360/1454bc/ffffff?text=Image+3',
}
}
%}
{% set options =
'image': 'https://via.placeholder.com/640x360/1485bc/ffffff?text=Image+0',
},
{
'customContent': '<h1>Hello World</h1>',
},
{
'image': 'https://via.placeholder.com/640x360/9dbf00/ffffff?text=Image+1',
'title': 'SOME Fancy Title',
'description': 'Lorem Ipsum NO HTML',
},
{
'interval': false,
'controls': true,
'indicators': true,
'indicators_type': 'thumbs',
'indicators_orientation': 'vertical',
'image': 'https://via.placeholder.com/640x360/bc147a/ffffff?text=Image+2',
},
{
'image': 'https://via.placeholder.com/640x360/1454bc/ffffff?text=Image+3',
}
%}
] %}
{% set options = {
'interval': false,
'controls': true,
'indicators': true,
'indicatorsType': 'thumbs',
'indicatorsOrientation': 'vertical',
} %}
{ { carousel(items, options) } }
```
Expand Down
9 changes: 5 additions & 4 deletions docs/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,14 +12,15 @@ If you cannot find the needed information in this list of topics, please create

Components (Twig macros):

* [Buttons](components-buttons.md)
* [Timeline](components-timeline.md)
* [Breadcrumb](components-breadcrumb.md)
* [Buttons](components-buttons.md)
* [Callout](components-callout.md)
* [Carousel](components-carousel.md)
* [Status](components-status.md)
* [Status Dot](components-status-dot.md)
* [Status dot](components-status-dot.md)
* [Status indicator](components-status-indicator.md)
* [Steps](components-steps.md)
* [Callout](components-callout.md)
* [Timeline](components-timeline.md)

Components (Twig Embeds):
* [Modal](embeds-modal.md)
Expand Down
46 changes: 22 additions & 24 deletions templates/components/carousel.html.twig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@

{% set _show_controls = options.controls ?? false %}

{% set _caption_class = options.caption_custom_class ?? 'd-none d-md-block' %}
{% set _show_caption_background = options.caption_background ?? true %}
{% set _caption_class = options.captionCustomClass ?? 'd-none d-md-block' %}
{% set _show_caption_background = options.captionBackground ?? true %}

{% set _show_indicators = options.indicators ?? true %}
{% set _indicators_type = options.indicators_type ?? '' %}
{% set _indicators_ratio = options.indicators_ratio ?? '' %}
{% set _indicators_orientation = options.indicators_orientation ?? 'horizontal' %}
{% set _indicators_type = options.indicatorsType ?? '' %}
{% set _indicators_ratio = options.indicatorsRatio ?? '' %}
{% set _indicators_orientation = options.indicatorsOrientation ?? 'horizontal' %}

<div id="{{ _id }}" class="carousel slide {{ _extraClass }}" data-bs-ride="carousel"
data-bs-interval="{{ _interval == false ? 'false' : _interval }}"
Expand All @@ -34,30 +34,28 @@
{% endif %}
<div class="carousel-inner">
{% for item in items %}
{% set _has_custom = item.custom_content is defined %}
{% set _has_custom = item.customContent is defined %}
<div class="carousel-item {% if loop.first %}active{% endif %}">
{% if _has_custom %}
{# This is useless: breaks contents and no additional value as making everything same size is cumbersome #}
<div class="carousel-item">
{{ item.custom_content | raw }}
</div>
{{ item.customContent | raw }}
{% else %}
<div class="carousel-item {% if loop.first %}active{% endif %}">
<img src="{{ item.image }}" class="d-block w-100">
{% if item.title is defined or item.description is defined %}
{% if _show_caption_background %}
<div class="carousel-caption-background {{ _caption_class }}"></div>
{% endif %}
<div class="carousel-caption {{ _caption_class }}">
{% if item.title %}
<h3>{{ item.title }}</h3>
{% endif %}
{% if item.description %}
{{ item.description }}
{% endif %}
</div>
<img src="{{ item.image }}" class="d-block w-100" alt="{% if item.title is defined %}{{ item.title }}{% endif %}">
{% if item.title is defined or item.description is defined %}
{% if _show_caption_background %}
<div class="carousel-caption-background {{ _caption_class }}"></div>
{% endif %}
</div>
<div class="carousel-caption {{ _caption_class }}">
{% if item.title %}
<h3>{{ item.title }}</h3>
{% endif %}
{% if item.description %}
{{ item.description }}
{% endif %}
</div>
{% endif %}
{% endif %}
</div>
{% endfor %}
</div>
</div>
Expand Down

0 comments on commit 1710f93

Please sign in to comment.