The Vuetify Theme aims to simplify the creation of client side apps in OrchardCore. Offering vuetify components as widgets, the Vuetify Theme makes it easy to compose rich Material Design pages from the Admin UI.
Puts a border on the alert. Accepts top, right, bottom, left.
Color
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Colored Border
Applies the defined color to the alert’s border.
Dark
Applies the dark theme variant to the component.
Dense
Hides the alert icon and decreases component’s height.
Dismissible
Adds a close icon that can hide the alert.
Elevation
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Icon
Designates a specific icon.
Light
Applies the light theme variant to the component.
Outlined
Makes the background transparent and applies a thin border.
Prominent
Displays a larger vertically centered icon to draw more attention.
Shaped
Applies a large border radius on the top left and bottom right of the card.
Text
Applies the defined color to text and a low opacity background of the same.
Tile
Removes the component’s border-radius.
Type
Specify a success, info, warning or error alert. Uses the contextual color and has a pre-defined icon.
Puts the toolbar into a collapsed state reducing its maximum width.
Collapse On Scroll
Puts the app-bar into a collapsed state when scrolling.
Color
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Dark
Applies the dark theme variant to the component.
Dense
Reduces the height of the toolbar content to 48px (96px when using the prominent prop).
Elevate On Scroll
Elevates the app-bar when scrolling.
Elevation
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Extended
Use this prop to increase the height of the toolbar without using the extension slot for adding content. May be used in conjunction with the extension-height prop, and any of the other props that affect the height of the toolbar, e.g. prominent, dense, etc., WITH THE EXCEPTION of height.
Extension Height
Specify an explicit height for the extension slot.
Fade Image On Scroll
When using the src prop or img slot, will fade the image when scrolling.
Fixed
Applies position: fixed to the component.
Flat
Removes the toolbar’s box-shadow.
Floating
Applies display: inline-flex to the component.
Height
Designates a specific height for the toolbar. Overrides the heights imposed by other props, e.g. prominent, dense, extended, etc.
Hide On Scroll
Hides the app-bar when scrolling. Will still show the extension slot.
Inverted Scroll
Hides the app-bar when scrolling down and displays it when scrolling up.
Light
Applies the light theme variant to the component.
Outlined
Makes the background transparent and applies a thin border.
Prominent
Increases the height of the toolbar content to 128px.
Scroll Off Screen
Hides the app-bar when scrolling. Will NOT show the extension slot.
Scroll Threshold
The amount of scroll distance down before hide-on-scroll activates.
Shaped
Applies a large border radius on the top left and bottom right of the app-bar.
Short
Reduce the height of the toolbar content to 56px (112px when using the prominent prop).
Shrink On Scroll
Shrinks a prominent toolbar to a dense or short (default) one when scrolling.
Designates the component as part of the application layout. Used for dynamically adjusting content sizing. Components using this prop should reside outside of v-main component to function properly. You can find more information about layouts on the application page. Note: this prop automatically applies position: fixed to the layout element.
Color
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Dark
Applies the dark theme variant to the component.
Elevation
Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page.
Fixed
Applies position: fixed to the component.
Height
Designates a specific height for the component.
Light
Applies the light theme variant to the component.
Outlined
Makes the background transparent and applies a thin border.
Rounded
Designates the border-radius applied to the component. You can find more information on the Border Radius page.
Padless
Remove all padding from the footer.
Shaped
Applies a large border radius on the top left and bottom right of the footer.
Alternate text for screen readers. Leave empty for decorative images.
Aspect Ratio
Calculated as width/height, so for a 1920x1080px image this will be 1.7778. Will be calculated automatically if omitted.
Contain
Prevents the image from being cropped if it doesn’t fit.
Dark
Applies the dark theme variant to the component.
Eager
Will force the components content to render on mounted. This is useful if you have content that will not be rendered in the DOM that you want crawled for SEO.
Gradient
Overlays a gradient onto the image. Only supports linear-gradient syntax, anything else should be done with classes (see examples).
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)).
Dark
Applies the dark theme variant to the component.
Dense
Lowers max height of list tiles.
Disabled
Disables all children v-list-item components
Elevation
Designates an elevation applied to the component between 0 and 24.
Expand
Will only collapse when explicitly closed
Flat
Remove the highlighted background on active v-list-items
Height
Sets the height for the component.
Light
Applies the light theme variant to the component.
Nav
An alternative styling that reduces v-list-item width and rounds the corners.
Outlines
Removes elevation (box-shadow) and adds a thin border.
Rounded
Rounds the v-list-item edges.
Shaped
Provides an alternative active style for v-list-item.
Subheader
Removes top padding. Used when previous sibling is a header.
Configure the active CSS class applied when the link is active.
Color
Applies specified color to the control when in an active state or input-value is true - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5))
Exact-Active-Class
Configure the active CSS class applied when the link is active with exact match.
Href
Designates the component as anchor and applies the href attribute.
Icon Name
Designates a specific icon.
Input-Value
Controls the active state of the item. This is typically used to highlight the component.
Target
Designates the target attribute. This should only be applied when using the href prop.
This widget is best used in the Navigation Drawer zone.
Field
Definition
Absolute
Applies position: absolute to the component.
Background Image
Adds an image to the navigation-drawer background
Bottom
Expands from the bottom of the screen on mobile devices.
Clipped
A clipped drawer rests under the application toolbar.
Color
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). You can find list of built in classes on the colors page.
Disable Resize Watcher
Will automatically open/close drawer when resized depending if mobile or desktop.
Disable Route Watcher
Disables opening of navigation drawer when route changes.
Expand On Hover
Collapses the drawer to a mini-variant until hovering with the mouse.
Floating
A floating drawer has no visible container (no border-right).
Height
Sets the height of the navigation drawer.
Hide Overlay
Hides the display of the overlay.
Light
Applies the light theme variant to the component.
Mini
Condenses navigation drawer width, also accepts the .sync modifier. With this, the drawer will re-open when clicking it.
Mini Variant Width
Designates the width assigned when the mini prop is turned on.
Mobile Breakpoint
Sets the designated mobile breakpoint for the component. This will apply alternate styles for mobile devices such as the temporary prop, or activate the bottom prop when the breakpoint value is met. Setting the value to 0 will disable this functionality.
Overlay Color
Sets the overlay color.
Overlay Opacity
Sets the overlay opacity.
Permanent
The drawer remains visible regardless of screen size.
Right
Places the navigation drawer on the right.
Stateless
Remove all automated state functionality (resize, mobile, route) and manually control the drawer state.
Temporary
A temporary drawer sits above its application and uses a scrim (overlay) to darken the background.
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)).
Dark
Applies the dark theme variant to the component.
Icon
Specify icon for dot container
Icon-Color
Applies specified color to the control - it can be the name of material color (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)).