SvelteTemplate syntax

style:

style: ディレクティブは、1つの要素に複数のスタイルを設定するための短縮形の記法を提供します。

<!-- These are equivalent -->
<div style:color="red">...</div>
<div style="color: red;">...</div>

値には任意の式を含めることができます:

<div style:color={myColor}>...</div>

短縮形の形式も使用可能です:

<div style:color>...</div>

1つの要素に複数のスタイルを設定することができます:

<div style:color style:width="12rem" style:background-color={darkMode ? 'black' : 'white'}>...</div>

スタイルを important としてマークするには、|important 修飾子を使用します:

<div style:color|important="red">...</div>

style: ディレクティブが style 属性と組み合わせて使用される場合、ディレクティブが優先されます、たとえ !important プロパティが指定されていてもです:

<div style:color="red" style="color: blue">This will be red</div>
<div style:color="red" style="color: blue !important">This will still be red</div>

previous next