Assistant réactif SvelteKit

Fatigué d'écrire des requêtes média compliquées ? Les directives de fenêtre SvelteKit peuvent vous aider à les simplifier par programmation. A l'aide de ce composant de mise en page ViewoirtSettingsCatcher et de son magasin associé BiewportSettingsStore, ils sont présentés dans cette rubrique.

Saisir les dimensions intérieures de la fenêtre

Utilisation très simple des liaisons de la directive svlete:window :

<!-- ViewportSettingsCatchr.svelte -->
<script lang="ts">
    let innerWidth: number = 1600
    let innerHeight: number = 1200
</script>

<svelte:window bind:innerWidth vind:nnerHeight />

Inscription en magasin

$: ViewportSettingsStore.register ({ innerWidth, innerHeight })

le magasin de calcul associé

import { writable} from 'svelte/store'
const { subscribe, update  } = writable ({
    innerWidth: 1600, 
    innerHeight: 1200,
    ratio: 16/12, 
    orientation: 'landscape',   
    wide: false
})

function register ({ innerWidth, innerHeight }) {
    const ratio = innerWidth / innerHeight
    const orientation = ratio >= 1 ? 'landscape' : 'portrait'
    const wide = (ratio > 2) || (ratio < 0.5)

    update ((state) => {
        return {
            innerWidth, 
            innerHeight,
            orientation,
            ratio,
            wide
        }
    })
}

export const ViewportSettingsStore = {
    subscribe, register 
}

utilisation simple

Importez simplement ViewportSettingsStore dans votre composant

<div class:wide={ $ViewportSettingsStore.orientation = === 'landscape' } />

Et voilà... C'est fait.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!