# Display Breakpoints

# ブレークポイントサービスオブジェクト

ブレークポイントサービスのpublic signatureは次のとおりです:

{
  // Breakpoints
  xs: boolean
  sm: boolean
  md: boolean
  lg: boolean
  xl: boolean

  // Conditionals
  xsOnly: boolean
  smOnly: boolean
  smAndDown: boolean
  smAndUp: boolean
  mdOnly: boolean
  mdAndDown: boolean
  mdAndUp: boolean
  lgOnly: boolean
  lgAndDown: boolean
  lgAndUp: boolean
  xlOnly: boolean

  // 画面の幅 < mobileBreakpoint のとき true
  mobile: boolean
  mobileBreakpoint: number

  // Current breakpoint name (e.g. 'md')
  name: string

  // Dimensions
  height: number
  width: number

  // Thresholds
  // オプションで設定可能
  {
    xs: number
    sm: number
    md: number
    lg: number
  }

  // Scrollbar
  scrollBarWidth: number
}

Access these properties within Vue files by referencing $vuetify.breakpoint.<property>; where <property> corresponds to a value listed in the Breakpoint service object. In the following snippet we log the current viewport width to the console once the component fires the mounted lifecycle hook:

<!-- Vue Component -->

<script>
  export default {
    mounted () {
      console.log(this.$vuetify.breakpoint.width)
    }
  }
</script>

While the $vuetify object supports SSR (Server-Side Rendering) including platforms such as NUXT, the breakpoint service detects the height and width values as 0. This sets the initial breakpoint size to xs and in some cases can cause the layout to snap in place when the client side is hydrated in NUXT. In the upcoming section we demonstrate how to use boolean breakpoint values in the template and script tags of Vue components.

# ブレークポイント条件

The breakpoint and conditional values return a boolean that is derived from the current viewport size. Additionally, the breakpoint service mimics the Vuetify Grid naming conventions and has access to properties such as xlOnly, xsOnly, mdAndDown, and others. In the following example we change the minimum height of v-sheet to 300 when on the extra small breakpoint and only show rounded corners on extra small screens:

<!-- Vue Component -->

<template>
  <v-sheet
    :min-height="$vuetify.breakpoint.xs ? 300 : '20vh'"
    :rounded="$vuetify.breakpoint.xsOnly"
  >
    ...
  </v-sheet>
</template>

These conditional values enable responsive functionality to Vuetify features that don’t support responsive by default or at all. In the next section we customize the default breakpoint values used in both JavaScript and CSS.

# モバイルブレークポイント

mobileBreakpoint オプションは、有効な設定オプションとしてブレークポイント名 (xs, sm, md, lg, xl) を受け付けます。 指定された値は、 v-navigation-drawer のようなコンポーネントをサポートするように伝播されます。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  breakpoint: {
    mobileBreakpoint: 'sm' // This is equivalent to a value of 960
  },
})

個々のコンポーネントは、 mobile-breakpoint プロパティを使用して、継承された デフォルト の値を上書きできます。 次の例では、ビューポートのサイズが 1024px 未満の場合、 mobile state に _v-banner_を強制します:

<template>
  <v-banner mobile-breakpoint="1024">
    ...
  </v-banner>
</template>

次のセクションでは、サイズブレークを決定する閾値をカスタマイズする方法について説明します。

# Thresholds

thresholds オプションは、ビューポートの計算に使用される値を変更します。 以下のスニペットは、 xs から lg ブレークポイントをオーバーライドし、 scrollBarWidth を 24 に増加します。

// src/plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

export default new Vuetify({
  breakpoint: {
    thresholds: {
      xs: 340,
      sm: 540,
      md: 800,
      lg: 1280,
    },
    scrollBarWidth: 24,
  },
})

ブレークポイントサービスに xl プロパティがないことに気づくかもしれません。これは意図的です。 ビューポートの計算は、常に _0_から始まり、上に向かって進んでいきます。 xs 閾値の 340 の値は、 0 から 340 のウィンドウサイズが、 extra small スクリーンであると見なされることを意味します。

これらの変更を cssヘルパークラス に伝えるには、 $grid-breakpoints SASS変数を新しい値で更新する必要があります。 large と extra-large の画面では、定義されたブレークポイントからブラウザのスクロールバーの幅を差し引きます。

// styles/variables.scss

$grid-breakpoints: (
  'xs': 0,
  'sm': 340px,
  'md': 540px,
  'lg': 800px - 24px,
  'xl': 1280px - 24px
);