আমি কীভাবে ফর্ম লেবেলে একটি সিএসএস ক্লাস যুক্ত করব?

Question

ড্রুপাল 8 ফর্ম এপিআই ব্যবহার করছে এমন পৃষ্ঠায় একটি লেবেলে আমি একটি সিএসএস ক্লাস যুক্ত করতে চাই। কীভাবে এটি প্রয়োগ করতে হবে সে সম্পর্কে আমি অনলাইনে একটি রেফারেন্স খুঁজে পেতে অক্ষম। আমি নিম্নলিখিত workaround ব্যবহার করেছি, কিন্তু এটি কিছু অদ্ভুত ফলাফল উত্পাদন করে।

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>

ডিভ স্টেটমেন্টটি কেবল ভুল জায়গায় নয় এটি দু'বার উপস্থাপন করা হয়েছে।

আমি বেশ কয়েক বছর আগে এমন পোস্টিং পেয়েছি যা দেখায় এটি সম্ভব ছিল না, তবে আমি আশা করছি যে তখন থেকে এবং ডি 8 এর সাথে এটি ঠিক হয়ে গেছে। আমি এটি উপসর্গ / প্রত্যয় দিয়ে করতে চাই না, তবে পৃথক অ্যারে উপাদান হিসাবে।

পিএস: এই সাইটটি দ্রুপাল 8.0.0-আরসি 2

Answer 1

আমি জানি এটি একটি পুরানো থ্রেড, তবে গুগলিং কারও পক্ষে।

এর ক্লুটি ভিতরে 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')),
);

যাইহোক, আমি সবেমাত্র পরীক্ষা করেছি এবং # ফলশ্রুতি কোনও লেবেলের উপাদানগুলিতে ক্লাস যুক্ত করে না।

আপনার পক্ষে র‌্যাপার ফর্ম উপাদান যুক্ত করা, এটির জন্য একটি ক্লাস দেওয়া এবং তারপরে আপনার লেবেলটি এটি মোড়কের উপাদানটির সন্তানের সত্যের ভিত্তিতে স্টাইল করা সম্ভব? এটার মত:

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

এখন, এটি আপনার ক্লাসযুক্ত একটি ডিআইভি উপাদানটির অভ্যন্তরে টেক্সটফিল্ড (এবং এর লেবেল) রেন্ডার করবে যার অর্থ আপনি লেবেল স্টাইল করতে পারেন:

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

Answer 3

Drupal> = 8.0.0 এ করার জন্য বেশ কয়েকটি বিকল্প রয়েছে। এই সমস্ত সত্যই একটি থিম মধ্যে টেমপ্লেট ওভাররাইড চারদিকে ঘুরে, কিন্তু একটি মডিউল অন্যান্য মডিউল দ্বারা সংজ্ঞায়িত টেমপ্লেট প্রাকপ্রসেস হুক বাস্তবায়ন করতে সক্ষম হওয়া উচিত

1. সবচেয়ে সহজ, তবে অ-গতিশীল বিকল্প হ'ল ফর্ম-এলিমেন্ট-লেবেল । Html.twig সরাসরি ওভাররাইড করা। সমস্ত লেবেল form-controlক্লাস পেলে এটি কাজ করতে পারে ।
2. এই লাইনগুলি অনুসরণ করে, টেমপ্লেট_প্রিপ্রসেস_ফর্ম_ইলেটমেন্ট_লাবেল বাস্তবায়ন আপনাকে একই কাজ করতে দেয় এবং form-controlটেমপ্লেটটিকে ওভাররাইড না করে গুণগুলিতে শ্রেণি যুক্ত করতে দেয়।
3. আপনি টেমপ্লেট_প্রেসপ্রসেস_ফর্ম_ইলেট বাস্তবায়ন করতে এবং ওভাররাইট না করার জন্য যুক্তি যুক্ত করতে $variables['label']পারেন, তবে ফর্ম এলিমেন্ট অ্যারের কোনও সংজ্ঞায়িত কী থেকে এর মানগুলি নিতে পারেন।

Answer 4

জমা বাটনগুলির জন্য আমরা নীচের মতো শ্রেণি যুক্ত করতে পারি:

$ form ['ক্রিয়াকলাপ'] ['জমা'] ['# বৈশিষ্ট্য'] ['শ্রেণি'] [] = 'ব্যবহার-অজ্যাক্স-জমা';

Answer 5

উপরে পাওয়া সর্বোত্তম বিকল্পটি হ'ল উপরের @ ম্যারাডক্লিফের # 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'
        ]
    ];

তারপরে একটি কাস্টম মডিউলে হুক_প্রিপ্রসেস_ফর্ম_ এলিমেন্টটি প্রয়োগ করুন:

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