1.0.2 • Published 1 year ago
svelte-multicssclasses v1.0.2
svelte-multicssclasses
Use multiple classes with one condition
Usage
pnpm i -D svelte-multicssclasses
OR
npm i -D svelte-multicssclasses
OR
yarn i -D svelte-multicssclasses
// vite.config.js
import { sveltekit } from '@sveltejs/kit/vite'
import multicssclass from 'svelte-multicssclasses'
const config = {
plugins: [multicssclass(), sveltekit()] //ADD HERE
}
export default config
Example 1:
const sampleBoolean = true
Use . to combine multiple classes
<div class:sample-class-1.sample-class-2.sample-class-3="{sampleBoolean}">Example</div>
WILL BE COMPILED TO
<div
class:sample-class-1="{sampleBoolean}"
class:sample-class-2="{sampleBoolean}"
class:sample-class-3="{sampleBoolean}"
>
Example
</div>
WILL BE COMPILED TO
<div class="sample-class-1 sample-class-2 sample-class-3">Example</div>
Example 2:
const sampleBoolean = true
Use ! infront of class to negate condition for that specific class
<div class:!sample-class-1.!sample-class-2.sample-class-3="{sampleBoolean}">Example</div>
WILL BE COMPILED TO
<div
class:sample-class-1="{!sampleBoolean}"
class:sample-class-2="{!sampleBoolean}"
class:sample-class-3="{sampleBoolean}"
>
Example
</div>
WILL BE COMPILED TO
<div class="sample-class-3">Example</div>