it-swarm.com.de

Wie füge ich einem Block ein Klassenattribut hinzu?

Wie kann ich einem Drupal 8-Block) ein Klassenattribut hinzufügen?

Es gibt viele Beispiele in Drupal core), z. B. die Hilfemodule, die die Attribute role für den Block festlegen. Anschließend kann ich eine Klasse erfolgreich hinzufügen.

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

Ist es möglich, eine Klasse ohne den Preprocess-Hook hinzuzufügen? Idealerweise innerhalb der Block-Plugin-Datei in src/Plugin/Block /?

Dies würde dazu beitragen, den gesamten Code für einen Block an einem Ort zu behalten.

4
batigolix

Haben Sie versucht, #attributes für das von unserem Block-Plugin zurückgegebene Render-Array festzulegen?

$build['#attributes']['class'][] = 'my-Nice-block';

Wenn Sie sich BlockViewBuilder::preRender() ansehen, sollte das funktionieren.

7
Berdir

1. Erstellen Sie die Datei hello.config

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

2. Hängen Sie Ihre Bibliotheksdatei my_module_name.libraries.yml an

  // 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. Legen Sie die Klasse in der Datei my_module_name.module fest

funktion my_module_name_preprocess_block (Array & $ Variablen) {

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

// ID des Blocks abrufen

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

// Holen Sie sich die Region mit dem Block

    $region = $block->getRegion();

    if($region == 'name_of_the_block_id'){

        // Set the class 
        $variables['attributes']['class'][] = $class ;
    }
}

4. my_module_name.libraries.yml

hier ist mein_Modulname der Name meiner Bibliothek

(enter image description here

5. Erstellen Sie Ihre CSS-Datei css/my_module_name.css

.red {Hintergrund: rot! wichtig; }}

.green {Hintergrund: grün! wichtig; }}

.gelb {Hintergrund: gelb! wichtig; }}

2
Ibrahima SOW

suchen Sie einen Vorschlag für einen twig - Vorlagennamen für Ihren Block (mithilfe von twig Debug-Kommentaren) und überschreiben Sie ihn

themen/Vorlagen/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 %}
1
Matoeil

Sie können das Modul Block Class überprüfen.

Mit Block Class können Benutzer jedem Block über die Konfigurationsoberfläche des Blocks Klassen hinzufügen. Durch Hinzufügen eines sehr kurzen Ausschnitts von PHP] zur block.tpl.php - Datei eines Themas können Klassen zum übergeordneten Element eines Blocks hinzugefügt werden. Hurra für ein leistungsfähigeres Blockthema!

1
DRUPWAY