属性

タグの属性はHTMLに似ていますが（オプションでカンマ区切りも可能）、その値は通常のJavaScriptです。

（注：このページの例では、空白制御のためにパイプ文字（|）を使用しています。）

<a href="//google.com">Google</a>
<a class="button" href="//google.com">Google</a>
<a class="button" href="//google.com">Google</a>

通常のJavaScript式も問題なく使えます。

<body class="authed"></body>

複数行属性

属性がたくさんある場合は、複数行に分けて記述することもできます。

<input type="checkbox" name="agreement" checked="checked" />

JavaScriptランタイムがES2015 テンプレートリテラル（Node.js/io.js 1.0.0以降を含む）をサポートしている場合は、属性にその構文を使用できます。これは、非常に長い値を持つ属性に非常に役立ちます。

<input data-json="
  {
    &quot;very-long&quot;: &quot;piece of &quot;,
    &quot;data&quot;: true
  }
" />

引用符付き属性

属性名にJavaScriptの構文を妨げる可能性のある奇妙な文字が含まれている場合は、""または''で囲むか、カンマで区切って異なる属性を分離します。このような文字の例として、[]や()（Angular 2で頻繁に使用される）があります。

index.pug:4:11
    2| //- function call instead of a attribute name,
    3| //- resulting in the unusual error.
  > 4| div(class='div-class' (click)='play()')
-----------------^

Syntax Error: Assigning to rvalue

<div class="div-class" (click)="play()"></div>
<div class="div-class" (click)="play()"></div>

属性のインターポレーション

注意

以前のバージョンのPug/Jadeでは、次のようなインターポレーション構文をサポートしていました。

a(href="/#{url}") Link

この構文はサポートされなくなりました。代替案は以下にあります。（Pug v2と以前のバージョン間のその他の非互換性については、移行ガイドを参照してください。）

属性に変数を含めるために使用できる代替案をいくつか紹介します。

属性をJavaScriptで記述するだけです。

- var url = 'pug-test.html'; a(href='/' + url) Link | | - url = 'https://example.com/' a(href=url) Another link
<a href="/pug-test.html">Link</a> <a href="https://example.com/">Another link</a>
JavaScriptランタイムがES2015 テンプレートリテラル（Node.js/io.js 1.0.0以降を含む）をサポートしている場合は、その構文を使用して属性を簡略化することもできます。

- var btnType = 'info' - var btnSize = 'lg' button(type='button' class='btn btn-' + btnType + ' btn-' + btnSize) | | button(type='button' class=`btn btn-${btnType} btn-${btnSize}`)
<button class="btn btn-info btn-lg" type="button"></button> <button class="btn btn-info btn-lg" type="button"></button>

エスケープされていない属性

デフォルトでは、すべての属性はエスケープされます。つまり、クロスサイトスクリプティングなどの攻撃を防ぐために、特殊文字はエスケープシーケンスに置き換えられます。特殊文字を使用する必要がある場合は、=の代わりに!=を使用してください。

<div escaped="&lt;code&gt;"></div>
<div unescaped="<code>"></div>

注意

エスケープされていないバッファ付きコードは危険な場合があります。クロスサイトスクリプティングを回避するために、ユーザー入力をサニタイズするようにしてください。

ブール属性

ブール属性はPugによってミラーリングされます。ブール値（trueとfalse）が受け入れられます。値が指定されていない場合は、trueが想定されます。

<input type="checkbox" checked="checked" />
<input type="checkbox" checked="checked" />
<input type="checkbox" />
<input type="checkbox" checked="true" />

doctypeがhtmlの場合、Pugは属性をミラーリングしないことを認識し、代わりに（すべてのブラウザで理解される）簡潔なスタイルを使用します。

<!DOCTYPE html>
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox">
<input type="checkbox" checked="checked">

スタイル属性

style属性は、通常の属性と同様に文字列にすることができますが、JavaScriptでスタイルが生成される場合に便利なオブジェクトにすることもできます。

<a style="color:red;background:green;"></a>

クラス属性

class属性は、通常の属性と同様に文字列にすることができますが、JavaScriptから生成する場合に便利なクラス名の配列にすることもできます。

<a class="foo bar baz"></a>
<a class="bang foo bar baz bing"></a>

また、クラス名をtrueまたはfalseの値にマッピングするオブジェクトにすることもできます。これは条件付きクラスを適用する場合に便利です。

<a href="/">Home</a>
<a class="active" href="/about">About</a>

クラスリテラル

クラスは、.classname構文を使用して定義できます。

<a class="button"></a>

divはタグとして非常に一般的な選択肢であるため、タグ名を省略するとデフォルトになります。

<div class="content"></div>

IDリテラル

IDは、#idname構文を使用して定義できます。

<a id="main-link"></a>

divはタグとして非常に一般的な選択肢であるため、タグ名を省略するとデフォルトになります。

<div id="content"></div>

&attributes

「and attributes」と発音される&attributes構文を使用すると、オブジェクトを要素の属性に展開できます。

<div id="foo" data-bar="foo" data-foo="bar"></div>

上記の例では、オブジェクトリテラルを使用しています。ただし、値がオブジェクトである変数を使用することもできます。（参照：Mixin属性）。

<div class="baz" id="foo" data-bar="foo"></div>

注意

&attributesを使用して適用された属性は、自動的にエスケープされません。クロスサイトスクリプティング（XSS）を回避するために、ユーザー入力をサニタイズする必要があります。mixin呼び出しからattributesを渡す場合、これは自動的に行われます。

属性

複数行属性 ¶

引用符付き属性 ¶

属性のインターポレーション ¶

注意

エスケープされていない属性 ¶

注意

ブール属性 ¶

スタイル属性 ¶

クラス属性 ¶

クラスリテラル ¶

IDリテラル ¶

&attributes ¶

注意