Tabs

Stappenplan toevoegen blok aan project

Downloads

Download als eerst de laatste versie van het blok hieronder.

Toevoegen aan project

1. Pak het zojuist gedownloade zip bestand uit en verplaats de bestanden naar je project in de volgende map: custom/themes/theme-name/nrdq-blocks/src
2. Voeg het blok toe aan je project
   • Navigeer in je project naar custom/themes/theme-name/nrdq-theme/views/frontend/blocks
   • Maak een nieuwe php file aan met de naam van het blok dat je zojuist hebt toegevoegd, genaamd: tabs.php
   • Voeg de volgende code toe aan het bestand:

                                        
   <?php
   
   use Nordique\Theme\Helpers\Gutenberg;
   
   $tabs = Gutenberg::getBlockField($attrs, 'tabs');
   $tabBackgroundColor = Gutenberg::getBlockField($attrs, 'tabBackgroundColor');
   $tabActiveBackgroundColor = Gutenberg::getBlockField($attrs, 'tabActiveBackgroundColor');
   $tabColor = Gutenberg::getBlockField($attrs, 'tabColor');
   $tabActiveColor = Gutenberg::getBlockField($attrs, 'tabActiveColor');
   $tabContentColor = Gutenberg::getBlockField($attrs, 'tabContentColor');
   $tabContentBackgroundColor = Gutenberg::getBlockField($attrs, 'tabContentBackgroundColor');
   
   $styles = Gutenberg::generateInlineStyles([
       '--tab-active-background-color' => $tabActiveBackgroundColor,
       '--tab-background-color' => $tabBackgroundColor,
       '--tab-active-color' => $tabActiveColor,
       '--tab-color' => $tabColor,
       '--tab-content-background-color' => $tabContentBackgroundColor,
       '--tab-content-color' => $tabContentColor,
   ]);
   ?>
   
   <?php if ($tabs): ?>
       <div class="tab-block" <?= $styles; ?>>
           <div class="tab-block-tabs">
               <?php foreach ($tabs as $index => $tab): ?>
                   <button class="tab-block-tab <?= $index === 0 ? 'tab-active' : ''; ?>" data-actab-id="<?= $index; ?>">
                       <?= $tab['title']; ?>
                   </button>
               <?php endforeach; ?>
           </div>
   
           <div class="tab-block-content">
               <?= $content; ?>
           </div>
       </div>
   <?php endif; ?>
                                   

3. Je hebt nu een basis van het blok. De styling kan je nog aanpassen naar wens en ook het blok kan je, wanneer nodig aanpassen.