Blok Zakładki (Orion Shop)
Blok "Zakładki" (Orion Shop)


Wywołanie bloku na stronach sklepu internetowego ID — tabs

Przed użyciem kodu przeczytaj instrukcję dotyczącą wywoływania bloków na dodatkowych stronach - Czytaj dalej
    <!-- Blok „Zakładki” -->

{$props = [
  'color_scheme' => 'main',
  'no_margin' => false,
  'template' => 'widecard-one',
  'tabs' => [
    '1' => [
      'color_scheme' => 'main',
      'lazy' => false,
      'name' => 'Pierwsza zakładka',
      'title' => [
        'align' => 'left',
        'size' => 'medium, H3',
        'text' => 'Czym jest Lorem Ipsum?'
      ],
      'text' => 'Wielu myśli, że Lorem Ipsum to zestaw łacińskich słów wziętych z sufitu, ale tak nie jest. Jego korzenie sięgają fragmentu klasycznej łaciny z 45 roku n.e.',
      'image' => 'img/500x300.png',
      'buttons' => [
        '1' => [
          'template' => 'button-one',
          'mode' => 'link',
          'link' => '#',
          'target' => '_self',
          'type' => 'primary',
          'wide' => true,
          'anchor' => true,
          'text' => 'Czytaj więcej'
        ]
      ]
    ],
    '2' => [
      'color_scheme' => 'main',
      'lazy' => false,
      'name' => 'Druga zakładka',
      'title' => [
        'align' => 'left',
        'size' => 'medium, H3',
        'text' => 'Dlaczego używamy Lorem Ipsum?'
      ],
      'text' => 'Wielu myśli, że Lorem Ipsum to zestaw łacińskich słów wziętych z sufitu, ale tak nie jest. Jego korzenie sięgają fragmentu klasycznej łaciny z 45 roku n.e.',
      'image' => 'img/500x300.png',
      'buttons' => [
        '1' => [
          'template' => 'button-one',
          'mode' => 'link',
          'link' => '#',
          'target' => '_self',
          'type' => 'primary',
          'wide' => true,
          'anchor' => true,
          'text' => 'Czytaj więcej'
        ]
      ]
    ],
    '3' => [
      'color_scheme' => 'main',
      'lazy' => false,
      'name' => 'Trzecia zakładka',
      'title' => [
        'align' => 'left',
        'size' => 'medium, H3',
        'text' => 'Skąd wzięło się Lorem Ipsum?'
      ],
      'text' => 'Wielu myśli, że Lorem Ipsum to zestaw łacińskich słów wziętych z sufitu, ale tak nie jest. Jego korzenie sięgają fragmentu klasycznej łaciny z 45 roku n.e.',
      'image' => 'img/500x300.png',
      'buttons' => [
        '1' => [
          'template' => 'button-one',
          'mode' => 'link',
          'link' => '#',
          'target' => '_self',
          'type' => 'primary',
          'wide' => true,
          'anchor' => true,
          'text' => 'Czytaj więcej'
        ]
      ]
    ],
    '4' => [
      'color_scheme' => 'main',
      'lazy' => false,
      'name' => 'Czwarta zakładka',
      'title' => [
        'align' => 'left',
        'size' => 'medium, H3',
        'text' => 'Gdzie znaleźć Lorem Ipsum?'
      ],
      'text' => 'Wielu myśli, że Lorem Ipsum to zestaw łacińskich słów wziętych z sufitu, ale tak nie jest. Jego korzenie sięgają fragmentu klasycznej łaciny z 45 roku n.e.',
      'image' => 'img/500x300.png',
      'buttons' => [
        '1' => [
          'template' => 'button-one',
          'mode' => 'link',
          'link' => '#',
          'target' => '_self',
          'type' => 'primary',
          'wide' => true,
          'anchor' => true,
          'text' => 'Czytaj więcej'
        ]
      ]
    ]
  ]
 ]}

{call add_block block="tabs" props=$props}


Możliwe wartości konfiguracyjne bloku „Zakładki”:

Właściwość Typ danych Opis
color_scheme String Schemat kolorów bloku. Dopuszczalne wartości: 'main', 'alter' lub 'semitone'
no_margin Boolean Wartość true usuwa górny margines bloku.
template String Szablon karty. Dostępne wartości: 'widecard-one'
tabs[1].color_scheme String Schemat kolorów zakładki. Dopuszczalne wartości: 'main', 'alter' lub 'semitone'
tabs[1].lazy Boolean Wartość true stosuje leniwe ładowanie obrazów.
tabs[1].name String Nazwa zakładki
tabs[1].title Object Element „Tytuł” Więcej...
tabs[1].text String Tekst zakładki
tabs[1].image String Ścieżka do obrazu względem folderu.
tabs[1].buttons Object Element „Przycisk” Więcej...



Błąd w tekście? Zaznacz ją myszką i kliknij Ctrl + F1 lub kliknij na ten blok!