If you have a small amount of data or if it's static, you can pass the options to md-autocomplete in a simple and intuitive way:
-
Trigger
+
Trigger
By default the suggestions will appear along with a focus trigger. If you want something less intrusive, you can disable this behaviour by canceling the focus event. If this, the suggestions will appear right after a keystroke:
-
Box Layout
+
Box Layout
Autocomplete have types two layouts: Default with floating labels and a boxed layout with inline labels. The box layout will apply a boxed layout with a small elevation, that also works really great as search bar inside a toolbar. Gorgeous:
-
Custom Template
+
Custom Template
This section will assume that you have knowledge of Vue Scoped Slots. This will allow you to customize the option list.
Autocomplete also accepts a custom template, flexible to accept any HTML element and with an 'empty state' built in. You can also highlight the search term inside the matches, to give a feedback on why that item has been in the results. Awesome:
@@ -44,7 +44,7 @@
-
Search Algorithms
+
Search Algorithms
Vue Material autocomplete comes with 2 ways of search: Fuzzy search and search by whole term. The fuzzy search tries to match the results by approximation, finding patterns inside the available options. This will help with accidental type errors and improve the results. If you think that this may be confusing, you can disable this. Example:
@@ -85,7 +85,7 @@
-
Async Options
+
Async Options
Sometimes the options are inside a database in a remote server. Instead of giving a static data, we can provide a Promise that will resolve with the data from a backend servide, for example. This is great to save Bandwidth on the initial load and to improve the performance. Look at this example:
Avatars can show a single image by default but can also display an icon (using the md-icon component):
@@ -21,14 +21,14 @@
-
Initial letter as a placeholder
+
Initial letter as a placeholder
Let's assume that you want to show a list of contacts, but some of them do not have a picture in your database. You can use the initial letter of the contact name as a placeholder. It can even show 2 letters (for compound names) without problems:
-
Multiple sizes
+
Multiple sizes
You can specify three different sizes, if you want: Regular, Small or Large. By default the avatar have a regular size.
The bottom bar is compatible with all Vue Router options. Just pass the values as parameters on md-bottom-bar-item component:
@@ -18,21 +18,21 @@
-
Shift effect
+
Shift effect
You can also use the awesome shift effect on your bars. It is great to keep the focus of the active item and you can show up to 6 items at once:
-
Dynamic Themes
+
Dynamic Themes
Sometimes each part of your application have it's own color theme, like in a social media app. You can change the theme dynamically to morph states creating an immersive experience:
-
Custom Template
+
Custom Template
Maybe you want to show more informations inside a bottom bar item. With a simple and flexible default slot, you can make anything you want. Look at this unread notification example:
If you pass anything inside the <md-bottom-bar-item>, the component will ignore the md-label and md-icon. Only use the content slot if you want to create a custom template.
diff --git a/docs/app/pages/Components/Button/Button.vue b/docs/app/pages/Components/Button/Button.vue
index 202d1a17e..bfca3c2ed 100644
--- a/docs/app/pages/Components/Button/Button.vue
+++ b/docs/app/pages/Components/Button/Button.vue
@@ -11,7 +11,7 @@
-
Flat and Raised
+
Flat and Raised
The flat button is the default one. No classes or properties needs to be attached to it to make it flat. The raised button can be achieved with the md-raised class.
@@ -26,7 +26,7 @@
-
Icons
+
Icons
To display icons inside buttons you only need to add a class and you're good to go. And you can also combine it with the raised class.
@@ -39,7 +39,7 @@
-
Floating Action Buttons
+
Floating Action Buttons
A Floating Action Button represents the primary action in an application and is used for a promoted action. FAB buttons can be regular sized or mini, with an accent color by default. This type of buttons can only have icons, so it should be used along with <md-icon>.
Use only one FAB per page and only if the purpose of the button is to fire the main action of the screen. Otherwise use md-icon-button.
@@ -53,14 +53,14 @@
-
Link Vs Buttons
+
Link Vs Buttons
All buttons by default will output a button tag. If you want to change it to a a tag, just pass it a href:
-
Vue Router
+
Vue Router
md-button also supports Vue Router by default. All options of router-link could be simply used here.
The simplest card structure has a header, content area and action buttons, defined by md-card-header, md-card-content and md-card-actions, respectively. The header may contain a title and a subtitle div or span with classes .md-title and .md-subhead. In the content area, you may use any kind of text elements and for the actions, use at most two md-buttons.
@@ -21,7 +21,7 @@
-
Cards with Images
+
Cards with Images
To add visual appeal to your cards, you can add images inside the md-header tag with a md-card-media wraping an img tag. It's possible to increase the image size to medium or big with the properties md-medium and md-big.
@@ -43,20 +43,20 @@
If there isn't sufficient contrast between background image and title, the latter won't be perfectly legible. To overcome that, apply a solid or gradient background to the text by using the md-card-media-cover's properties md-solid or md-text-scrim, respectively.
-
-
Themes
+
+
Themes
Your cards will stand out if you change their base color... And you can do it by applying themes! Just add a .primary or accent class on them. This will use the current theme. You can specify a custom one with the md-theme property.
-
Expansion Control
+
Expansion Control
To avoid too much information inside a card, or keep its height from exceeding the maximum height, hide supplementary information inside a expansible area.
It can be done with the md-card-expand component, that has a md-card-action with a md-card-expand-trigger that toggles a md-card-expand-content.
-
Different Layouts
+
Different Layouts
That's pretty much it. You can now combine these and other components in many distinct ways. Here are some examples:
diff --git a/docs/app/pages/Components/Chips/Chips.vue b/docs/app/pages/Components/Chips/Chips.vue
index 0656f7101..f9096457c 100644
--- a/docs/app/pages/Components/Chips/Chips.vue
+++ b/docs/app/pages/Components/Chips/Chips.vue
@@ -13,7 +13,7 @@
-
Standalone Chip
+
Standalone Chip
A chip can be used as standalone, without any connection with another chip. It can be used like a badge or a category of an entity in your application. You can specify if your chip can be deletable and clickable:
@@ -27,42 +27,42 @@
-
Editable model
+
Editable model
Sometimes we need to edit the set of items on screen, for example, when editing tags, the user may need to remove/add tags. In this case you can use the editable chips, that is the default behaviour:
-
Readonly
+
Readonly
Let's think in an entity that have tags. Sometimes you might need to show all of them in a single row, but not allow the user to edit them. You can achieve that using the md-chips component, with a static option:
-
Custom Template
+
Custom Template
Sometimes we need to show more information about a chip, so we want to have a custom HTML structure for the chip itself. To create that scenario we can use the template scope. In this case all you have to do is to create a slot with your custom template and you're good to go. Take a look at this example:
-
Duplicated Chip
+
Duplicated Chip
Chips would reject insertion if a chip is duplicated. You can customize feedback style of the duplicated chip:
-
Formatter
+
Formatter
Sometimes you may need to format a chip value before adding it, and for this case you can use a custom formatter function. This function will receive the chip value and must return the formatted value.
-
Hue Colors
+
Hue Colors
You can always use the hue modifiers in single chips:
Vue Material datepicker supports multiple types of v-model, whiches default is Date. If you want to communicate with other services without timezone problems, you could use String to avoid them:
-
Cancel open on focus
+
Cancel open on focus
By default Datepicker component open on focus to it's input. This will make the input useless and the user will not be able to type the date manually. You can disable this behavior:
-
Immediately selection
+
Immediately selection
The Datepicker dialog can be made to close instantly after a date is selected. The date will be selected immediately without any additional confirmation or user action:
-
Disabled dates
+
Disabled dates
Sometimes you may need to disable certain dates from being selected. Let's suppose that you want to let the user select only week days:
Temporary navigation drawers are closed by default and opens temporarily above all other content until a section is selected. This is highly recommended for mobile devices. If you do not pass any options to drawer this will be the default preset:
-
Permanent
+
Permanent
Permanent navigation drawers are always visible and pinned to the left edge, at the same elevation as the content or background. They cannot be closed and are recommended default for desktop.
They come with three sub-types: Full, Clipped and Card:
@@ -40,7 +40,7 @@
-
Persistent
+
Persistent
Persistent navigation drawers can toggle open or closed. The drawer sits on the same surface elevation as the content. It is closed by default and opens by selecting the menu icon, and stays open until closed by the user.
By default the md-icon will assume that you are using the Material Icons Font. You have to pass the name of the icon with underscore instead of spaces. For example: <md-icon>thumb_up</md-icon>.
@@ -23,14 +23,14 @@
-
Custom Fonts
+
Custom Fonts
Alternatevely you can load any custom fonts to be used with md-icon, like Font Awesome for example. Just use the Font Awesome (or any other) classes.
-
SVG Source
+
SVG Source
When loading an icon font, you will be able to use ALL of it's icons. This may hurt the performance of your application. Instead, you can use only the icons that you really need, loading them using svg.
Fields mimic the HTML5 attributes to keep the same compatibility with native inputs, but has extra options. This allows Vue Material to accordingly setup the various md-field with its corresponding input options.
You will be able to set the same properties of a regular input element on md-input. This is also valid for textarea and select. Take a look:
@@ -22,35 +22,35 @@
-
Errors and Messages
+
Errors and Messages
Vue Material has validation states to show error messages. You can use it along with other 3rd party Vue validation libraries, like Vuelidate or Vee-Validate:
-
Character count
+
Character count
You can use character counters where you need to limit the user input, like on Twitter's 280 character tweet:
-
Icons
+
Icons
Sometimes we may want to differentiate our inputs based on it content value:
-
Inline Actions
+
Inline Actions
Fields can have a clearable feature to make it easier for users to clear the value. To use passwords better we can show a toggle button to reveal the password. This is really useful for mobile applications:
-
Prefixes & suffixes
+
Prefixes & suffixes
Prefixes and suffixes can be used to clarify units or to add input in advance. Prefixes are left justified in the text field whereas suffixes are right justified. Text fields can have both prefixes and suffixes.
Single line lists are really great for navigational elements, such as drawers. You can pass a icons, text and actions to them. They have also a dense layout, to accommodate more items on the screen:
@@ -31,7 +31,7 @@
-
List Actions
+
List Actions
List items will render different tags based on the interaction types given.
If you pass one of those event, the item will automatically render a button:
The position of the menu content is calculated based on the contraints of the trigger element. Based on this you can set a position using X and Y axis.
You can combine top/bottom with start/end:
@@ -20,14 +20,14 @@
-
Alignments
+
Alignments
Sometimes the default position is not what we want. Maybe we need to show a menu in another location, and to achieve that you can use trigger alignment or custom offsets:
-
Sizes
+
Sizes
md-menu has 4 different sizes and an auto mode:
@@ -35,14 +35,14 @@
-
AutoClose
+
AutoClose
md-menu can be auto closed on click or select:
-
Rich Content and Icon Alignment
+
Rich Content and Icon Alignment
Sometimes you may need to toggle your menu dynamically. You can also show arbitrary content inside a md-menu-content, like this card example:
You can specify any position that you want for you Speed Dial component. They can be top and bottom, and combined with left, center or right:
@@ -20,13 +20,13 @@
-
Effects
+
Effects
The component can be displayed different animations for each scenario that you might want:
-
Triggers
+
Triggers
You can trigger the speed dial content using hover or click. Using this allows you to have a open/close feature or to hold a main action:
For desktop environments it's better to have a hover effect. On mobile you can toggle the property to use click instead.
@@ -38,7 +38,7 @@
-
Icon Morph
+
Icon Morph
Sometimes you want the speed dial to have a cross icon to represent your close action after showing the content. This can be easily achieved with the morph icons.
To create that, create two md-icon components inside the trigger and add a md-morph-initial in the one you would like it to be the initial state (or an open state) and a md-morph-final on the close state:
Horizontal steppers are ideal when the contents of one step depend on an earlier step. You should avoid using long step names in horizontal steppers.
This is the default type of steppers. They are not recommended for mobile:
@@ -24,28 +24,28 @@
-
Vertical Steppers
+
Vertical Steppers
Vertical steppers are great deal for mobile devices or to be inserted on small areas of your application, like a dialog or a card.
-
Linear Steppers
+
Linear Steppers
By default steps are optional and this means that you can advance to the last step without pass through the other ones. But sometimes we're guiding an user through a linear flow and all steps matter or are connected together. Linear steppers require users to complete one step in order to move on to the next:
-
Non Editable Steps
+
Non Editable Steps
By default steps are also editable. But you can disable this by manually setting on each step that could be non-editable. This makes sense when users cannot edit a step later or when step editing poses a distraction risk to form completion:
-
Vue Router Integration
+
Vue Router Integration
Vue Material Steppers have a deep integratio with Vue Router. This means that you can have a route per step. This allows you to navigate between steps through the browser history, store the current stepper after a refresh and lots of great scenarios that you can explore! Take a look at the page URL changing when clicking on each steps:
Try to refresh the page to see that Steppers will detect the active step based on the current URL. Just awesome!
diff --git a/docs/app/pages/Components/Table/Table.vue b/docs/app/pages/Components/Table/Table.vue
index b571cdaf5..4e1914fc5 100644
--- a/docs/app/pages/Components/Table/Table.vue
+++ b/docs/app/pages/Components/Table/Table.vue
@@ -17,7 +17,7 @@
-
Simple tables
+
Simple tables
To create a basic table, with simple data and without any advanced options, you have a really simple markup to use.
There are some components that mimic the native table elements:
@@ -50,7 +50,7 @@
-
Advanced tables
+
Advanced tables
This section will assume that you have knowledge of Vue Scoped Slots. You'll need them to create advanced tables.
@@ -83,7 +83,7 @@
-
Selection
+
Selection
When dealing with large data sets, you may want to have quick actions over our data, like whether to remove or make some bulk change. Tables have inner selection in two ways: Single and Multiple.
The single selection is really great to highlight a particular item. Maybe, by clicking on a table row, will show the details of the item. With single selections you'll have access to the selected item and the table will do the rest. You can use the primary and accent hue colors to give more appealing highlight colors:
Sometimes you may need a tab to be the main navigational element of your application and you can do this. Tabs integrate with Vue Router by default and will be able to use single tab just like a regular button or link, by using the router-link props. The tabs will sync with the page URL and will produce effects when transitioning between tabs. AUTOMATIC!
-
Tab with inner content
+
Tab with inner content
In the previous example, the tabs worked just like navigation buttons, without content. With that you would need to render the content by yourself. Although this is not a hard thing, because you can use Vue Router, you can pass arbitrary content to your tabs. And it can also work syncing with router:
-
Alignments
+
Alignments
Tabs have four types of alignments for the navigation buttons: Left, Center, Right and Fixed. You can use them with any tabs:
-
Icons
+
Icons
Tabs accept icons, to make it easier for your user to assimilate the contents of a tab:
-
Custom Template
+
Custom Template
You can use a custom template for the navigation buttons. This will be applied to all navigation buttons and allows you to make updates on your tab, like this great example of unread/new content: Simple, uh?
Toolbars adjusts its height dimensions based on the screen width to best fit the visible area on small devices. Try to resize your browser to see the difference:
@@ -24,13 +24,13 @@
-
Different Sizes
+
Different Sizes
-
Content and Actions
+
Content and Actions
As the Toolbars are mostly used to hold actions that affects the entire application, you can create rows or sections inside of it.
Although those rows works on every toolbar, they were created to separate contents for large toolbars. This element is represented by the md-toolbar-row class. A row can also have a md-toolbar-offset to add a little space on the left of it. This is commonly used inside the second row of an large toolbar.
The sections are used to split the content of the toolbar horizontally (or the row inside). You can apply them using two types of section: md-toolbar-section-start will be left-aligned and md-toolbar-section-end right-aligned.
You can set the tooltip direction using the four available values - top, right, bottom and left:
-
Delay
+
Delay
Sometimes you don't want to pop the tooltip right away. To achieve that you can use a custom delay in milliseconds to postpone the action:
-
Dynamically show a tooltip
+
Dynamically show a tooltip
In some cases we may want to trigger the tooltip manually, to make sure that your user will understand and action. You can do it:
diff --git a/docs/app/pages/GettingStarted.vue b/docs/app/pages/GettingStarted.vue
index c64c176c8..44804abc1 100644
--- a/docs/app/pages/GettingStarted.vue
+++ b/docs/app/pages/GettingStarted.vue
@@ -1,9 +1,8 @@
- Disclaimer: This is a beta version. The API is not going to change, but be careful to use it in production.
-
Introduction
+
Introduction
Vue Material is the best integration between Vue.js and Material Design specs! You can easily configure it to suit all your needs through an easy API.
The documentation is divided by Themes, Components and UI Elements. The themes area is the definitive guide on how to theme your application (or write your own themes). The Components and UI Elements parts shows live examples, along with an API Table of each component/resource.
@@ -11,7 +10,7 @@
-
{{ $t('pages.gettingStarted.installation') }}
+
{{ $t('pages.gettingStarted.installation') }}
You can install Vue Material through NPM or Yarn:
@@ -27,7 +26,7 @@
-
Usage
+
Usage
To use Vue Material in your application, you can import only the components that you're really using. This will allow you to make your build way more compact than installing a full bundle.
- You can use some of our tools to make the development environment easier, more productive and with a better
- integration with Vue Material. You can choose between a batteries-included webpack boilerplate, a SSR template
- for premium.js and a Single HTML file to start with the framework:
-
-
-
-
-
-
-
-
+
+
+
-
Vue Material Dashboard PRO
-
Full-featured
+
+ system_update_alt
+ Installation
+
- Vue Material Dashboard PRO is a beautiful and full-featured resource built over Vue Material. It will help
- you get started developing dashboards in no time.
+ You can install Vue Material through NPM or Yarn:
+
+ $ npm install vue-material --save
+ $ yarn add vue-material
+
+
It's optional, but to have the best experience possible, use Roboto and Google Icons from Google CDN:
+
+ <link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:400,500,700,400italic|Material+Icons">
+
+
- Just $59
- Buy now
+ Read installation
-
-
-
-
-
-
-
+
+
+
+
+
+ pan_tool
+ Usage
+
+
+
+
+
+ To use Vue Material in your application, you can import only the components
+ that you're really using.
+
+ import Vue from 'vue'
+ import { MdButton, MdContent, MdTabs } from 'vue-material/dist/components'
+ import 'vue-material/dist/vue-material.min.css'
+ import 'vue-material/dist/theme/default.css'
+
+ Vue.use(MdButton)
+ Vue.use(MdContent)
+ Vue.use(MdTabs)
+
+
+
+
+
+ Explore the docs
+
+
+
+
+
+
+
-
Vue Material Dashboard Free
-
16 components
+
+ build
+ Premium themes
+
- Don't wanna spend money for now? Ok, then! Just download the free version! It's easy to use and if you
- need more, you can always upgrade later to the Pro Version.
+ Take Vue Material to the next level with premium themes from Creative Tim.
+
+
+
+
+
+
- Free
- Download
+ Browse Themes
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
diff --git a/docs/app/pages/PremiumThemes/PremiumThemes.vue b/docs/app/pages/PremiumThemes/PremiumThemes.vue
new file mode 100644
index 000000000..303754988
--- /dev/null
+++ b/docs/app/pages/PremiumThemes/PremiumThemes.vue
@@ -0,0 +1,142 @@
+
+
+
+
+
Premium Themes
+
Creative Tim
+
With the examples below built by our partners from
+ Creative Tim you can see how a real world application
+ is built, the technology stack behind it and how most
+ of the concepts you've learned so far apply in a real
+ world application.
+
Vue Material comes with the nice Material Design color palette. You can fully use it to build your themes, using the available colors along with the color shade.
The shades are based on color weight, that can be, 100, 200, 300, 400, 500, 600, 700, 800, 900, A100, A200, A400 or A700.
All of those colors can be passed as an argument of md-get-palette-color:
@@ -63,7 +63,7 @@
-
Default colors
+
Default colors
Vue Material has default theme colors:
Primary: #448aff => Blue A200
@@ -82,7 +82,7 @@
-
Using your own colors
+
Using your own colors
Sometimes the colors of your brand might not match with the material ones. It is possible to pass your own colors, without using the Material Design Palette:
You can theme individual components effortlessly, by calling the components one by one. This will make your final build smaller in size and higher in performance:
Vue Material layout uses breakpoints for responsiveness:
-
Column Layout
+
Column Layout
The layout system in Vue Material is essentially based on columns and makes use of the flexbox to be flexible enough and thereby gives you the best experience with a great and easy API.
What you have to do to get started with layouts is to create a md-layout parent element, that will hold a list of md-layout-item. You can set up as many columns as you want using md-layout-item:
Roboto has been refined extensively to work across the wider set of supported platforms. It is slightly wider and rounder, giving it greater clarity and making it more optimistic. Vue Material use Roboto by default, with Noto Sans as a fallback. To get up and running with Roboto font, just install it from Google Fonts. Or install it from the following snippet:
Too many type sizes and styles at once can wreck any layout. A typographic scale has a limited set of type sizes that work well together along with the layout grid.
The sizes and styles balance content density and reading comfort under typical usage conditions. They are all based on simple classes that gives the styles and works fine with dark themes. Look:
The a tag create a link style and is the only that is affected globally. It will be automatically themed using the accent color.
diff --git a/docs/app/routes.js b/docs/app/routes.js
index 3897cfc90..208e5834d 100644
--- a/docs/app/routes.js
+++ b/docs/app/routes.js
@@ -109,6 +109,11 @@ export const routes = [
name: 'home',
page: 'Home/Home.vue'
},
+ {
+ path: '/premium-themes',
+ name: 'Premium Themes',
+ page: 'PremiumThemes/PremiumThemes.vue'
+ },
{
path: '/getting-started',
name: 'getting-started',
diff --git a/docs/app/template/MainFooter.vue b/docs/app/template/MainFooter.vue
index 53481ab94..e00e6739c 100644
--- a/docs/app/template/MainFooter.vue
+++ b/docs/app/template/MainFooter.vue
@@ -2,14 +2,43 @@
@@ -33,8 +62,17 @@
@import "~vue-material/components/MdLayout/mixins";
@import "~vue-material/theme/engine";
+ .md-list{
+ display: inline-block;
+ margin: 10px 0;
+ + .md-list{
+ margin-left: 40px;
+ }
+ li{
+ margin: 5px 0;
+ }
+ }
.main-footer {
- height: 96px;
padding: 0 16px;
position: relative;
z-index: 4;
@@ -76,6 +114,9 @@
+ a {
margin-left: 32px;
+ &.ml-0{
+ margin-left: 0px;
+ }
}
}
}
diff --git a/docs/app/template/MainHeader.vue b/docs/app/template/MainHeader.vue
index 2d70bc57c..d4bdf1afb 100644
--- a/docs/app/template/MainHeader.vue
+++ b/docs/app/template/MainHeader.vue
@@ -65,9 +65,29 @@
- 
+
+ 
+
+ 
+
+ 
+
+ 
+
+ 
+ 
+ 
+ 
+ 
+