SvelteはダイナミックCSSのスタイリングを容易にしますか？

Question

Svelteでは、コンポーネントの状態に応じて要素のクラスをどのように変更する必要がありますか？

たとえば、次の例のように、特定の条件のボタンにクラスを適用したい場合があります。今

<button class="{{class}}"> 

、これは一定の条件の下で、クラス名、または空の文字列を返すことになるcomputed propertyを作成することによって達成することができます。

しかし、これが計算されたプロパティ名前空間を汚染しているかどうかについては懸念しています。たとえば、statusがある場合は、statusMessageのような動的テキストと、statusClassのようなクラスの両方を設定することが望ましい場合があります。

これを行うには、より良い方法がありますか、または計算されたプロパティが行く方法はありますか？ Svelte用に計画されているCSSを明示的にサポートしていますか？

Answer 1

あなたがそうのように、インライン式を使用することができます。

ことが可能な値は、単にテンプレートを見ることであるかすぐには明らかなので、一般的に計算されたプロパティを使用するよりはましだ

<button class='{{active ? "active": "inactive"}}'> 
    {{active ? 'Selected' : 'Select this'}} 
</button> 

。

式は手に負えなくなってしまう場合にも、ヘルパー関数を使用することができます - あなたが計算した値にこれらを好むかもしれないいくつかの状況で：

<button class='{{getClass(status)}}'>{{getText(status)}}</button> 

<script> 
    export default { 
    helpers: { 
     getClass(status) { 
     // ... 
     }, 
     getText(status) { 
     // ... 
     } 
    } 
    }; 
</script>