Hogyan adhatunk hozzá egy osztály attribútumot egy blokkhoz?

Hogyan adhatok osztály attribútumot egy Drupal 8 blokkhoz?

A Drupal core-ban sok példa található, például a súgó modulok amely beállítja a blokk role attribútumait. Tehát ezt követően sikeresen hozzáadhatok egy osztályt.

/** * 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"; } } 

Lehetséges-e osztályt hozzáadni az előfeldolgozó kampó nélkül? Ideális esetben a blokk plugin fájlban található, amely az src / Plugin / Block / fájlban található?

Ez elősegítené egy blokkhoz kapcsolódó összes kód egy helyen való megtartását.

Válasz

Megpróbálta csak beállítani a #attribútumokat a blokk plugin által visszaadott render tömbben?

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

A (z) BlockViewBuilder::preRender() elemet nézve ennek működnie kell.

Válasz

Ellenőrizheti a Blokk osztály modult.

A blokkosztály lehetővé teszi a felhasználók számára, hogy osztályokat adhassanak hozzá bármely blokkhoz a blokk konfigurációs felületén keresztül. Ha egy nagyon rövid PHP-részletet hozzáad a „s block.tpl.php témához fájl, osztályok hozzáadhatók egy blokk szülő eleméhez. Hurrá az erőteljesebb blokkoláshoz!

Válasz

keressen gallysablont névjavaslat a blokkhoz (gally hibakeresési megjegyzések használatával) és felülírja

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 %} 

Válasz

1. Hello.config fájl létrehozása

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

2. Csatolja a könyvtáram fájlt: 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. Állítsa be az osztályt a my_module_name.module fájlban

my_module_name_preprocess_block funkció (tömb & $ változók) {

// 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"); 

// A blokk azonosítójának megszerzése

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

// A régió megszerzése blokk

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

4. my_module_name.libraries.yml

itt a my_module_name a könyvtáram neve

írja ide a kép leírását

5. Készítse el css fájlját css / my_module_name.css

.red {background: red! Fontos; }

.zöld {háttér: zöld! fontos; }

.sárga {háttér: sárga! fontos; }

Vélemény, hozzászólás?

Az email címet nem tesszük közzé. A kötelező mezőket * karakterrel jelöltük