Can I create dynamic blocks inside an UX Twig component? - Stack Overflow

admin管理员组

文章数量:1122832

I'm working on creating components in twig, and since this is supposed to be a "somewhat replacement" for front end components (like ember/react), I wanted to see if there is a way to replicate some functionality.

For instance, I'm working on creating a tab list. Within that tab list there is the associated panel being shown for its content. Here is the twig component:

{% set tabID = "tabs_" ~ random() %}
<div>
    <div class="sm:hidden">
    <label for="tabs" class="sr-only">
        Select a tab
    </label>
    <select
        id="{{tabID}}"
        name="{{tabID}}}}"
        value={% for tab in tabs|filter(a => a.current == true) %} {{tab.name}}{% endfor %}
        class="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
    >
        {% for tab in tabs %}
            <option {% if tab.current %} selected {% endif %} key={{tab.name}}>{{tab.name}}</option>
        {% endfor %}
    </select>
    </div>
    <div class="hidden sm:block">
        <div class="border-b border-gray-200">
            <nav aria-label="Tabs" class="-mb-px flex space-x-8" role="tablist">
            {% for tab in tabs %}
                <button
                aria-selected='{{ tab.current ? "true" : "false" }}'
                aria-controls='{{tab.name}}'
                role='tab'
                class='whitespace-nowrap border-b-2 px-1 py-4 text-sm font-medium {{
                    tab.current ? "border-indigo-500 text-indigo-600" : "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700"
                }}'
                >
                {{tab.name}}
                </button>
            {% endfor %}
            </nav>
        </div>
    </div>
    <div class='panel-content'>
        {% for tab in tabs %}
            {% set nameBlock = 'panel_' ~ loop.index %}
            <div class="panel {% if not tab.current %} hidden {% endif %}">
                {% block nameBlock %}
                        
                    
                {% endblock %}
            </div>
        {% endfor %}
    </div>
</div>

As you can see, I'm attempting to create a dynamic block (which isn't supported, from what I can tell) so that this can be possible:

<twig:Tabs tabs="{{tabs}}">
            <twig:block name="panel_0">
                GROSS 1
            </twig:block>
            <twig:block name="panel_1">
                GROSS 2 
            </twig:block>
            <twig:block name="panel_2">
                GROSS 3 
            </twig:block>
            <twig:block name="panel_3">
                GROSS 4
            </twig:block>
    </twig:Tabs>

How do I achieve something like this? Would I have to create this using the php component file and utilize the #[PostMount] function? Or is the only way to do this is to manually build a sub component called panel that gets used?

本文标签： Can I create dynamic blocks inside an UX Twig componentStack Overflow