ฉันจะเพิ่มคลาส CSS ลงในเลเบลของฟอร์มได้อย่างไร

ฉันต้องการเพิ่มคลาส CSS ลงในป้ายกำกับบนหน้าเว็บที่ใช้ Drupal 8 Form API ฉันไม่สามารถหาข้อมูลอ้างอิงออนไลน์เกี่ยวกับวิธีการใช้งานได้ ฉันใช้วิธีแก้ไขปัญหาต่อไปนี้ แต่ได้ผลลัพธ์ที่แปลก

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

และ HTML ที่แสดงผลคือ:

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

คำสั่ง div ไม่เพียง แต่อยู่ในตำแหน่งที่ไม่ถูกต้องเท่านั้น

ฉันพบโพสต์เมื่อหลายปีก่อนที่แสดงว่ามันเป็นไปไม่ได้ แต่ฉันหวังว่าตั้งแต่นั้นมาและด้วย D8 มันได้รับการแก้ไขแล้ว ฉันไม่ต้องการที่จะทำมันด้วยคำนำหน้า / คำต่อท้าย แต่เป็นองค์ประกอบอาร์เรย์ที่แยกต่างหาก

PS: เว็บไซต์นี้เป็น Drupal 8.0.0-rc2

ฉันรู้ว่านี่เป็นด้ายเก่า แต่สำหรับทุกคนที่ Googling

template_preprocess_form_element()เงื่อนงำนี้อยู่ใน

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

#label_attributes เป็นอาร์เรย์ของแอตทริบิวต์มาตรฐานจึงง่ายมากในการตั้งค่าคลาสด้วย ['class' => ['my-class', 'other-class']]

#title_display ใช้ 3 ค่า:

• before: ฉลากจะถูกส่งออกมาก่อนองค์ประกอบ นี่คือค่าเริ่มต้น

• หลังจาก: ฉลากจะถูกส่งออกหลังจากองค์ประกอบ ตัวอย่างเช่นใช้สำหรับวิทยุและช่องทำเครื่องหมาย #type

• ล่องหน: ป้ายกำกับมีความสำคัญสำหรับโปรแกรมอ่านหน้าจอเพื่อให้สามารถนำทางผ่านฟอร์มได้อย่างถูกต้อง แต่สามารถเบี่ยงเบนความสนใจทางสายตาได้ คุณสมบัตินี้ซ่อนป้ายกำกับสำหรับทุกคนยกเว้นโปรแกรมอ่านหน้าจอ
• attribute: ตั้งค่า attribute title บนองค์ประกอบเพื่อสร้าง tooltip แต่ output ไม่มีองค์ประกอบ label สิ่งนี้ได้รับการสนับสนุนสำหรับช่องทำเครื่องหมายและวิทยุเท่านั้น

ฉันเพิ่งตรวจสอบสิ่งนี้และฉันไม่เชื่อว่าเป็นไปได้ที่จะเพิ่มคลาสให้กับองค์ประกอบป้ายกำกับโดยตรง

ตามปกติแล้วคุณจะรู้ได้ว่าคลาสจะถูกเพิ่มด้วย #attributes ดังนี้:

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

อย่างไรก็ตามฉันเพิ่งทดสอบและ #attributes ไม่ได้เพิ่มคลาสให้กับองค์ประกอบฉลาก

เป็นไปได้หรือไม่ที่คุณจะเพิ่มองค์ประกอบแบบฟอร์ม wrapper ให้ชั้นเรียนกับมันแล้วจัดเลเบลของคุณตามความจริงที่ว่ามันเป็นลูกขององค์ประกอบตัวแรปเปอร์? แบบนี้:

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

ตอนนี้สิ่งนี้จะแสดง textfield (และ label ของมัน) ภายในองค์ประกอบ DIV ที่มีคลาสของคุณเช่นคุณสามารถจัดสไตล์ label ของคุณ:

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

มีหลายทางเลือกในการทำเช่นนี้ใน Drupal> = 8.0.0 สิ่งเหล่านี้ทั้งหมดหมุนรอบแม่แบบแทนที่ในชุดรูปแบบ แต่โมดูลควรจะสามารถนำ hooks preprocess แม่แบบที่กำหนดโดยโมดูลอื่น ๆ

1. ตัวเลือกที่ง่ายที่สุด แต่ไม่ใช่แบบไดนามิกคือการแทนที่form-element-label.html.twigโดยตรง สิ่งนี้สามารถใช้งานได้หากป้ายกำกับทั้งหมดจะได้รับform-controlชั้นเรียน
2. การทำตามบรรทัดเหล่านี้การใช้template_preprocess_form_element_labelจะช่วยให้คุณทำสิ่งเดียวกันและเพิ่มform-controlคลาสให้กับแอตทริบิวต์โดยไม่ต้องแทนที่เทมเพลต
3. คุณยังสามารถใช้template_preprocess_form_elementและเพิ่มตรรกะเพื่อไม่เขียนทับ$variables['label']แต่รับค่าจากบางคีย์ที่กำหนดไว้ในอาร์เรย์องค์ประกอบแบบฟอร์ม

สำหรับปุ่มส่งเราสามารถเพิ่มคลาสดังนี้

$ form ['actions'] ['submit'] ['# attributes'] ['class'] [] = 'use-ajax-submit';

ตัวเลือกที่สะอาดที่สุดที่ฉันพบคือตามข้อเสนอแนะ # 3 ของ @ mradcliffe ด้านบน เช่นในการกำหนดรูปแบบของคุณ -

$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'
        ]
    ];

จากนั้นในโมดูลที่กำหนดเองจะใช้ hook_preprocess_form_element:

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

หมายเหตุสิ่งนี้จะแทนที่คลาสป้ายกำกับใด ๆ ที่ Drupal ต้องการเพิ่ม ในกรณีของฉันที่ดี รหัสด้านบนสามารถเปลี่ยนแปลงได้เพื่อป้องกันสิ่งนี้หากจำเป็น

หากต้องการคำตอบ @Nate ให้สมบูรณ์หากคุณต้องการเพิ่มคลาสเหล่านี้ลงในแบบฟอร์มที่มีอยู่คุณสามารถทำได้ใน hook_form_alter:

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'];
}

จากนั้นใช้ hook_preprocess_form_element สำหรับฟิลด์ข้อความหรือ hook_preprocess_fieldset สำหรับฟิลด์วิทยุ:

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