Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(useDisplay): more intuitive use of mobile-breakpoint #20311

Merged
merged 2 commits into from
Jan 27, 2025

Conversation

J-Sek
Copy link
Contributor

@J-Sek J-Sek commented Aug 10, 2024

resolves #19883

Description

The mobile-breakpoint prop requires :mobile='null' to work, otherwise it is ignored. It is not intuitive and developers ask about it on Discord or assume it does not work, because components' API docs don't mention this requirement.

The reason Docs do not use description from api-generator » ... » display.json is that most components already have their own description for mobile prop.

I wish we could let user work with mobile-breakpoint and don't bother about the other prop. The logic could then be:

  1. If mobile === true, then force mobile view
  2. If mobile-breakpoint is set, accept it's value to resolve mobile state
  3. All defaults (not using these props) means no responsiveness (as suggested by comment under [Bug Report][3.6.1] VDataTable mobile mode is based on screen width, not container width #19726)
  4. mobile='null' makes the component rely on default mobile breakpoint

Markup:

<template>
  <v-app theme="dark">
    <v-container>
      <pre class="mt-8">
      $vuetify.display.width: {{ $vuetify.display.width }}px
      mobile-breakpoint="md" instructs labels to hide below the 960px (md breakpoint)
      </pre>
      <v-stepper mobile-breakpoint="md">
        <v-stepper-header>
          <template v-for="(item, i) in items" :key="i">
            <v-divider v-if="i" />
            <v-stepper-item v-bind="item" />
          </template>
        </v-stepper-header>
      </v-stepper>

      <pre class="mt-8">
      $vuetify.display.width: {{ $vuetify.display.width }}px
      :mobile-breakpoint="800" instructs labels to hide below the 800px
      </pre>
      <v-stepper :mobile-breakpoint="800">
        <v-stepper-header>
          <template v-for="(item, i) in items" :key="i">
            <v-divider v-if="i" />
            <v-stepper-item v-bind="item" />
          </template>
        </v-stepper-header>
      </v-stepper>
    </v-container>
  </v-app>
</template>

<script setup lang="ts">
  const items = Array.from({ length: 4 }).map((_, i) => ({
    title: `Step ${i + 1}`,
    subtitle: `Step ${i + 1} subtitle`,
    value: i + 1,
  }))
</script>

@KaelWD KaelWD force-pushed the master branch 2 times, most recently from e20cfec to 2766105 Compare August 15, 2024 09:17
@KaelWD KaelWD force-pushed the master branch 3 times, most recently from 4c970f9 to 6a3285f Compare September 3, 2024 18:11
Co-authored-by: John Leider <9064066+johnleider@users.noreply.github.com>
@MajesticPotatoe MajesticPotatoe added T: bug Functionality that does not work as intended/expected E: display Display composable labels Oct 28, 2024
@johnleider johnleider changed the title fix(useDisplay): More intuitive use of mobile-breakpoint fix(useDisplay): more intuitive use of mobile-breakpoint Jan 27, 2025
@johnleider johnleider merged commit cff590e into vuetifyjs:master Jan 27, 2025
11 checks passed
@J-Sek J-Sek deleted the fix-19883 branch January 28, 2025 08:49
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
E: display Display composable T: bug Functionality that does not work as intended/expected
Projects
None yet
Development

Successfully merging this pull request may close these issues.

[Bug Report][3.6.4] Mobile breakpoint doesn't work anymore
3 participants