मैं एक सीएसएस वर्ग को एक फार्म लेबल में कैसे जोड़ूं?

Question

मैं एक पेज पर एक 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 बयान है, बल्कि इसे दो बार प्रस्तुत किया गया है।

मैंने कई साल पहले पोस्टिंग पाई थी कि यह संभव नहीं था, लेकिन मुझे उम्मीद है कि तब से, और डी 8 के साथ, यह तय हो गया है। मैं इसे उपसर्ग / प्रत्यय के साथ नहीं करना चाहता, लेकिन एक अलग सरणी तत्व के रूप में।

PS: यह साइट Drupal 8.0.0-rc2 है

Answer 1

मुझे पता है कि यह एक पुराना धागा है, लेकिन किसी के लिए भी Googling है।

इसका सुराग अंदर है template_preprocess_form_element()।

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

#label_attributes एक मानक विशेषता सरणी है, इसलिए कक्षा को सेट करना बहुत आसान है ['class' => ['my-class', 'other-class']]

#title_display 3 मान लेता है:

• पहले: लेबल तत्व से पहले आउटपुट है। यह डिफ़ॉल्ट है।

• बाद: लेबल तत्व के बाद आउटपुट है। उदाहरण के लिए, इसका उपयोग रेडियो और चेकबॉक्स # टाइप तत्वों के लिए किया जाता है।

• अदृश्य: स्क्रीन पाठकों के लिए लेबल महत्वपूर्ण हैं, ताकि वे फ़ॉर्म के माध्यम से ठीक से नेविगेट कर सकें लेकिन नेत्रहीन रूप से विचलित हो सकते हैं। यह गुण स्क्रीन रीडर को छोड़कर सभी के लिए लेबल छुपाता है।
• विशेषता: टूलटिप बनाने के लिए तत्व पर शीर्षक विशेषता सेट करें लेकिन कोई लेबल तत्व आउटपुट नहीं करता है। यह केवल चेकबॉक्स और रेडियो के लिए समर्थित है

Answer 2

मैंने अभी-अभी इसकी जाँच की है और मुझे विश्वास नहीं है कि लेबल तत्व में सीधे वर्ग जोड़ना संभव है।

जैसा कि आप शायद सबसे अधिक जानते हैं, कक्षाएं आमतौर पर #attributes के साथ इस प्रकार जोड़ी जाती हैं:

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

हालाँकि, मैंने अभी-अभी परीक्षण किया है और #attributes लेबल तत्व में कक्षाएं नहीं जोड़ता है।

क्या आपके लिए एक रैपर फॉर्म एलिमेंट जोड़ना संभव है, उसे एक क्लास दें और फिर अपने लेबल को इस तथ्य के आधार पर स्टाइल करें कि वह रैपर एलिमेंट का बच्चा हो? ऐशे ही:

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

अब, यह एक DIV तत्व के अंदर उदाहरण फ़ील्ड (और उसके लेबल) को प्रस्तुत करेगा जिसमें आपकी कक्षा है अर्थात आप उस शैली को लेबल कर सकते हैं:

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

Answer 3

Drupal> = 8.0.0 में ऐसा करने के लिए कई विकल्प हैं। ये सभी वास्तव में एक विषय में टेम्पलेट ओवरराइड के आसपास घूमते हैं, लेकिन एक मॉड्यूल अन्य मॉड्यूल द्वारा परिभाषित टेम्पलेट प्रीप्रोसेस हुक को लागू करने में सक्षम होना चाहिए

1. फॉर्म-एलिमेंट-लेबल . html.twig को सीधे ओवरराइड करने का सबसे सरल, लेकिन गैर-गतिशील विकल्प है । यह काम कर सकता है अगर सभी लेबलों को form-controlकक्षा मिलेगी ।
2. इन पंक्तियों के साथ, template_preprocess_form_element_label को लागू करने से आप एक ही काम कर सकते हैं और form-controlटेम्पलेट को ओवरराइड किए बिना विशेषताओं में वर्ग जोड़ सकते हैं ।
3. आप template_preprocess_form_element को भी लागू कर सकते हैं , और तर्क को अधिलेखित नहीं करने के लिए जोड़ $variables['label']सकते हैं, लेकिन प्रपत्र तत्व सरणी पर कुछ परिभाषित कुंजी से इसके मान ले सकते हैं।

Answer 4

सबमिट बटन के लिए हम नीचे की तरह वर्ग जोड़ सकते हैं:

$ फॉर्म ['एक्शन'] ['सबमिट'] ['# विशेषताएँ'] ['क्लास'] [] = ’उपयोग-अजाक्स-सबमिट’;

Answer 5

सबसे अच्छा विकल्प जो मुझे मिला वह @ mradcliffe के # 3 सुझाव के अनुसार है। जैसे आपके फॉर्म की परिभाषा -

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

ध्यान दें कि ड्रुपल किसी भी लेबल वर्ग को जोड़ना चाहता है। मेरे मामले में यह ठीक है। यदि आवश्यक हो तो इसे रोकने के लिए ऊपर दिए गए कोड को बदल दिया जा सकता है।

Answer 6

@ उत्तर को पूरा करने के लिए, यदि आप थीस कक्षाओं को एक मौजूदा रूप में जोड़ना चाहते हैं, तो आप इसे हुक_फॉर्मल पेपर में कर सकते हैं:

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

और फिर टेक्स्ट फ़ील्ड के लिए हुक_परप्रोसेसर_फॉर्म_लेमेंट का उपयोग करें या रेडियो क्षेत्र के लिए एक हुक_प्रोसेसर_फिल्डेट:

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