getgrav / grav-plugin-shortcode-ui

Grav Shortcode UI Plugin
https://getgrav.org
MIT License
47 stars 11 forks source link

ui-tabs in grav modular page #32

Open PodrugStudio opened 5 years ago

PodrugStudio commented 5 years ago

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

rhukster commented 5 years ago

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 }}
gabomination commented 3 years ago

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.