web-dev-qa-db-ja.com

通常の送信の「入力」タイプを「ボタン」タグ付きの「ボタン」タイプに変更します

Drupal 8では、通常のフォーム送信ボタンをDrupalからボタンタグに変更できますか？

これは私が達成する必要がある出力です：

<button type="button" class="search-box__button">
  <svg class="icon search-box__open">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/img/svg-Sprite.svg#icon-search"></use>
  </svg>
</button>
theming8forms
7
Kevin

まあそれは速かった...私は私の直感を使用して、次のことを行うことによってそれを達成することができました：

Mytheme.theme：

/**
 * @param $suggestions
 * @param array $variables
 */
function mytheme_theme_suggestions_input_alter(&$suggestions, array $variables) {
  $element = $variables['element'];

  if (isset($element['#attributes']['data-twig-suggestion'])) {
    $suggestions[] = 'input__' . $element['#type'] . '__' . $element['#attributes']['data-twig-suggestion'];
  }
}

/**
 * @param $form
 * @param \Drupal\Core\Form\FormStateInterface $form_state
 * @param $form_id
 */
function mytheme_form_alter(&$form, FormStateInterface $form_state, $form_id) {
  if ($form['#id'] == 'views-exposed-form-search-results') {  
    $form['actions']['submit']['#attributes']['data-twig-suggestion'] = 'search_results_submit';
    $form['actions']['submit']['#attributes']['class'][] = 'search-box__button';
  }
}

入力--submit--search-results-submit.html.twig

{#
/**
 * @file
 * Theme override for an 'input' #type form element.
 *
 * Available variables:
 * - attributes: A list of HTML attributes for the input element.
 * - children: Optional additional rendered elements.
 *
 * @see template_preprocess_input()
 */
#}
<button{{ attributes }}>
  <svg class="icon search-box__open">
    <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/themes/custom/mytheme/build/img/svg-Sprite.svg#icon-search"></use>
  </svg>
</button>

フォームは引き続き送信され、期待どおりに機能します。これは一般的なアプローチですか、それとも少なくとも受け入れられますか？より良い方法がない限り、私はこれで行きます。

13
Kevin

あなたは単に inline_template 。

$build['hello']  = [
  '#type' => 'inline_template',
  '#template' => '<button type="button" class="search-box__button">
     <svg class="icon search-box__open">
       <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/build/img/svg-Sprite.svg#icon-search"></use>
     </svg>
   </button>',
];
5
leymannx