-
-
Notifications
You must be signed in to change notification settings - Fork 18
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
added status() and status_dot() macros (#98)
- Loading branch information
1 parent
881273f
commit f6ea2f4
Showing
5 changed files
with
98 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
# 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. | ||
|
||
## Status Dot | ||
|
||
Status Dot has been implemented to simplify the use of the Tabler [Status Dot component](https://preview.tabler.io/docs/statuses.html#status-indicator) | ||
### Parameters | ||
`status_dot()` macro, waits for 1 parameter: | ||
|
||
| Parameter | Description | Type | Default | | ||
|:---------:|:---------------------------|:---------:|:-------:| | ||
| options | [Options](#Options) object | `object` | `{}` | | ||
|
||
#### Options | ||
| Parameter | Description | Type | Default | | ||
|:----------:|----------------------------------|:---------:|:--------------:| | ||
| color | Color of the indicator | `string` | `green` | | ||
| animated | Set if the indicator is animated | `boolean` | `true` | | ||
| extraClass | Allow to add extra classes | `string` | _empty string_ | | ||
### Usage | ||
|
||
```twig | ||
{% from '@Tabler/components/status_dot.html.twig' import status_dot %} | ||
{% set options = {'color': 'pink', 'animated': true} %} | ||
{{ status_dot(options) }} | ||
``` | ||
### Preview | ||
![grafik](https://user-images.githubusercontent.com/3634653/176974526-35c6ca21-1d66-450a-b7d0-66c5cff41ed1.png) | ||
|
||
## Next steps | ||
|
||
Please go back to the [Tabler bundle documentation](index.md) to find out more about using the theme. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,38 @@ | ||
# 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. | ||
|
||
## Status | ||
|
||
Status has been implemented to simplify the use of the Tabler [Status component](https://preview.tabler.io/docs/statuses.html) | ||
### Parameters | ||
`status()` macro, waits for 2 parameters: | ||
|
||
| Parameter | Description | Type | Default | | ||
|:---------:|:---------------------------|:---------:|:-------:| | ||
| text | Text to show in the status | `string` | | | ||
| options | [Options](#Options) object | `object` | `{}` | | ||
|
||
#### Options | ||
| Parameter | Description | Type | Default | | ||
|:----------:|----------------------------------|:---------:|:--------------:| | ||
| color | Color of the status | `string` | `green` | | ||
| lite | Set if the status should use the lite display | `boolean` | `false` | | ||
| with_dot | Set if the status should use a dot | `boolean` | `false` | | ||
| animated | Set if the status dot is animated | `boolean` | `true` | | ||
| extraClass | Allow to add extra classes | `string` | _empty string_ | | ||
### Usage | ||
|
||
```twig | ||
{% from '@Tabler/components/status.html.twig' import status %} | ||
{% set options = {'color': 'success', 'with_dot': true,'animated': true, 'lite': false, 'extraClass': 'me-3'} %} | ||
{{ status('Demo', options) }} | ||
``` | ||
### Preview | ||
![grafik](https://user-images.githubusercontent.com/3634653/176974136-b2ef1703-a9f4-4fe4-b3ac-85fb37f6e63b.png) | ||
|
||
## Next steps | ||
|
||
Please go back to the [Tabler bundle documentation](index.md) to find out more about using the theme. |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
{% macro status(text, options) %} | ||
{% set _color = options.color ?? 'green' %} | ||
{% set _animated = options.animated ?? true %} | ||
{% set _lite = options.lite is defined ? options.lite : false %} | ||
{% set _with_dot = options.with_dot is defined ? options.with_dot : false %} | ||
{% set _extraClass = options.extraClass ?? '' %} | ||
|
||
{%- apply spaceless -%} | ||
<span class="status status-{{ _color }} {{ _lite ? 'status-lite' : '' }} {{ _extraClass }}"> | ||
{% if _with_dot %} | ||
<span class="status-dot {{ _animated ? 'status-dot-animated' : '' }}"></span> | ||
{% endif %} | ||
{{ text }} | ||
</span> | ||
{%- endapply -%} | ||
{% endmacro %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,7 @@ | ||
{% macro status_dot(options) %} | ||
{% set _color = options.color ?? 'green' %} | ||
{% set _animated = options.animated ?? true %} | ||
{% set _extraClass = options.extraClass ?? '' %} | ||
|
||
<span class="status-dot status-{{ _color }} {% if _animated %}status-dot-animated{% endif %}"></span> | ||
{% endmacro %} |