drupal 8 – ¿Cómo agrego una clase CSS a una etiqueta de formulario?

Pregunta:

Quiero agregar una clase CSS a una etiqueta en una página que usa Drupal 8 Form API. No he podido encontrar una referencia en línea sobre cómo aplicar eso. He utilizado la siguiente solución alternativa, pero produce algunos resultados extraños.

public function buildForm(array $form, FormStateInterface $form_state)
{
    $form['label1']  = array(
        '#type' => 'label',
        '#title' => $this->t('QUESTIONNAIRE'),
        '#id'         => 'lbl1',
        '#prefix'     => '<div class="caption1">',
        '#suffix'     => '</div>',
    ) ;

y el HTML renderizado es:

<div class="caption1"><label for="lbl1" class="control-label">
<div class="caption1"></div>QUESTIONNAIRE
  </label>

No solo la instrucción div está en el lugar incorrecto, sino que se representa dos veces.

Encontré publicaciones de hace varios años que mostraban que esto no era posible, pero espero que desde entonces, y con D8, se haya solucionado. No quiero hacerlo con prefijo / sufijo, sino como un elemento de matriz separado.

PD: este sitio es Drupal 8.0.0-rc2

Respuesta:

Sé que este es un hilo antiguo, pero para cualquiera que busque en Google.

La pista de esto está en template_preprocess_form_element() .

$element += [
    '#title_display' => 'before',
    '#wrapper_attributes' => [],
    '#label_attributes' => [],
  ];

#label_attributes es una matriz de atributos estándar, por lo que es muy fácil configurar una clase con ['class' => ['my-class', 'other-class']]

#title_display toma 3 valores:

  • before: la etiqueta se emite antes del elemento. Este es el predeterminado.

  • after: la etiqueta se emite después del elemento. Por ejemplo, esto se usa para elementos de radio y casilla de verificación #type.

  • invisible: las etiquetas son fundamentales para los lectores de pantalla para permitirles navegar correctamente a través de los formularios, pero pueden distraer la vista. Esta propiedad oculta la etiqueta para todos excepto para los lectores de pantalla.
  • atributo: establece el atributo de título en el elemento para crear una información sobre herramientas, pero no genera ningún elemento de etiqueta. Esto solo es compatible con casillas de verificación y radios.

Leave a Comment

Your email address will not be published.

Scroll to Top

istanbul avukat

-

web tasarım