Vuetify 2 breakpoints xbox. You signed out in another tab or window.

Vuetify 2 breakpoints xbox As a result, it overrides any other settings. sass (or src/scss/variables. I am having an issue with Vuetify not breaking my flex boxes like expected when viewing on small screen. Open M-Barari opened this issue Jun 6, 2021 · 2 comments Open Breakpoints in vuetify options not working #458. 17 sass version: 1. I downloaded the newest Vuetify package and the @mdi/font package as well. I've followed the instructions in the docs, as far as I can tell: I've added the plugins folder with the vuetify. Additionally, the breakpoint composable follows the Vuetify Grid naming conventions and has I'm having some unexpected behavior with breakpoints in Vuetify. vue. Theme. Improve this question. From Vuetify 2. 2 # Grid system . Naturally, this variable is available in your custom vue components and style files (provided you have the proper pre-processor setup to compile stylus). 2のUIコンポーネントの使い方を調べたときに得られたtips(Vue. Latest release . These classes can be applied using the following format {property}{direction}-{size}. Access display viewport information using the Vuetify Breakpoint composable. js; Share. This applies to offset, justify, align, and single breakpoint props on v-col. 5 to Vuetify 2. Spacing is used to create specific layouts within an application’s content. 6 Tailwind responsive breakpoints are not working. Vuetify comes with a 12 point grid system built using flexbox. 概要Vuetify. d-{value}, it is inferred to be . It is handy since it adds some "globals property" => The Breakpoints. Is it also possible to define breakpoints based on the size of the component?E. 21. For medium and up to xl (i. These classes can be applied to all breakpoints from xs to xl. x. Vuetify use v-html inside data table cell. The v-expansion-panel component is useful for reducing vertical space with large amounts of information. # Caveats . Data needs to be grouped by vendor with a customized group header row and also the item rows for each car model needs to be I am trying to use Nuxt 3 together with Vuetify 3 in SSR mode. I expect the form to break into 3 parts each spanning 12 cols when viewing on a small screen. when several components are shown on an overview page, it would use a more "compact" layout to be able to show the components side by side on large screens. I still feel it was a bad move by Vue 2, which had such a nice ecosystem, to create Vue 3 and expect developers to spend time in migrations rather than focusing I'm trying to only add a class to the v-flex if the grid size of the element is xs (so only on mobile). Vuetify - Change breakpoint sizes. Modified 3 years, 8 months ago. sass. We can specify breakpoints using the predefined breakpoint names (e. I feel like I'm missing something. keep mx-auto in xlOnly. If you want a more fine-grained control over the look and functionality of your carousel (touch, speed, momentum, number of images per slide, responsive behavior ), and don't want to implement it from scratch, I recommend you use Vue-Awesome-Swiper as a Vue plugin and stay away from Vuetify when it comes to carousels and image galleries, at least Vuetify v2: breakpointsVuetifyV2 (deprecated: breakpointsVuetify) Vuetify v3: breakpointsVuetifyV3; Ant Design: breakpointsAntDesign; add breakpoints for Vuetify v3 . Programming. Follow asked Jul 20, 2021 at 13:38. Reload to refresh your session. In my case I added but didn't confirm I needed deepmerge and fibers - sass and sass-loader were already installed. We can watch any element’s scrolling, including the element Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application. small-and- You signed in with another tab or window. In Vuetify this is named Spacing. g. 2 - sets margin or padding to 8px; 3 - sets margin or padding to 12px; 4 - sets margin or padding to 16px; 5 - sets margin or padding to 20px; # Breakpoints . 7. , md, lg) along with the specified conditions (-and-up, -and-down, -only). 3. You switched accounts on another tab or window. Adding/removing heavy components to the DOM is havier than show/hide them. With this in mind the xs breakpoint is assumed and has been removed from the props context. only - hide the element only on xs through xl breakpoints; and-down - hide the element on the specified breakpoint This is written for Vuetify 2. A better suggestion building on the comment by @ljubadr - you can use justify-center on the wrapper - then use grid columns to set width dependent on breakpoints for example sm-12 md-8 will fill 2/3 of the available space at the medium breakpoint and above, but on We use Vuetify’s breakpoint mixin to apply styles based on different breakpoints. It aims to provide all the tools necessary to create beautiful content rich applications. Add a comment | 1 Answer Sorted by: Reset to Source: SM - Changes the number of columns on small and greater breakpoints, Vuetify docs. Built using flex-box, the grid is used to layout an application's content. E. Code sandbox of project: Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company I have a component that have a v-tab list of items and, in certain resolutions, it works great. Vuetify - Breakpoints for columns. With Vuetify you can control various aspects of your application based upon the window size. js project for this to work. 5. medium and large) it will use 2 columns, and for xl or larger it will use 1 column. I think that using external CSS as Baka is suggesting is a better approach than modifying anything on vuetify base css, that is very probable to come back at you when code gets more complex. You can do it with mx-xl-auto - red it as {property}{direction}-{breakpoint}-{size}. The default resolutions are defined below in the Viewport Breakpoints table and can be modified by customizing the breakpoint service config. here the full list. Saved searches Use saved searches to filter your results more quickly I've recently upgraded from Vuetify 1. js 1. 17 Vue Version: 2. a086e - fix: stricter types. Documentation settings. 100 OS: Linux x86_64 Steps to reproduce Use non fluid container in 1. Ask Question Asked 5 years ago. 0 2,124 2 2 gold badges 14 14 silver badges 24 24 bronze badges 2 Thank you for the help , I just deleted the file and tried it in a new file it is working with the previous code I wrote I want to ovverride the vuetify default breakpoint for certain file. What will it allow you to do that you can't do today? API for the v-col component. It's a combination of two things . Vuetify docs. However this doesn't work, so how can I a Currently enable-resize-watch only open/close drawer when resized depending if mobile or desktop. scss file. How to use Vuetify 2 breakpoints with script setup syntax? Hot Network Questions Reviewing a paper that's badly written such that reading it takes a long time Could there be mini systems within our solar system, beyond what we can currently percieve? How to read inner-tube size ranges on Conti tubes? In vuetify they have helper classes for typography. There is no XS prop available to v-col. v2. Update your layout without creating new classes. The object is available at Specify the elements display property. The helper classes apply margin, padding, or gap to an element ranging from 0 to 16. js 2. Vuetify is a Material Design component framework for Vue. When I test the component with npm run serve (using the vue cli) works but once i transpile it and use it in other libraries, doesn't works correctly. This will allow you to assign/apply specific properties and attributes based upon viewport size. x releas Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Vuetify has a 12 point grid system. My solution is to override that move by adding the style 'style="transform: translateX(0%);top:48px;"' as below: Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Continue your learning with related content selected by the Team or move between pages by using the navigation links below. Software Development. , you want to show/hide something by clicking on a Show/Hide link. 5では. This service works in conjunction with grids and other responsive helper #How it works. Vuetifyで画面サイズで変わるBreakpointsを使って表示するスタイルや文字数を制限した話 Vuetifyでうまくやる方法があるのかも知れませんが、今回はこのような形で解決しました。 Breakpoints based props on grid components work in an andUp fashion. e. JavaScript----Follow. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or orientations. append slot mobile breakpoints. 25. v-if is a heavy operation by its nature (it manipulates with the DOM). Prevent Vuetify from printing to console "[Vuetify] Image load failed" Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company How do I get Tailwind and Vuetify to work together without causing style artifacts? 2 TailwindCSS responsive break points not working in Vue. vuetify data table mobile view. 6. With Vuetify you can control various aspects of your application based upon the window size. Vuetify data-table body. The grid is used to create specific layouts within an application’s content. Working with VueJS and trying to style some text based on Vuetify's viewport breakpoints I have achieved this by binding the style to a condition like this: Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company A logic to make a decision is a bit different. 1 and by the way if you're on a vanilla Vue environment this is the whole structure in Vuetify has a complete class list for responsive design. You can see the docs here. . Vuetify v2. scss by adding it to vue. Steps were based on sass variables. The property applies the type of spacing:. only - hide the element only on xs through xl breakpoints; and-down - hide the element on the specified breakpoint Is there a way to apply different CSS classes to an element in a Vue/Vuetify app at different breakpoints (screen widths), e. When using a base class,. As it turns out, generating custom css rules for different breakpoints is quite easy because Vuetify is leveraging Stylus and assigning the breakpoints to a Stylus variable. npm install -g vue-cli / yarn global add vue-cli vue create project-name cd project-name vue add vuetify These classes can be applied to all breakpoints from xs to xl. I'm losing my mind here with Vuetify 2. To do that, we add the Learn Vuetify easily. Vuetify dynamic typography by breakpoint? 0. When I choose display-1 for some element, In all resolutions the class gets the same font size (34px). 15fc0 - feat: add strategy option to allow desktop-first convention . Columns automatically take up the entire available space within its parent container unless you've specified the width it should take up before hand. Vuetify has a 12 point grid system. 0 11 2 2 bronze badges 1 Currently I have max-width set to 900px which caters for the table but when opening another table, the dialog doesn't adjust and become narrower. d-${value}-xs. 80K Followers How to use Vuetify 2 breakpoints with script setup syntax? Hot Network Questions How to balance minisplits and oil furnace for winter heat? What is the ideal way for a superhuman to carry a mortal? A giant wall in the middle of the ocean that splits the world in two Can I buy a stock without owning it? Vuetify has a 12 point grid system. Threshold values generate the ranges used for various breakpoints seen throughout vuetify and the useDisplay composable. Technology. jsのtipsも含む)を簡単にまとめました。UIコンポーネントの使い方については別記事に作成し CONTENTS: 1 Lesson-01-VuetifyBase 1 2 Lesson-02-Vuetify 3 2. When the page's width is under 600px, MobileRow is used. That way we hope our migration will be easier. KFVV KFVV. The reason is that the initial DOM rendering, which happens Additionally you can also display an element based upon the current viewport using lateral display helper classes. It consists of 5 media breakpoints used to target specific screen sizes or orientations: xs, sm, md, lg and xl. Each size increment was designed to align with common Material Design spacings. The props for grid components are actually classes that are derived from their defined properties. However, some web apps might work better with other resize breakpoints. 6 Environment Vuetify Version: 2. v10. # Enabling flexbox Using display utilities you can turn any element into a flexbox container transforming direct children elements into flex items. What is more, this functionality works with Nuxt 2 and Vuetify 2. scss of node_modules/vuetify at the first/last line of my variables file. The condition applies the class base on:. This service works in conjunction with grids and other responsive helper How to use Vuetify 2 breakpoints with script setup syntax? Hot Network Questions Odds of hitting a star with a laser shone in a random direction Why does a rod move faster when struck at the center rather than the edge, despite Newton's second law indicating the same acceleration?" Why is it YHWH and not 'HYH? We can watch the scrolling of a bound element and define and use breakpoints with Vuetify. Viewed 23k times 7 . M-Barari opened this issue Jun 6, 2021 · 2 comments Vuetify is a Material Design component framework for Vue. The Additionally you can also display an element based upon the current viewport using lateral display helper classes. i have to fix a vuetify custom component that extends from Vue Class and includes a V-Select component. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company I'm currently using vuetify 3 with nuxt 3 and I need to customize the grid-breakpoint globally in scss. My goal is to create a Vuetify 2 data table from a list of car models. The dropdown is working fine but since its just a trigger pad to pop open modals the requirement I'm trying to upgrade from Vuetify/Vue 2->3. 0. 0 doc, you should put default variables above the initial style import statement. The system uses an “and up” mentality starting from xs at 0px. 7 Last working version: 1. m - applies margin; p - applies padding; g - applies gap Access display viewport information using the Vuetify Breakpoint composable. According to Vuetify documentation, You can use classes like d-{breakpoint}-{value} to set display on different breakpoints, for example, You can use d-lg-none class to set display: none for an element only on large devices or use d-sm-flex class to set display: flex only on small devices. js; vuetify. Change vuetify simple-table to data-table. The default threshold values are displayed below. 115 2 2 How to use breakpoints in Vuetify for different screen sizes? 0. exra-small { color: black; background-color: white; } . It would be helpful if we could specify the breakpoint for the enable-resize-watcher property. on an extra large monitor the v-col takes 6 columns when it should be much smaller. 5と2. Hence, you have to use v-show/CSS when a component's visibility will be frequently triggered. By using the body slot, the default implementation is discarded, along with the mobile logic, so you must supply your own. 2. js, tried importing the variables. i have created a styles folder on my source directory and inside styles folder i created variables. You signed out in another tab or window. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company The issue was that for some reason vuetify was moving the navigation drawer 100% to the left and so hiding it. Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company Spread the love Related Posts Top React Hooks — Scroll and BreakpointsHooks contains our logic code in our React app. 0 and I'm having trouble getting it to work. Fortunately, there's a handy helper class we can use to easily switch styling Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company You're using mx-auto to keep the content centered then just set a max-width on the inner container. 3 Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company The default body implementation of v-data-table has two components for the table rows - Row and MobileRow. Vuetify supports the 12 point Material Design grid for laying out and controlling breakpoints for your application. These classes can be applied using the following format hidden-{breakpoint}-{condition}. Contribute to glebgorokhov/vuetify-cheat-sheet development by creating an account on GitHub. 1 v-btn. js バージョン1. 2. Once installed, create a folder called sass, scss or styles in your src directory with a file named variables. scss or variables. I'm currently not able to upgrade to Vuetify 2. I face a problem using display's breakpoints. So I'm pretty much brand new to Vuetify and Front End development, so sorry if my question is either simple or maybe even too vague. It aims to provide all the tools necessary to create beautiful I want to align two components to show some data on two columns, I've followed the official tutorial Vuetify Grid. Example: <v-col cols="3" md="2" xl="1"> For any screen sizes below the medium breakpoint v-col will use 3 columns of width. to hold it's content in a responsive manner including it's paddings and media query breakpoints. 0では使用するコンポーネントが異なり、バージョン1. 0, I need to convert the old layout/flex to the new row/col syntax and I can't seem to do it. The code below shows the thought process behind it. I love Vuetify 2, but unfortunately we have been replacing Vuetify components with our custom components without depending on any library. I'm not a front-end developer, just tasked with upgrading some legacy code to keep things functioning. Unfortunately, the migration guide seems to assume a level of baseline CSS knowledge and doesn't provide examples of how to fix everything that was removed. Props like justify-sm and justify-md exist, but justify-xs does not, it is simply justify; The xs prop does not exist on v-col. BakaDesu code would look like this with viewport breakpoints. I've got the following, but how do I 'wrap' them with the breakpoints? <v-row> <v-col xs="12" sm="4" >1</v-col> <v-col xs="12" sm="4" >2</v-col> <v-col xs="12" sm="4" >3</v-col> </v-row> On XS devices, it Let's go connect Tailwind breakpoints reactivity with VueJS 😇 First, I was inspired by what Vuetify was doing, as integrate the breakpoints logic via Plugins. In this article, we’ll look at Vuetify — TreeviewsVuetify is a popular UI framework for Vue apps. Vuetify comes with a 12 point grid system built using Flexbox. js file, and as far as I The following example demonstrates how the various sizes would appear at different breakpoints: # Font emphasis . I was expecting to: # Expansion panels . I want my columns to be side by side from medium to xl, and for sm and below I want each column to Vuetify converts the available breakpoints into an accessible object from within your application. 5では行をv-layout、カラムをv-flexコンポーネントで表現していました。 また、v-containerコンポーネントは名前は同じですがプロパティの種類が大きく変わっています。 I tried to prepend variables. On my case components are fixed like a rows list, on the screen I put the red square to show my goal, and show the result of the code. – Marty. This composable is a perfect bridge for projects where you want to use an existing Vuetify codebase, but want to smooth out the eventual migration to Vue 3/Vuetify 3 by working in the Composition API now. Using additional flex property utilities, you can customize their interaction even further. . Basics. Spacing. scss), so that the vuetify-loader is using it. We can watch any element’s scrolling, including the element that v-scroll is applied to. The grid is used So first things first: According to the vuetify documentation the file where you want to change vuetify defaults, must be located in src/sass/variables. And note: sometimes it only works by adding !important Hope this will help you Is it possible to change the size of the gutters between the grid columns depending on the breakpoints? For example: On a large display, I want the gutters to be 24px and anything less than or equal to a medium device, I want it to have 16px gutters. Threshold values generate the ranges used for various breakpoints seen throughout vuetify and the useDisplay Honestly no ;) I've just noticed the "needs reproduction" label But still you can provide a ready-to-run github repo that reproduces the issue. However, I saw that when it gets lower than 600px width, the tabs gets weird, they break a little and move off their space. I'm thinking of displaying it in a vertical way for lower resolutions, however, I can't override the tabs style even putting everything with the !important Access display viewport information using the Vuetify Breakpoint composable. Interestingly enough, the latter doesn't observe either my breakpoints, nor the Vuetify ones, even when zoom is at 100%. inside variables scss file my code is like this. Material design, by default, supports 100, 300, 400, 500, 700, 900 font weights and italicized text. 1 V-Select reset or clear selection after change. In this article, we’ll look at how to work with the Vuetify framework. d-{value}, it is How to use Vuetify 2 breakpoints with script setup syntax? Hot Network Questions What did Gell‐Mann dislike about Feynman’s book? Is the byline part of the license? What are these 16-Century Italian monetary symbols? Are integers conservatively embedded in the field of complex numbers? Vuetify has a 12 point grid system. The value property is one of: When setting a Vuetify comes with a 12 point grid system built using flexbox. 1. 8 Browsers: Chrome 75. js. config. x and compare Expected Behavior Use any 1. The breakpoint sizes are noted on the Vuetify grids documentation page. Hot Network Questions Grounding isolated electrical circuit from a floating source (EV V2L) You signed in with another tab or window. And am building it with vue-cli-service. What I need is to know if there is any way of creating vue libraries with vuetify dependencies. 2 Tailwindcss responsive breakpoints are not working. Am also using vuetify for the styles. It contains 5 types of media breakpoints that are used for targeting specific screen sizes or In this article, we’ll look at how to work with the Vuetify framework. # Usage when printing a vue component made with help of vuetify on mobile it only shows the component as if it was in mobile , not a4 size , how can I force it to use a4 size when printing ? How to use breakpoints in Vuetify for different screen sizes? 0. Written by John Au-Yeung. The d-flex sets the CSS of the according element to display: flex !important. d3317 - feat: enable passing ref or getter to get breakpoints . We can create our own hooks Getting Started with VuetifyVuetify is a popular UI framework for Vue apps. Essentially, the toolbar should be able to have many toolbar items on the right side, that when resizing the window to smaller breakpoints, will begin to move the buttons below the other ones on a new line, increasing the How to use Vuetify 2 breakpoints with script setup syntax? Hot Network Questions Lead author has added another author without discussing with me Finding lower bound of a function for squeeze theorem How to deal with academic loneliness? Sci-fi novel called the Ice Palace from the 80s How to use Vuetify 2 breakpoints with script setup syntax? Hot Network Questions Why is "as well" used here? How is Teal'c able to use a rope across the stargate event horizon? Why do they add 'la' before 'Señora Ramos'? Do wizards add three free spells to their spellbook at third level when they choose their subclass, or only two? Thanks for suggestions but I managed to get it working the way I want it to work. Spacing helpers are useful for modifying the padding and margin of an element. # Display Breakpoints . Vuetify. I am using Vuetify v2. I have tried different solutions propose in the documentations and nothing seems to work. Fantastic, thank you for posting this. vuetify version: 2. Vuetify 2. Material Design Breakpoints; Device Code Type Range; Extra small: xs: Small to large phone < 600px: Small: sm: Small to medium tablet: 600px > < 960px: Medium: md: Large tablet to laptop: 960px > < 1264px* Large: lg: Desktop: 1264px > < 1904px* Extra large: xl: 4k and ultra-wide > 1904px* * -16px on desktop for browser scrollbar: How to use Vuetify 2 breakpoints with script setup syntax? Hot Network Questions How quickly could a probe reach the heliopause? Suggestion for catching a flight with short layover in Amsterdam Grounding a single receptacle Stack Overflow for Teams Where developers & technologists share private knowledge with coworkers; Advertising & Talent Reach devs & technologists worldwide about your product, service or employer brand; OverflowAI GenAI features for Teams; OverflowAPI Train & fine-tune LLMs; Labs The future of collective knowledge sharing; About the company I am working with the Vuetify toolbar, and trying to allow the toolbar items on smaller breakpoints move to a new line using the grid system. This service works in conjunction with grids and other responsive helper classes Breakpoint and conditional values return a boolean that is derived from the current viewport size. Web Development. Commented Dec 30, 2019 at 13:13. for example, . Vuetify is a popular UI framework for Vue apps. Remember to make sure that you have Vuetify and its SCSS styles set up in your Vue. As far as I can see, Vuetify allows you to define breakpoints based on viewport size. 3770. display-4 goods for h1. In this article, we’ll [] Breakpoints in vuetify options not working #458. The default functionality of the component is to only display one expansion-panel body at a time; however, with the multiple property, the expansion-panel can remain open until explicitly closed. Continue your learning with related content selected by the Team or move between pages by using the navigation links below. x and 2. Installing. The code below shows only div element with red background instead of green, although the screen size is large. Something really wonky is going on here. fiadur hxyfhe jbnblfm snl gshfrkh zypx uzoh bjymb xkor twy