Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui-tabs in grav modular page #32

Open
PodrugStudio opened this issue Oct 6, 2019 · 2 comments
Open

ui-tabs in grav modular page #32

PodrugStudio opened this issue Oct 6, 2019 · 2 comments

Comments

@PodrugStudio
Copy link

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
Copy link
Member

rhukster commented Oct 6, 2019

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
Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants