grav-plugin-shortcode-ui
grav-plugin-shortcode-ui copied to clipboard
ui-tabs in grav modular page
Could you please example how ui-tabs would be implemented in modular page.
{% extends 'partials/base.html.twig' %}
{% block content %}
{{"[ui-tabs position='top-left' active='0' theme='lite']"|shortcodes}}
{% for module in page.collection() %}
{{"[ui-tab title='{{module.title}}']"|shortcodes}}
{{module.content}}
{{"[/ui-tab]"|shortcodes}}
{% endfor %}
{{"[/ui-tabs]"|shortcodes}}
{% endblock %}
This is what I tried, but I get error which I don't understand. Argument 1 passed to Grav\Plugin\ShortcodeManager::getId() must implement interface Thunder\Shortcode\Shortcode\ShortcodeInterface, null given, called in .../user/plugins/shortcode-ui/shortcodes/TabsShortcode.php on line 34
As mentioned in discord, you need to render the whole tabs shortcode chunk in one shot. The result is much cleaner too:
{% set my_tabs %
[ui-tabs position='top-left' active='0' theme='lite']
{% for module in page.collection() %}
[ui-tab title='{{module.title}}']
{{module.content}}
[/ui-tab]
{% endfor %}
[/ui-tabs]
{% endset %}
{{ my_tabs|shortcodes }}
Hi. Sorry for writing to an old issue, but I didn't find any rescent post on the subject. I am trying to include tabs in a template. When I use your code in the content of a default page, it works (with twig enabled). When I inspect the source code of the page, ui-tabs.css and ui-tabs.js are included in the header.
When I try to include the same code in a template html.twig, the tabs won't work, and these are displayed wrong.
When I inspect the source code, the css and js are missing.
If I add :
<link href="/user/plugins/shortcode-ui/css/ui-tabs.css" type="text/css" rel="stylesheet">
and
<script src="/user/plugins/shortcode-ui/js/ui-tabs.js"></script>
in my template
It works, but being new at twig, I am not sure it is good practice to include css and js at this point in code.
What do you think ? Am I missing something ? or is it the way to do it ?
Thanks by advance for any highlight.