Function useMdcDisplay

  • useMdcDisplay(): {
        height: Ref<number, number>;
        lg: Ref<boolean, boolean>;
        lgAndDown: Ref<boolean, boolean>;
        lgAndUp: Ref<boolean, boolean>;
        md: Ref<boolean, boolean>;
        mdAndDown: Ref<boolean, boolean>;
        mdAndUp: Ref<boolean, boolean>;
        mobile: ComputedRef<boolean>;
        mobileBreakpoint: Ref<number | DisplayBreakpoint, number | DisplayBreakpoint>;
        name: Ref<DisplayBreakpoint, DisplayBreakpoint>;
        platform: Ref<DisplayPlatform, DisplayPlatform>;
        sm: Ref<boolean, boolean>;
        smAndDown: Ref<boolean, boolean>;
        smAndUp: Ref<boolean, boolean>;
        thresholds: Ref<DisplayThresholds, DisplayThresholds>;
        width: Ref<number, number>;
        xl: Ref<boolean, boolean>;
        xlAndDown: Ref<boolean, boolean>;
        xlAndUp: Ref<boolean, boolean>;
        xs: Ref<boolean, boolean>;
        xxl: Ref<boolean, boolean>;
    }

  • ユーザーのデバイスのディスプレイに関する情報を参照可能なロジックを生成します。

    VuetifyのuseDisplayコンポーザブルをラップした関数です。

    Returns {
        height: Ref<number, number>;
        lg: Ref<boolean, boolean>;
        lgAndDown: Ref<boolean, boolean>;
        lgAndUp: Ref<boolean, boolean>;
        md: Ref<boolean, boolean>;
        mdAndDown: Ref<boolean, boolean>;
        mdAndUp: Ref<boolean, boolean>;
        mobile: ComputedRef<boolean>;
        mobileBreakpoint: Ref<number | DisplayBreakpoint, number | DisplayBreakpoint>;
        name: Ref<DisplayBreakpoint, DisplayBreakpoint>;
        platform: Ref<DisplayPlatform, DisplayPlatform>;
        sm: Ref<boolean, boolean>;
        smAndDown: Ref<boolean, boolean>;
        smAndUp: Ref<boolean, boolean>;
        thresholds: Ref<DisplayThresholds, DisplayThresholds>;
        width: Ref<number, number>;
        xl: Ref<boolean, boolean>;
        xlAndDown: Ref<boolean, boolean>;
        xlAndUp: Ref<boolean, boolean>;
        xs: Ref<boolean, boolean>;
        xxl: Ref<boolean, boolean>;
    }

    • height: Ref<number, number>
    • lg: Ref<boolean, boolean>
    • lgAndDown: Ref<boolean, boolean>
    • lgAndUp: Ref<boolean, boolean>
    • md: Ref<boolean, boolean>
    • mdAndDown: Ref<boolean, boolean>
    • mdAndUp: Ref<boolean, boolean>
    • mobile: ComputedRef<boolean>
    • mobileBreakpoint: Ref<number | DisplayBreakpoint, number | DisplayBreakpoint>
    • name: Ref<DisplayBreakpoint, DisplayBreakpoint>
    • platform: Ref<DisplayPlatform, DisplayPlatform>
    • sm: Ref<boolean, boolean>
    • smAndDown: Ref<boolean, boolean>
    • smAndUp: Ref<boolean, boolean>
    • thresholds: Ref<DisplayThresholds, DisplayThresholds>
    • width: Ref<number, number>
    • xl: Ref<boolean, boolean>
    • xlAndDown: Ref<boolean, boolean>
    • xlAndUp: Ref<boolean, boolean>
    • xs: Ref<boolean, boolean>
    • xxl: Ref<boolean, boolean>

    See

    Vuetify - useDisplay

    Example

    const { mobile } = Mdc.useMdcDisplay();
    // 現在のユーザーのデバイスがモバイルか否かを示します
    console.log(mobile)

Settings

Member Visibility