v-img

Component documentation

The v-img is the start of the front-end pack and a very exciting addition to the framework. @KaelWD has been working tirelessly to bring a performant and flexible component to empower your applications. As a result, the vuetify-loader has been updated to support automatic progressive images. It is easier than ever to add special transitions, aspect-ratios and so much more.

Flexible usage

v-img is part of a group we call core components and will fuel the functionality of future updates (looking at you v-parallax and v-carousel).

Loading indicators

Supply a custom loading indicator to provide a custom experience for users.

Progressive images

With the power of the vuetify-loader, your application can now be configured to automatically create progressive images for your v-img use-cases. You also have the option to provide you very own lazy loaded image until the supplied has been downloaded.

v-rating

Component documentation

The second new component from the front-end pack is v-rating. A simple yet powerful component packed with plenty of functionality and flexibility.

Scoped slots

With the power of scoped-slots you can fine tune specific details of the rating selections.

Information cards

The v-rating component is perfect for capturing user information or displaying user reviews.

v-hover

Component documentation

The v-hover component is a simple wrapper for capturing user gestures over elements/components.

v-responsive

Component documentation

The v-responsive component is the baseline for v-img and provides you with the ability to specify content aspect ratios.

• v-jumbotron and v-card-media have been deprecated in favor of v-img
• themes (dark|light) are now applied through Vue provide/inject. If you were using specific styles or workarounds to account for menu or dialog background colors, you can remove them. If you were using static markup instead of component (for example created table markup with html to display static data table) you need to manually add theme--light or theme--dark
• v-menu props for components like v-select and v-autocomplete are now applied through a menu-props prop

🚗 Things we added

• #4944 Added catalan locale

📳 Things we changed

• 44ac40d If you supply a custom height on the element wrapped by v-expand-transition, it will now use that value instead of scrollHeight

🔧 Things we fixed

• f90d631 Fixed a bug with v-dialog/v-menu would not show multiple elements in the default slot
• 96c4391 v-divider with the vertical prop will now properly work inside flex containers.

🚗 Things we added

• 719ac43 Transition components can now work on multiple elements with the group prop
• bca41c6 Added hide-on-leave and leave-absolute props to transition components
• c7c463f Added a gradient prop to v-img
• 6b8d7bb Added width and max-width prop to v-responsive and v-img
• 5ac572b Added light and dark props to v-list-tile
• #4691 Added actions-prepend and actions-append slots to v-data-table (thanks @DCzajkowski)
• #4890 Added readonly prop to v-time-picker
• #4903 Added locale files for farsi (thanks @alireza4050)
• #4924 Added dense prop to v-rating

📳 Things we changed

• 9f61a81 v-dialog and v-menu will inherit their theme from v-app instead of the nearest parent
• #4874 Converted v-pagination to typescript
• #4876 Locale files are now written in typescript.

🔧 Things we fixed

• 38880ee Removed padding from selection controls in v-list-tile-action
• 977fd7d Reduced the height of the year section in v-date-picker
• a7ffbfe Prevent content from overflowing v-responsive and v-img horizontally
• 93ee3c7 7d55184 Fixed theme inheritance in v-tabs
• #4460 $vnode.data.model.expression can be used again on v-text-field and v-select
• #4891 Fixed v-slider top margin with the thumb-label prop
• #4928 Fixed v-select colours when using menu-props="light" on a dark background

🚗 Things we added

• #4865 Added a dutch translation (thanks @ricardovanlaarhoven)

📳 Things we changed

• fb07ece ee3f6df Reverted the v-btn text colour change from beta.1

🔧 Things we fixed

• 9461ba2 Fixed v-pagination background colours
• #4871 Fixed directives not being installed

🚗 Things we added

• 0ed01dd Added grid classes for align-self, justify-self, and auto margins
• 8a4b59d Added more transitions
• #4342 The color prop now takes hex and CSS colours
• #4774 New configuration options customProperties, enables CSS variables for theme colours
• #4821 v-rating can be reset to 0 with the clearable prop (thanks @AuspeXeu)
• #4841 New helper component v-hover, added group prop to transition components

📳 Things we changed

• 7f396e6 Made ripples look better
• 2d3f0da v-btn will always have black text unless the dark prop is used (fixes #4812) - reverted in beta.2
• #4795 Some v-select props have been consolidated to a new menu-props prop
• #4803 Updated input styles to improve vertical alignment, use hide-details if they're too tall
• #4804 Selection controls use native input events, enter doesn't do anything, toggle-keys has been removed

🔧 Things we fixed

• e22e24e Fixed MDI icon alignment in v-data-table
• 585798d v-responsive will now inherit event listeners
• 7f38e4a Fixed a bug causing lighten-5 to be darker than lighten-1
• #4775 Updated the french translation (thanks @Enhakiel)
• #4777 v-img will now be circular when used in a v-avatar
• #4856 Fixed v-edit-dialog colours
   

Includes all fixes from 1.1.10, 1.1.11, and 1.1.12

🆕 New Components

• v-img
  • Lazy loading
  • Progressive images (via vuetify-loader)
  • Dynamic and static aspect ratios
• v-responsive
  • The same aspect ratio functionality as v-img, but without the lazy loading
• v-rating
  • Great for e-commerce products and customer reviews
  • Hover functionality

🚗 Things we added

• #809 Added multiple prop to v-date-picker (thanks @motia)
• #2175 Added support for nudge props on v-tooltip
• #2494 Themes (dark/light) are now applied through Vue provide/inject. Children will inherit from the first parent that provides theme or overwrite it if declared on the component
• #3316 New v-form method resetValidation
• #4061 Added new prepend-item and append-item slots for the v-select family (v-autocomplete, v-combobox, v-overflow-btn)
• #4294 New v-data-table prop header-key, for multiple headers with the same text
• #4408 Theme colors can now be objects, for full control over lighten/darken variations
• #4667 Components are now registered as PascalCase
• Added new locales:
  • Ukrainian (thanks @iliyaZelenko)
  • Polish
  • Russian (thanks @Djaler)
  • German (thanks @dmecke)
  • Portuguese
  • Greek (thanks @nkoik)
  • Chinese (thanks @myleslee)