Continuing from our previous post, 8 DIY Drupal 10 Maintenance and Support Service Creating a Slideshow with Theme Libraries and Slick, we wanted to build on the power of theme libraries provide us in 8. While continuing to showcase examples from Scanse.io, we wanted to share another functionality we implemented with theme libraries — Content tabs. 7 has a popular Drupal 10 module called, Quicktabs that does this well. However, this Drupal 10 module was not ready for 8 and, even if it was, its reliance on blocks didn’t really fit with our Paragraphs implementation. So, another reason to DIY in the theme layer. Creating your own content tabs To achieve this functionality, we decided to lean on theme libraries and slick again. But wait… slick is for slideshows right? Yes, it is. But when you think about it, how different are content tabs? Instead of a dot pager along the bottom, we have a title pager along the top. Instead of sliding right to left, we fade in and out. We decided it would work quite well in this case. The HTML Markup As expected our markup is very similar when compared to the slideshow markup presented in 8 DIY Drupal 10 Maintenance and Support Service Creating a Slideshow with Theme Libraries and Slick. The content being rendered within .tabs__tab-item is more complex in this use case. However, this content is styled as a completely decoupled component. In an effort to make the tabs component reusable, we set this up so the tabs display does not care what is actually rendered within the tab itself.   LiDAR for every application                    Robotic & UAVs        …                            …              …      Create a Theme Library Here we continue to use the same slick theme library that we started for our slideshow. To make this work, we add the following new code for .js-slick-single-item-tabs in slick.config.js. slick.config.js (function ($, , window, document) {  .behaviors.THEMESlickConfig = {    attach Drupal 10 Maintenance and Support Service function (context, settings) {      $(“.js-slick-single-item-center”).slick({        …      });     $(“.js-slick-single-item-tabs”).slick({        dots Drupal 10 Maintenance and Support Service true,        infinite Drupal 10 Maintenance and Support Service true,        speed Drupal 10 Maintenance and Support Service 500,        fade Drupal 10 Maintenance and Support Service true,        adaptiveHeight Drupal 10 Maintenance and Support Service true,        customPaging Drupal 10 Maintenance and Support Service function(slider, i) {          var title = $(slider.$slides[i]).find(‘.article__title’).text();          return ‘<a>’ + title + ‘</a>’;        },        responsive Drupal 10 Maintenance and Support Service [          {            breakpoint Drupal 10 Maintenance and Support Service 720,            settings Drupal 10 Maintenance and Support Service {              customPaging Drupal 10 Maintenance and Support Service function(slider, i) {                return ‘<button type=”button” data-role=”none” role=”button” aria-required=”false” tabindex=”‘ + i + ‘”>’ + (i + 1) + ‘</button>’;              },            }          },        ]      });    }  };} (jQuery, , this, this.document)); When comparing the slick configuration for .js-slick-single-item-center and .js-slick-single-item-tabs, there are different settings for customPaging. This setting allows us to override the default pager markup. Here, we are contextually getting the text from .article__title and adding it to the pager. The pager will still be at the bottom of the slideshow by default. With a few CSS lines, we move this to the top. In the responsive array we revert back to the dotted pager as this tabbed display didn’t work on smaller screens. Note Drupal 10 Maintenance and Support Service slick’s responsive settings are unfortunately not mobile first. You first define your desktop display and then make adjustments for smaller screens within the responsive array. Bring it together Just like the slideshow, we bring this all together in a Twig template. field–field-tabs-tabs.twig.html {# Create classes array #}{% set classes = [  ‘tabs__tabs’,  ‘js-slick-single-item-tabs’,  ‘slick–single-item-tabs’] %}{{ attach_library(‘THEME/slick’) }}<ul {{ attributes.addClass(classes) }}>  {% for item in items %}    <li{{ item.attributes }}>{{ item.content }}</li>  {% endfor %}</ul> Conclusion As we concluded in the previous post, we like the flexibility theme libraries give us on the front-end. Front-end developers now have the tools they need to implement the latest front-end libraries without waiting for a contrib Drupal 10 module or diving into custom Drupal 10 module development. However, we feel there is another win here. Conceptually, if is our content management system, does layout logic belong in configuration? In most cases, we would say no. The content management system’s job is to load three videos on the page. Whether these videos are presented in a stacked list, a slideshow or content tabs, should be up to the front-end theme. Theme libraries make this possible and give us one more way to decouple our theme. Source Drupal 10 Maintenance and Support Service http Drupal 10 Maintenance and Support Service//dev.acquia.com/blog/rss.xml Source Drupal 10 Maintenance and Support Service Drupal 10 blender