SvelteKit 반응형 도우미

복잡한 미디어 쿼리 작성에 지치셨나요? SvelteKit window 지시어는 프로그래밍 방식으로 단순화하는 데 도움이 될 수 있습니다. 이 레이아웃 구성 요소 ViewoirtSettingsCatcher 구성 요소 및 관련 저장소 BiewportSettingsStore의 도움으로 이 항목에 표시됩니다.

뷰포트 내부 크기 잡기

svlete:window 지시어 바인딩의 매우 간단한 사용:

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

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

매장 내 등록 중

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

연관된 계산 저장소

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 
}

간단한 사용법

구성 요소에서 ViewportSettingsStore를 가져오기만 하면 됩니다

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

자 짜잔... 끝났습니다.

위 내용은 SvelteKit 반응형 도우미의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!