1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

aタグ href属性で、link_toと同じようにmethod指定する方法

Last updated at Posted at 2020-05-13

####結論
・aタグhref属性を使う際にも、
 例えば"data-method" => "delete"と記述することでmethod(Verb)を指定でき、
 link_toのように柔軟なリンク設定ができます。
・また、"data-confirm" => "この投稿を削除してよろしいですか?"というように、
 アラート設定することもできます。
・2行目の:titleで設定したテキストは、アイコンにマウスオンすると表示されます。

%a.btn.btn-danger{"aria-label" => "Delete", :href => "/posts/#{@post.id}", "data-method" => "delete", "data-confirm" => "この投稿を削除してよろしいですか?"}
 %i.far.fa-trash-alt{"aria-hidden" => "true", :title => "この投稿を削除しますか?"}
 %h.about_delete_button 削除する

仕上がりはこんな感じになります。

Image from Gyazo

####経緯
・font-awesomeのアイコンを利用し、それにリンクを貼るコードを記述する際に、
 コーディングをググってみたところ、href属性を使う必要性があるようでした。
・link_toではmethod指定することに慣れていたのですが、今回は記述方がすぐには分からず。
・該当する記事がすぐに見つからなかったので、簡単ですがメモとして残しました。

####参考にさせていただいた記事
https://qiita.com/haruya_hamasaki/items/b69de2c680bb01d88017
https://developer.mozilla.org/ja/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-label_attribute

ご指摘等ありましたらコメントいただければ幸いです、

1
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?