mirror of
https://github.com/codex-team/codex.docs.git
synced 2025-08-10 07:55:24 +02:00
Changed navigator component by passing objects, removed navigator wrapper
This commit is contained in:
parent
81afc966fb
commit
385c475a34
3 changed files with 32 additions and 19 deletions
|
@ -1,13 +1,12 @@
|
||||||
{#
|
{#
|
||||||
Reusable navigaor component.
|
Reusable navigaor component.
|
||||||
Available props:
|
Available props:
|
||||||
- label
|
- previousPage
|
||||||
- direction: previous, next
|
- nextPage
|
||||||
- url: navigation link
|
- class: additional class for the navigator
|
||||||
- class: additional class for the button
|
|
||||||
|
|
||||||
Usage example:
|
Usage example:
|
||||||
{% include 'components/navigator.twig' with {label: 'Previous page', direction: 'previous'} %}
|
{% include 'components/navigator.twig' with {previousPage: previousPage, nextPage: nextPage} %}
|
||||||
#}
|
#}
|
||||||
|
|
||||||
{% set mainClass = 'navigator' %}
|
{% set mainClass = 'navigator' %}
|
||||||
|
@ -15,23 +14,39 @@ Usage example:
|
||||||
|
|
||||||
{% set tag = 'div' %}
|
{% set tag = 'div' %}
|
||||||
|
|
||||||
{% if url is not empty %}
|
{% set tag = 'a' %}
|
||||||
{% set tag = 'a' %}
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
<div class="navigator--wrapper">
|
<div>
|
||||||
{% if label and url %}
|
{% if previousPage %}
|
||||||
<{{ tag }}
|
<{{ tag }}
|
||||||
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
|
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
|
||||||
class="{{ mainClass }} {{ mainClass }}--{{ direction|default('previous') }} {{ class ?? '' }}"
|
class="{{ mainClass }} {{ mainClass }}--previous {{ class ?? '' }}"
|
||||||
{{ url is not empty ? 'href="' ~ url ~ '"' : '' }}
|
href="/{{ previousPage.uri }}"
|
||||||
>
|
>
|
||||||
<div class="{{ mainClass }}__direction">
|
<div class="{{ mainClass }}-direction">
|
||||||
{{ direction }}
|
previous
|
||||||
</div>
|
</div>
|
||||||
<div class="{{ mainClass }}__label">
|
<div class="{{ mainClass }}-label">
|
||||||
{{ label }}
|
{{ previousPage.title }}
|
||||||
</div>
|
</div>
|
||||||
</{{ tag }}>
|
</{{ tag }}>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
{% if nextPage %}
|
||||||
|
<{{ tag }}
|
||||||
|
{{ name is not empty ? 'name="' ~ name ~ '"': '' }}
|
||||||
|
class="{{ mainClass }} {{ mainClass }}--next {{ class ?? '' }}"
|
||||||
|
href="/{{ nextPage.uri }}"
|
||||||
|
>
|
||||||
|
<div class="{{ mainClass }}-direction">
|
||||||
|
next
|
||||||
|
</div>
|
||||||
|
<div class="{{ mainClass }}-label">
|
||||||
|
{{ nextPage.title }}
|
||||||
|
</div>
|
||||||
|
</{{ tag }}>
|
||||||
|
{% endif %}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
|
@ -40,8 +40,7 @@
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</section>
|
</section>
|
||||||
<footer class="page__footer">
|
<footer class="page__footer">
|
||||||
{% include 'components/navigator.twig' with {label: previousPage.title, direction: 'previous', url: '/' ~ previousPage.uri} %}
|
{% include 'components/navigator.twig' with {previousPage: previousPage, nextPage: nextPage} %}
|
||||||
{% include 'components/navigator.twig' with {label: nextPage.title, direction: 'next', url: '/' ~ nextPage.uri} %}
|
|
||||||
</footer>
|
</footer>
|
||||||
</article>
|
</article>
|
||||||
|
|
||||||
|
|
|
@ -34,4 +34,3 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
Loading…
Add table
Add a link
Reference in a new issue