Hoe voeg ik een class-attribuut toe aan een blok?

Hoe kan ik een class attribuut toevoegen aan een Drupal 8 blok?

Er zijn veel voorbeelden in Drupal core zoals de help modules die de rol attributen voor het blok instelt. Zodoende kan ik met succes een klasse toevoegen.

/** * Implements hook_preprocess_HOOK() for block templates. */ function mymodule_preprocess_block(&$variables) { if ($variables["plugin_id"] == "mymodule_my_block") { $variables["attributes"]["class"][] = "my-nice-block"; } } 

Is het mogelijk om een klasse toe te voegen zonder de preprocess-hook? Idealiter binnen het block plugin-bestand in src / Plugin / Block /?

Dit zou helpen om alle code gerelateerd aan een blok op één locatie te houden.

Antwoord

Heb je geprobeerd om #attributes in te stellen op de render-array die door onze block plug-in wordt geretourneerd?

$build["#attributes"]["class"][] = "my-nice-block"; 

Kijkend naar BlockViewBuilder::preRender(), zou dat moeten werken.

Antwoord

U kunt de module Block Class controleren.

Met Block Class kunnen gebruikers klassen aan elk blok toevoegen via de configuratie-interface van het blok. Door een zeer kort PHP-fragment toe te voegen aan een thema “s block.tpl.php bestand kunnen klassen worden toegevoegd aan het bovenliggende element van een blok. Hoera voor krachtigere blokthemas!

Antwoord

zoek een takjesjabloon naam suggestie voor je blok (met behulp van twig debug commentaren) en overschrijf het

themes / templates / block – my-custom-block.html.twig

{% extends "block.html.twig" %} {# /** * @file * Theme override for tabs. */ #} {% block title %} {{ title_prefix }} {% if label %} <h2{{ title_attributes.addClass(title_classes, "accordion") }}{{ title_attributes.setAttribute("id", "campus") }}> {{ label }} <i class="fa fa-plus" aria-hidden="true"></i> </h2> {% endif %} {{ title_suffix }} {% endblock %} 

Antwoord

1. Maak een hello.config-bestand

 my_module_name/config/install/my_module_name.config content this code: color :"blue" color_red: "red" 

2. Voeg uw bibliotheekbestand my_module_name.libraries.yml

 // This function below is located on my_module_name.module file function my_module_name_page_attachments(array &$page){ $page["#attached"]["library"][]= "my_module_name/library_name"; } 

3. Stel de klasse in in my_module_name.module file

function my_module_name_preprocess_block (array & $ variabelen) {

// Get the value of my color content in my_module_name/config/install/my_module_name.config $class = \Drupal::config("my_module_name.config")->get("color"); 

// Verkrijg de ID van het blok

 $id= $variables["elements"]["#id"]; $block = Block::load($id); 

// Verkrijg de regio met de block

 $region = $block->getRegion(); if($region == "name_of_the_block_id"){ // Set the class $variables["attributes"]["class"][] = $class ; } } 

4. mijn_module_naam.libraries.yml

hier is mijn_module_naam de naam van mijn bibliotheek

voer de beschrijving van de afbeelding hier in

5. Maak je css-bestand css / my_module_name.css

.red {background: red! Important; }

.groen {achtergrond: groen! belangrijk; }

.yellow {achtergrond: geel! belangrijk; }

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *