LoginSignup
8
8

More than 5 years have passed since last update.

stylesheet_link_tag ( link_to ) メソッドでのカスタムデータ属性(独自データ属性)の利用

Last updated at Posted at 2015-02-12

はじめに

skrollr-stylesheetsをMiddleman で使おうとして、
stylesheet_link_tagメソッドでのカスタムデータ属性の指定にちょっぴり迷ったのでメモ。

いつもlink_toメソッドを使うときのように
下記のように盲目的に
data-skrollr-stylesheet: ""
とやったらエラー(そりゃそうだ)

= stylesheet_link_tag "skrollr/index", media: "only screen and (min-width: 1200px)", data-skrollr-stylesheet: ""

カスタムデータ属性の指定

data: {"skrollr-stylesheet" => ""}
もしくは
"data-skrollr-stylesheet" => ""
って感じで指定すればよい。

Railsでも同じ。

(以下の例はテンプレートはSlim使っています。)

data: 使う場合の例

= stylesheet_link_tag "skrollr/index", media: "only screen and (min-width: 1200px)", data: {"skrollr-stylesheet" => ""}

data: を使わず一気に書く場合の例

= stylesheet_link_tag "skrollr/index", media: "only screen and (min-width: 1200px)", "data-skrollr-stylesheet" => ""

変換後

<link href="/stylesheets/skrollr/index.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1200px)" data-skrollr-stylesheet="">

当然ですが、link_toでも同じように記述すればOKでした。

8
8
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
8
8