Как сделать несколько повторных секций в Laravel / Blade? - PullRequest
Новая
       10

Как сделать несколько повторных секций в Laravel / Blade?

0 голосов
/ 20 января 2020

ОК, я разрабатываю компонент представления вкладок. Он имеет переменное количество вкладок в зависимости от того, где и как он используется. То, что я хотел бы сделать, это (упрощенно): 

@component('tabSet')
   @component('tab', ['label' => 'settings', 'content' => 'nameOfContentComponent'])
   @component('tab', ['label' => 'stuff', 'content' => 'nameOfContentComponent'])
   @component('tab', ['label' => 'Other stuff', 'content' => 'nameOfContentComponent'])
  @component('tab', ['label' => 'And even more stuff', 'content' => 'nameOfContentComponent'])
@endcomponent

Желаемый результат будет выглядеть примерно так: 

<section class="tabSet">
        <div class="tabs-contentArea"> 
<!-- this section is repeated for each tab-->
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
 <!-- this section is repeated for each tab-->      
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
  <!-- this section is repeated for each tab-->        
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
  <!-- this section is repeated for each tab-->         
            <div class="tabs-contentArea-content">nameOfContentComponent</div>
<!-- this section is repeated for each tab-->

        </div>
        <div class="tabs-tabArea">
<!-- this section is repeated for each tab-->
            <div class="tabs-tab"> 
                <label class="tabs-tab-label icon-skull" >settings</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull" >Stuff</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull">Other stuff</label>
            </div>
<!-- this section is repeated for each tab-->
            <div class="tabs-tab">
                <label class="tabs-tab-label-mobile icon-skull"  >And even more stuff</label>
            </div>
<!-- this section is repeated for each tab-->
        </div>
    </div>
</section>

Я не вижу, как я мог бы отделить переменные в двух разных повторяющихся разделах с переменным количеством вкладок (.tabs-contentArea-content и .tabs-tab-label)

Я мог бы go для версии, где я загружаю массив соответствующих переменных и использовать два цикла for для генерации разделов, но для этого потребуется, чтобы я сделал что-то вроде 

@component('tabSet', ['tabData' => 'fileWithArray'])@endcomponent

и загрузил данные из массива как переменные - это выглядит намного менее чистым, поскольку файл массива должно быть сделано для каждого набора вкладок, вместо того, чтобы просто указывать, какие вкладки создавать при создании представления.

Пожалуйста, дайте совет относительно наилучшей практики в этом вопросе

С наилучшими пожеланиями

Дэвид Траппо

1 Ответ

0 голосов
/ 20 января 2020

Будьте проще. Компоненты не предоставляют нужную вам функциональность. Я предлагаю использовать: 

@component('tabSet', ['tabs' => [
        'settings' => 'nameOfSettingsContentComponent',
        'stuff' => 'nameOfStuffContentComponent',
    ]])
@endcomponent

и во вкладке Set использовать foreach дважды 

@foreach($tabs as $label => $componentName)
@endforeach
...