Form etiketine nasıl CSS sınıfı ekleyebilirim?

Drupal 8 Form API kullanan bir sayfadaki etikete bir CSS sınıfı eklemek istiyorum. Bunu nasıl uygulayacağım konusunda çevrimiçi bir referans bulamadım. Aşağıdaki geçici çözümü kullandım, ancak bazı garip sonuçlar üretiyor.

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

ve oluşturulan HTML:

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

Div ifadesi sadece yanlış yerde değil, aynı zamanda iki kez de görüntüleniyor.

Birkaç yıl önce bunun mümkün olmadığını gösteren ilanlar buldum, ama o zamandan beri D8 ile düzeltildiğini umuyorum. Önek / sonek ile yapmak istemiyorum, ama ayrı bir dizi öğesi olarak.

Not: Bu site Drupal 8.0.0-rc2

Bu eski bir konu olduğunu biliyorum, ama herkes için Googling.

Bunun ipucu var template_preprocess_form_element().

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

#label_attributes standart bir öznitelik dizisidir, bir sınıf ayarlamak çok kolaydır ['class' => ['my-class', 'other-class']]

#title_display 3 değer alır:

• önce: Etiket, öğeden önce çıkarılır. Bu varsayılan ayardır.

• after: Etiket, öğeden sonra çıkar. Örneğin, bu, radyo ve onay kutusu # tipi öğeler için kullanılır.

• görünmez: Etiketler, ekran okuyucular için formlarda düzgün bir şekilde gezinmelerini sağlamak için önemlidir, ancak görsel olarak dikkat dağıtıcı olabilir. Bu özellik, etiketi ekran okuyucular dışındaki herkes için gizler.
• niteliği: Bir araç ipucu oluşturmak ancak etiket öğesi içermemek için öğenin title niteliğini ayarlayın. Bu yalnızca onay kutuları ve radyolar için desteklenir

Bunu sadece kontrol ettim ve doğrudan bir etiket öğesine bir sınıf eklemenin mümkün olduğuna inanmıyorum.

Muhtemelen bildiğiniz gibi, sınıflar normalde #attributes ile aşağıdaki gibi eklenir:

 $form['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
  '#attributes' => array('class' => array('first-class', 'second-class')),
);

Ancak, sadece test ettim ve #attributes bir Label öğesine sınıf eklemiyor.

Bir sarıcı form öğesi eklemeniz, ona bir sınıf vermeniz ve ardından etiketinizi, sarıcı öğenin alt öğesi olduğu gerçeğine göre şekillendirmeniz mümkün mü? Bunun gibi:

$form['container'] = array(
  '#type' => 'container',
  '#attributes' => array('class' => array('your-class')),
);
$form['container']['foo'] = array(
  '#type' => 'textfield',
  '#title' => 'Foo',
);

Şimdi, bu örnek metin alanını (ve etiketini) sınıfınıza sahip bir DIV öğesinin içinde oluşturacaktır;

.your-class label {
  /* your CSS here */
}

Bunu Drupal> = 8.0.0'da yapmak için birkaç seçenek vardır. Bunların hepsi bir temada şablon geçersiz kılma etrafında dönüyor, ancak bir modül diğer modüller tarafından tanımlanan şablon önişleme kancalarını uygulayabilmelidir

1. En basit ancak dinamik olmayan seçenek, form-element-label.html.twig dosyasını doğrudan geçersiz kılmaktır . Tüm etiketler form-controlsınıfı alacaksa bu işe yarayabilir .
2. Bu satırları izleyerek, template_preprocess_form_element_label uygulamak aynı şeyi yapmanıza form-controlve şablonu geçersiz kılmadan niteliklere sınıf eklemenize izin verir .
3. Ayrıca template_preprocess_form_element uygulayabilir ve üzerine yazmak için mantık ekleyebilir $variables['label'], ancak değerlerini form öğesi dizisindeki tanımlanmış bir anahtardan alabilirsiniz.

Gönderme düğmeleri için aşağıdaki gibi sınıf ekleyebiliriz:

$ form ['actions'] ['gönder'] ['# öznitelikler]] [' sınıf '] [] =' use-ajax-boyun eğme ';

Bulduğum en temiz seçenek, @ mradcliffe'nin yukarıdaki # 3 önerisine göre. Örneğin form tanımınızda -

$form['distance'] = [
        '#type' => 'select',
        '#title' => 'Distance',
        '#required' => true,
        '#options' => [
            '10' => '10 Miles',
            '25' => '25 Miles',
            '50' => '50 Miles',
            '100' => '100 Miles'
        ],
        '#label_classes' => [
            'some-label-class'
        ]
    ];

Sonra özel bir modülde hook_preprocess_form_element uygulayın:

/**
* Implementation of hook_preprocess_form_element
* @param $variables
*/
function your_module_preprocess_form_element(&$variables)
{
    if(isset($variables['element']['#label_classes'])) {
        $variables['label']['#attributes']['class'] = $variables['element']['#label_classes'];
    }
}

Bunun Drupal'ın eklemek istediği tüm etiket sınıflarını geçersiz kılacağını unutmayın. Benim durumumda bu iyi. Yukarıdaki kod, gerekirse bunu önlemek için değiştirilebilir.

@Nate cevabını tamamlamak için, tez sınıflarını mevcut bir forma eklemek istiyorsanız, hook_form_alter içinde yapabilirsiniz:

function your_module_form_alter(&$form, FormStateInterface &$form_state, $form_id)
{
    // for a textfield
    $form['distance']['widget'][0]['value']['#label_classes'] = ['some-label-class'];
    // for a radio field
    $form['country']['widget']['#label_classes'] = ['some-label-class'];
}

Ve sonra metin alanı için hook_preprocess_form_element veya radyo alanı için hook_preprocess_fieldset kullanın:

/**
 * Implements hook_preprocess_hook().
 */
function your_module_preprocess_fieldset(&$variables)
{
  if(isset($variables['element']['#label_classes'])) {
    foreach ($variables['element']['#label_classes'] as $class) {
      $variables['legend']['attributes']->addClass($class);
    }
  }
}