Drupal 8フォームAPIを使用しているページのラベルにCSSクラスを追加したいのですが、それを適用する方法についてオンラインでリファレンスを見つけることができませんでした。以下を使用しました回避策ですが、奇妙な結果が生じます。
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ステートメントが間違った場所にあるだけでなく、2回レンダリングされます。
私は数年前にこれが不可能であることを示す投稿を見つけましたが、それ以降、D8で修正されたことを期待しています。接頭辞/接尾辞ではなく、個別の配列要素として実行したいと思います。
PS:このサイトはDrupal 8.0.0-rc2です。
私はこれが古いスレッドであることを知っていますが、誰にとってもグーグルです。
この手がかりはtemplate_preprocess_form_element()
にあります。
$element += [
'#title_display' => 'before',
'#wrapper_attributes' => [],
'#label_attributes' => [],
];
#label_attributes
は標準の属性配列なので、['class' => ['my-class', 'other-class']]
でクラスを設定するのは非常に簡単です
#title_display
は3つの値を取ります:
before:ラベルは要素の前に出力されます。これがデフォルトです。
after:要素の後にラベルが出力されます。たとえば、これはラジオおよびチェックボックスの#type要素に使用されます。
これをチェックしたところ、ラベル要素に直接クラスを追加することができないと思います。
ご存知のように、クラスは通常、次のように#attributesで追加されます。
$form['foo'] = array(
'#type' => 'textfield',
'#title' => 'Foo',
'#attributes' => array('class' => array('first-class', 'second-class')),
);
ただし、テストしただけで、#attributesはLabel要素にクラスを追加しません。
ラッパーフォーム要素を追加し、それにクラスを与え、ラッパー要素の子であるという事実に基づいてラベルをスタイルすることは可能ですか?このような:
$form['container'] = array(
'#type' => 'container',
'#attributes' => array('class' => array('your-class')),
);
$form['container']['foo'] = array(
'#type' => 'textfield',
'#title' => 'Foo',
);
これで、例のテキストフィールド(およびそのラベル)が、your-classを含むDIV要素内にレンダリングされます。つまり、ラベルをスタイルできます。
.your-class label {
/* your CSS here */
}
Drupal> = 8.0.0でこれを行うにはいくつかのオプションがあります。これらはすべて、テーマのテンプレートオーバーライドを中心に展開しますが、モジュールは、他のモジュールによって定義されたテンプレート前処理フックを実装する ことができる必要があります
form-control
クラスを取得する場合に機能します。form-control
クラスを属性に追加できます。$variables['label']
を上書きしないようにロジックを追加して、フォーム要素配列の定義済みキーから値を取得することもできます。送信ボタンについては、以下のようなクラスを追加できます。
$ form ['actions'] ['submit'] ['#attributes'] ['class'] [] = 'use-ajax-submit';
@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);
}
}
}
私が見つけた最もクリーンなオプションは、上記の@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'];
}
}
これはすべてのラベルクラスをオーバーライドすることに注意してくださいDrupal追加したい場合。私の場合は問題ありません。上記のコードは、必要に応じてこれを防ぐために変更できます。