mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-21 21:41:53 +00:00
Generate a new docs build
This commit is contained in:
Marcos Moura
parent
5406e69add
commit
217ed7cdd9
154 changed files with 27 additions and 15125 deletions
3
.babelrc
3
.babelrc
|
|
@ -1,3 +0,0 @@
|
|||
{
|
||||
"presets": ["es2015", "stage-0"]
|
||||
}
|
||||
|
|
@ -1,13 +0,0 @@
|
|||
# http://editorconfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
trim_trailing_whitespace = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
140
.eslintrc
140
.eslintrc
|
|
@ -1,140 +0,0 @@
|
|||
{
|
||||
"plugins": [
|
||||
"html"
|
||||
],
|
||||
"ecmaFeatures": {
|
||||
"arrowFunctions": true,
|
||||
"destructuring": true,
|
||||
"classes": true,
|
||||
"defaultParams": true,
|
||||
"blockBindings": true,
|
||||
"modules": true,
|
||||
"objectLiteralComputedProperties": true,
|
||||
"objectLiteralShorthandMethods": true,
|
||||
"objectLiteralShorthandProperties": true,
|
||||
"restParams": true,
|
||||
"spread": true,
|
||||
"forOf": true,
|
||||
"generators": true,
|
||||
"templateStrings": true,
|
||||
"superInFunctions": true,
|
||||
"experimentalObjectRestSpread": true
|
||||
},
|
||||
"env": {
|
||||
"browser": true,
|
||||
"node": true
|
||||
},
|
||||
"globals": {
|
||||
"arguments": true,
|
||||
"window": true
|
||||
},
|
||||
"root": true,
|
||||
"parserOptions": {
|
||||
"sourceType": "module"
|
||||
},
|
||||
"parser": "babel-eslint",
|
||||
"rules": {
|
||||
"arrow-parens": 2,
|
||||
"arrow-spacing": [2, {
|
||||
"before": true,
|
||||
"after": true
|
||||
}],
|
||||
"brace-style": [2, "1tbs", {
|
||||
"allowSingleLine": false
|
||||
}],
|
||||
"comma-dangle": [1, "never"],
|
||||
"comma-spacing": [1, {
|
||||
"before": false,
|
||||
"after": true
|
||||
}],
|
||||
"comma-style": [2, "last"],
|
||||
"consistent-this": [2, "self"],
|
||||
"constructor-super": 2,
|
||||
"curly": 2,
|
||||
"default-case": 2,
|
||||
"dot-location": [2, "property"],
|
||||
"eol-last": 2,
|
||||
"eqeqeq": [2, "smart"],
|
||||
"indent": [2, 2, {
|
||||
"SwitchCase": 1
|
||||
}],
|
||||
"key-spacing": [1, {
|
||||
"beforeColon": false,
|
||||
"afterColon": true
|
||||
}],
|
||||
"max-nested-callbacks": [1, 4],
|
||||
"new-cap": 1,
|
||||
"new-parens": 1,
|
||||
"newline-after-var": [2, "always"],
|
||||
"no-array-constructor": 2,
|
||||
"no-class-assign": 2,
|
||||
"no-cond-assign": 2,
|
||||
"no-const-assign": 2,
|
||||
"no-constant-condition": 2,
|
||||
"no-delete-var": 2,
|
||||
"no-dupe-args": 2,
|
||||
"no-dupe-class-members": 2,
|
||||
"no-dupe-keys": 2,
|
||||
"no-duplicate-case": 2,
|
||||
"no-else-return": 1,
|
||||
"no-empty": 2,
|
||||
"no-eq-null": 2,
|
||||
"no-eval": 2,
|
||||
"no-ex-assign": 2,
|
||||
"no-extend-native": 2,
|
||||
"no-extra-boolean-cast": 2,
|
||||
"no-extra-parens": 1,
|
||||
"no-extra-semi": 2,
|
||||
"no-floating-decimal": 2,
|
||||
"no-func-assign": 2,
|
||||
"no-implied-eval": 2,
|
||||
"no-inner-declarations": 2,
|
||||
"no-lonely-if": 2,
|
||||
"no-loop-func": 2,
|
||||
"no-mixed-spaces-and-tabs": 2,
|
||||
"no-multi-spaces": 1,
|
||||
"no-multi-str": 2,
|
||||
"no-multiple-empty-lines": [1, {
|
||||
"max": 2
|
||||
}],
|
||||
"no-negated-in-lhs": 2,
|
||||
"no-nested-ternary": 2,
|
||||
"no-new": 2,
|
||||
"no-new-func": 2,
|
||||
"no-new-object": 2,
|
||||
"no-new-wrappers": 2,
|
||||
"no-obj-calls": 2,
|
||||
"no-redeclare": 2,
|
||||
"no-script-url": 2,
|
||||
"no-self-compare": 2,
|
||||
"no-spaced-func": 1,
|
||||
"no-sparse-arrays": 2,
|
||||
"no-this-before-super": 2,
|
||||
"no-trailing-spaces": 1,
|
||||
"no-undef": 2,
|
||||
"no-undef-init": 2,
|
||||
"no-unexpected-multiline": 2,
|
||||
"no-unneeded-ternary": 2,
|
||||
"no-unreachable": 2,
|
||||
"no-unused-vars": 1,
|
||||
"no-use-before-define": 1,
|
||||
"one-var": [2, "never"],
|
||||
"quote-props": [1, "as-needed"],
|
||||
"quotes": [2, "single"],
|
||||
"radix": 2,
|
||||
"semi": [2, "always"],
|
||||
"semi-spacing": [1, {
|
||||
"before": false,
|
||||
"after": true
|
||||
}],
|
||||
"keyword-spacing": 2,
|
||||
"space-before-blocks": 2,
|
||||
"space-before-function-paren": [2, "never"],
|
||||
"space-infix-ops": 2,
|
||||
"space-unary-ops": 2,
|
||||
"strict": 0,
|
||||
"use-isnan": 2,
|
||||
"wrap-regex": 2,
|
||||
"yoda": [2, "never"]
|
||||
}
|
||||
}
|
||||
6
.gitignore
vendored
6
.gitignore
vendored
|
|
@ -1,6 +0,0 @@
|
|||
.DS_Store
|
||||
node_modules/
|
||||
npm-debug.log
|
||||
selenium-debug.log
|
||||
test/unit/coverage
|
||||
test/e2e/reports
|
||||
22
LICENSE
22
LICENSE
|
|
@ -1,22 +0,0 @@
|
|||
|
||||
The MIT License (MIT)
|
||||
|
||||
Copyright (c) 2016 Marcos Moura
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in
|
||||
all copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
|
||||
THE SOFTWARE.
|
||||
39
README.md
39
README.md
|
|
@ -1,39 +0,0 @@
|
|||
# Vue.js Material
|
||||
|
||||
> Material Design for Vue.js
|
||||
|
||||
Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank">Material Design</a> specs. It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to <a href="https://saucelabs.com/u/vuejs" target="_blank">modern Web Browsers</a> through Vue 2.0. Build powerful and well-designed web apps that can can fit on every screen. You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API.
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
### Install dependencies
|
||||
npm install or yarn
|
||||
|
||||
### Start dev server with hot reload
|
||||
npm run dev
|
||||
|
||||
### Build everything
|
||||
npm run build
|
||||
|
||||
### Build docs only
|
||||
npm run build:docs
|
||||
|
||||
### Build lib only
|
||||
npm run build:lib
|
||||
```
|
||||
|
||||
## Credits and Thanks
|
||||
This library aims to delivery components using almost the same API of <a href="https://material.angularjs.org/latest/" target="_blank">Angular Material</a>
|
||||
|
||||
Thanks a lot to <a href="https://github.com/elviskang" target="_blank">elviskang</a> who provided me the **vue-material** name on npm.
|
||||
|
||||
Thanks to <a href="https://github.com/yyx990803" target="_blank">Evan You</a> for allowing me to use Vue.js Logo.
|
||||
|
||||
## Dependencies
|
||||
* <a href="http://www.jacklmoore.com/autosize/" target="_blank">autosize</a>
|
||||
* <a href="https://www.npmjs.com/package/element.scrollintoviewifneeded-polyfill" target="_blank">element.scrollintoviewifneeded-polyfill</a>
|
||||
* <a href="https://github.com/lazd/scopedQuerySelectorShim" target="_blank">scopedQuerySelectorShim</a>
|
||||
|
||||
## License
|
||||
MIT
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
import path from 'path';
|
||||
|
||||
const config = {
|
||||
projectRoot: path.resolve(__dirname, '../'),
|
||||
rootPath: path.resolve(__dirname, '../dist'),
|
||||
nodePath: path.resolve(__dirname, '../node_modules'),
|
||||
docsPath: 'docs',
|
||||
indexPath: 'docs/index.html',
|
||||
publicPath: '/',
|
||||
assetsPath: '/'
|
||||
};
|
||||
|
||||
let dev = {
|
||||
server: {
|
||||
port: process.env.PORT || '8080'
|
||||
},
|
||||
env: {
|
||||
NODE_ENV: '"development"'
|
||||
}
|
||||
};
|
||||
|
||||
let prod = {
|
||||
env: {
|
||||
NODE_ENV: '"production"'
|
||||
}
|
||||
};
|
||||
|
||||
if (config.env === 'production') {
|
||||
Object.assign(config, prod);
|
||||
} else {
|
||||
Object.assign(config, dev);
|
||||
}
|
||||
|
||||
export default config;
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import webpack from 'webpack';
|
||||
import build from './build';
|
||||
import webpackConfig from '../webpack/prod-docs';
|
||||
|
||||
webpack(webpackConfig, build);
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import webpack from 'webpack';
|
||||
import build from './build';
|
||||
import webpackConfig from '../webpack/prod-lib';
|
||||
|
||||
webpack(webpackConfig, build);
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
import ora from 'ora';
|
||||
|
||||
const spinner = ora({
|
||||
text: 'Building...',
|
||||
spinner: 'circleQuarters',
|
||||
color: 'green'
|
||||
});
|
||||
|
||||
spinner.start();
|
||||
|
||||
export default function done(error, stats) {
|
||||
if (error) {
|
||||
throw error;
|
||||
}
|
||||
|
||||
process.stdout.write('\n\n' + stats.toString({
|
||||
colors: true,
|
||||
modules: false,
|
||||
children: false,
|
||||
chunks: false,
|
||||
chunkModules: false
|
||||
}) + '\n');
|
||||
|
||||
spinner.stop();
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import 'eventsource-polyfill';
|
||||
import hotClient from 'webpack-hot-middleware/client?noInfo=true&reload=true';
|
||||
|
||||
hotClient.subscribe((event) => {
|
||||
if (event.action === 'reload') {
|
||||
window.location.reload();
|
||||
}
|
||||
});
|
||||
|
|
@ -1,51 +0,0 @@
|
|||
import path from 'path';
|
||||
import express from 'express';
|
||||
import chalk from 'chalk';
|
||||
import webpack from 'webpack';
|
||||
import devMiddleware from 'webpack-dev-middleware';
|
||||
import hotMiddleware from 'webpack-hot-middleware';
|
||||
import historyApiFallback from 'connect-history-api-fallback';
|
||||
import config from '../config';
|
||||
import webpackConfig from '../webpack/dev';
|
||||
|
||||
|
||||
const app = express();
|
||||
const compiler = webpack(webpackConfig);
|
||||
const devMiddlewareInstance = devMiddleware(compiler, {
|
||||
publicPath: config.publicPath,
|
||||
index: config.indexPath,
|
||||
stats: {
|
||||
colors: true,
|
||||
chunks: false
|
||||
}
|
||||
});
|
||||
|
||||
const hotMiddlewareInstance = hotMiddleware(compiler);
|
||||
|
||||
compiler.plugin('compilation', (compilation) => {
|
||||
compilation.plugin('html-webpack-plugin-after-emit', (data, done) => {
|
||||
hotMiddlewareInstance.publish({ action: 'reload' });
|
||||
done();
|
||||
});
|
||||
});
|
||||
|
||||
app.use(historyApiFallback());
|
||||
app.use(devMiddlewareInstance);
|
||||
app.use(hotMiddlewareInstance);
|
||||
app.use(express.static(__dirname + config.devPath));
|
||||
|
||||
app.get('*', function(req, res) {
|
||||
res.sendFile(path.join(__dirname, 'index.html'));
|
||||
});
|
||||
|
||||
export default app.listen(config.server.port, (error) => {
|
||||
let uri = 'http://localhost:' + config.server.port;
|
||||
|
||||
if (error) {
|
||||
console.log(chalk.red(error));
|
||||
|
||||
return;
|
||||
}
|
||||
|
||||
console.log(chalk.blue('Listening at ' + uri + '\n'));
|
||||
});
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import autoprefixer from 'autoprefixer';
|
||||
import eslintFormatter from 'eslint-friendly-formatter';
|
||||
import config from '../config';
|
||||
|
||||
const buildAssetsPath = (_path) => {
|
||||
return path.posix.join(_path);
|
||||
};
|
||||
|
||||
export default {
|
||||
entry: {
|
||||
docs: './docs/src/index.js'
|
||||
},
|
||||
output: {
|
||||
path: config.rootPath,
|
||||
publicPath: config.publicPath,
|
||||
filename: '[name].js'
|
||||
},
|
||||
resolve: {
|
||||
extensions: ['', '.js', '.vue'],
|
||||
fallback: [config.nodePath],
|
||||
alias: {
|
||||
vue: 'vue/dist/vue.common.js'
|
||||
}
|
||||
},
|
||||
resolveLoader: {
|
||||
fallback: [config.nodePath]
|
||||
},
|
||||
module: {
|
||||
preLoaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'eslint',
|
||||
include: config.projectRoot,
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'eslint',
|
||||
include: config.projectRoot,
|
||||
exclude: /node_modules/
|
||||
}
|
||||
],
|
||||
loaders: [
|
||||
{
|
||||
test: /\.vue$/,
|
||||
loader: 'vue'
|
||||
},
|
||||
{
|
||||
test: /\.js$/,
|
||||
loader: 'babel',
|
||||
include: config.projectRoot,
|
||||
exclude: /node_modules/
|
||||
},
|
||||
{
|
||||
test: /\.css$/,
|
||||
loader: 'vue-style-loader!css-loader'
|
||||
},
|
||||
{
|
||||
test: /\.scss$/,
|
||||
loader: 'vue-style-loader!css-loader!sass-loader'
|
||||
},
|
||||
{
|
||||
test: /\.theme$/,
|
||||
loaders: ['raw', 'sass-loader']
|
||||
},
|
||||
{
|
||||
test: /\.html$/,
|
||||
loader: 'vue-html'
|
||||
},
|
||||
{
|
||||
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
|
||||
loader: 'url',
|
||||
query: {
|
||||
limit: 10000,
|
||||
name: buildAssetsPath('images/[name].[hash:7].[ext]')
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
eslint: {
|
||||
fix: true,
|
||||
formatter: eslintFormatter
|
||||
},
|
||||
vue: {
|
||||
loaders: {
|
||||
css: 'vue-style-loader!css-loader',
|
||||
scss: 'vue-style-loader!css-loader!sass-loader'
|
||||
},
|
||||
postcss: [
|
||||
autoprefixer({
|
||||
browsers: ['last 2 versions']
|
||||
})
|
||||
]
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': config.env
|
||||
})
|
||||
]
|
||||
};
|
||||
|
|
@ -1,21 +0,0 @@
|
|||
import webpack from 'webpack';
|
||||
import merge from 'webpack-merge';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import baseWebpackConfig from './base';
|
||||
|
||||
Object.keys(baseWebpackConfig.entry).forEach((name) => {
|
||||
baseWebpackConfig.entry[name] = ['./build/server/client'].concat(baseWebpackConfig.entry[name]);
|
||||
});
|
||||
|
||||
export default merge(baseWebpackConfig, {
|
||||
devtool: '#inline-source-map',
|
||||
plugins: [
|
||||
new webpack.HotModuleReplacementPlugin(),
|
||||
new webpack.NoErrorsPlugin(),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: 'docs/index.html',
|
||||
inject: true
|
||||
})
|
||||
]
|
||||
});
|
||||
|
|
@ -1,67 +0,0 @@
|
|||
import webpack from 'webpack';
|
||||
import path from 'path';
|
||||
import merge from 'webpack-merge';
|
||||
import ExtractTextPlugin from 'extract-text-webpack-plugin';
|
||||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import config from '../config';
|
||||
import baseConfig from './base';
|
||||
|
||||
|
||||
export default merge(baseConfig, {
|
||||
output: {
|
||||
path: path.join(config.rootPath, 'docs'),
|
||||
publicPath: '',
|
||||
filename: '[name].[chunkhash:8].js',
|
||||
chunkFilename: '[id].[chunkhash:8].js'
|
||||
},
|
||||
vue: {
|
||||
loaders: {
|
||||
css: ExtractTextPlugin.extract('css'),
|
||||
scss: ExtractTextPlugin.extract(['css', 'sass'])
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new ExtractTextPlugin('[name].[contenthash:8].css'),
|
||||
new HtmlWebpackPlugin({
|
||||
filename: 'index.html',
|
||||
template: config.indexPath,
|
||||
inject: true,
|
||||
minify: {
|
||||
caseSensitive: true,
|
||||
collapseBooleanAttributes: true,
|
||||
collapseWhitespace: true,
|
||||
minifyCSS: true,
|
||||
minifyJS: true,
|
||||
preventAttributesEscaping: true,
|
||||
removeAttributeQuotes: true,
|
||||
removeComments: true,
|
||||
removeCommentsFromCDATA: true,
|
||||
removeEmptyAttributes: true,
|
||||
removeOptionalTags: true,
|
||||
removeRedundantAttributes: true,
|
||||
removeScriptTypeAttributes: true,
|
||||
removeStyleLinkTypeAttributes: true,
|
||||
useShortDoctype: true
|
||||
},
|
||||
chunksSortMode: 'dependency'
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'vendor',
|
||||
minChunks: (module) => {
|
||||
let resource = module.resource;
|
||||
|
||||
return resource && (/\.js$/).test(resource) && resource.indexOf(config.nodePath) === 0;
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.CommonsChunkPlugin({
|
||||
name: 'manifest',
|
||||
chunks: ['vendor']
|
||||
})
|
||||
]
|
||||
});
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
import fs from 'fs';
|
||||
import path from 'path';
|
||||
import webpack from 'webpack';
|
||||
import merge from 'webpack-merge';
|
||||
import ExtractTextPlugin from 'extract-text-webpack-plugin';
|
||||
import config from '../config';
|
||||
import baseConfig from './base';
|
||||
|
||||
function getDirectories(src) {
|
||||
return fs.readdirSync(src).filter((file) => {
|
||||
return fs.statSync(path.join(src, file)).isDirectory();
|
||||
});
|
||||
}
|
||||
|
||||
const componentsPath = 'src/components';
|
||||
const components = getDirectories(path.resolve(__dirname, '../../', componentsPath));
|
||||
|
||||
baseConfig.entry = {
|
||||
'vue-material': ['./src/index.js'],
|
||||
'components/mdCore/index': ['./src/core']
|
||||
};
|
||||
|
||||
components.forEach((component) => {
|
||||
baseConfig.entry[path.join('components', component, 'index')] = ['./' + path.join(componentsPath, component)];
|
||||
});
|
||||
|
||||
export default merge(baseConfig, {
|
||||
output: {
|
||||
path: config.rootPath,
|
||||
filename: '[name].js',
|
||||
library: 'VueMaterial',
|
||||
libraryTarget: 'umd'
|
||||
},
|
||||
vue: {
|
||||
loaders: {
|
||||
css: ExtractTextPlugin.extract('css'),
|
||||
scss: ExtractTextPlugin.extract(['css', 'sass'])
|
||||
}
|
||||
},
|
||||
plugins: [
|
||||
new webpack.optimize.UglifyJsPlugin({
|
||||
compress: {
|
||||
warnings: false
|
||||
}
|
||||
}),
|
||||
new webpack.optimize.OccurenceOrderPlugin(),
|
||||
new ExtractTextPlugin('[name].css')
|
||||
]
|
||||
});
|
||||
1
docs.5e0a49df.css
Normal file
1
docs.5e0a49df.css
Normal file
File diff suppressed because one or more lines are too long
7
docs.911c935d.js
Normal file
7
docs.911c935d.js
Normal file
File diff suppressed because one or more lines are too long
|
|
@ -1,27 +0,0 @@
|
|||
# Vue.js Material Docs
|
||||
|
||||
> Material Design for Vue.js
|
||||
|
||||
## Build Setup
|
||||
|
||||
``` bash
|
||||
### install dependencies
|
||||
npm install
|
||||
|
||||
### serve with hot reload at localhost:8080
|
||||
npm run dev
|
||||
|
||||
### build for production with minification
|
||||
npm run build
|
||||
|
||||
### run unit tests
|
||||
npm run unit
|
||||
|
||||
### run e2e tests
|
||||
npm run e2e
|
||||
|
||||
### run all tests
|
||||
npm test
|
||||
```
|
||||
|
||||
For detailed explanation on how things work, checkout the [guide](http://vuejs-templates.github.io/webpack/) and [docs for vue-loader](http://vuejs.github.io/vue-loader).
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<!doctype html>
|
||||
|
||||
<html lang="en-us">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
|
||||
<meta name="mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||
<meta name="apple-mobile-web-app-title" content="Vue.js Material">
|
||||
<meta name="application-name" content="Vue.js Material">
|
||||
<meta http-equiv="cleartype" content="on">
|
||||
<meta name="description" content="Material Design for Vue">
|
||||
|
||||
<title>Vue.js Material</title>
|
||||
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic">
|
||||
<link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app" v-cloak>
|
||||
<docs></docs>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
345
docs/src/App.vue
345
docs/src/App.vue
|
|
@ -1,345 +0,0 @@
|
|||
<template>
|
||||
<div class="container" v-md-theme="theme">
|
||||
<md-sidenav class="main-sidebar md-left md-fixed" ref="main-sidebar">
|
||||
<md-toolbar class="vue-material-logo" v-md-theme="'white'">
|
||||
<router-link exact to="/">
|
||||
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAAA3CAYAAAC8TkynAAAHW0lEQVRo3uWae1DUVRTH7y6wLCtjOaiZTA5mo9lkI+n0nLDH2DQ15mCTmU012piNNVNZDTXWICqaD94PReWhGJqgKKIhigbKsg9eC8I+eS3Le3eBhWXZtbyd+1MqHWTv5SGv78z9C5j7u+d8ft9zzv2BntKVZqHKAsxTSpwvlRTzKsVYGHMIi7ZHYdHOmAGX+45o7BUW16psN81GjDLbbYInDx0tcd0W6XQfEezjsS8W80tzMU8tozoLOfMcbZEMZXQanxUoJWZEEwCytHLsmnMOAkDxYLDQ1nC87mL2HtYABMtkG1BQONUeoqBI7HY2jXs2qsOTVSHGMcbGd7nN1jfoglBFPj0FGil2T0jCom3OKRAGR2O3nVG9OQb9YtrDazvNM6eHx9W7UVAm2h6NhVEHgcz8289GlX0x9qu9cfzfDat7e6ZNU8t11K+CRo75ssvYY1c0FgXTUbAsJS2DNgDrsrJDUGAYXfaBRJermZinY8h+ZUFXblfHwruRa63/hJoCsmBDQeoJDj+qVyEoDB8oL/N3dvhL9XW+rjsjewk5ztGP4kjkaaX02Yczftqg3dHv5gurSq8QPKgCQMymLA97hO7nTMjZw7qAmc3dn1jeYrOKBgrAKymp5wgxTg8P5BECCYmESFrjI6RrbdaH+908raPtZQjA39SGqCvErllnwAsoKQgMxd/m5gbc7/Cx5YpVhBRq4wMCadHvy/6uNsPHAyL4dl1lHJMhqguw8EA8lSGSsui5N9ZUbGzxuXffZlu3yCc2odyFtuyFHsD88jyGsifGUPJznBqQzGqZI1BJWlnKosv1LHioKDpDBHPzP5OZcO++P+Rd+5Ha+CD7hDw24xP/9XtH20tULvxNU813bIYow4JjyVSG6AFBQtvDb6XpNH59+xW2Nc+dsjfG5E7hJYQ0dyCOpypgMr539Mo46iakyd4r9NYUltCXRRnmF1/FHntiqAyRFxSBFyf+ltu338r0jESq7BPCgqM44uibHnhFVdLWIqvlMaZOLMoEXRILBVVy6MZS6cvi1jAcq1CsgbK3BO2I4MigQV9w7BhHHIvxbW6u2YwGo+ery0+TlpHaEGEzYWQc1505O4wAfsc7+rBq3sEkmRuFgXLGB4QR0ghxtGXPW1NU0gxEDyoA2RbzIkDIylIWXXIyqecE8s4LoN2dQt3vp3Kk0ff7+TjW1LQCDUUfGTS7meeE+ESqski9SL8PZLH2+y/WlJ9CQ5XaZvWaqpLVEDOhLovSS/DgdHMC1YLewDUnkyOMod+3XrKYn0bDocBW/XrmOeHkcWpDdFr24pM4sljK3lqD5lc0XLLcdPAW6EryWOYEPpkTQujmBKf9PhBFXfbA+B5Sy2q0th4vNJxKaW/1g8jeojbEKpgTLqQPjQJS9oAk1n4/qFW/Do2EltdVJjCVRejWhPsPD84QSdkDgghJLP3+fF3Jn+0OB29EAgBzwlxXpcTENCdc+wMOEzmo7BOCmPp9IPRER5sfGkl92VgVwDwnJCezvQpADCGHrd8X47fqKuPRSEvfaxM9oiksZ5oTiq5gj90xdGWR/A5MloQclktON6XEKLdafNCDUKSxcRVrWXRLP0lFwRRifEAMT8vW73/VVB2AHqSWVpdlMF2fVVzHwggncwIpe0AKv4it339UU1jWYLeJHmgAsixmXwiAjen67HLGwNdnpN8/c5K63+/LfrSpyR+NhlbXq0PY5gQJdj90nzmB9PtACCGFpewBiWfRaKmip3ump0qmZ5oTCrLhwP1cn5F+//I51vt92wWLeTEaTf3SUreReU44kXK3IZJ+/3AiRwhLv7/GoN6HRltmh50/T1uczzQnKHLhY+adOYEjIRq7SLKZrrk8VVJ9ZU/3DDQWlNTe8joJANOccP70bQpI2QMiWPv9LS11n6OxpDdqK44yGaJSzH3U5MqeIpfJ+J7QleR3OBz8MRWA/O7OeTAntDPNCVcygYRTjP2+GCe3t7yGxqK+aKz6mckQVcQTJEzow0R6BI1VwZzgOUMtr6SeE7glpc6+CxAmBtLQWFaIsWE1EwUM2d/YWLUFjQf5VisuUJdFyn4fJtAKAxA2LgKQ0WlaCgFwoGHMfqix4X00nuRfr4oYjleBkORbXXYejTfd6OmeJVJJG6jnhPt/1rZnWkxL0HhUQHPtpqFQQP72Pb0qHI1Xtdrtbj7aYglbWfyv3weCDIqerlloPCvR3PImySQaRPZ/aq7bhCaCXq29kUL9PeFO2XtcVywxOuyuEyIA17s7F/CUBZ2I4bP2kfaW5Wgi6bMG3VYaQySkLCPETDTBv+NOna6RqwcyRJJ9vlLSmdfVMR9NRO1tM6wdiALysw0NukA0kbWoqjS7vzmBkOGllqtrgZQJHYBTHcYXIAA3UT/Z391m+BBNBq3Uq2L//yoQIp6pUlxEk0Ul1i5voVLaTLq9O9dcN9M7jM+hyST458WvuQ4R1gq9MhpNNrU57AJvbZGCXHOV9XTPRpNRUBY/gIvU70fzGf4Bn/0Z5K7f0X0AAAAASUVORK5CYII=" alt="Vue">
|
||||
<span>Vue Material</span>
|
||||
</router-link>
|
||||
</md-toolbar>
|
||||
|
||||
<div class="main-sidebar-links">
|
||||
<md-list class="md-dense">
|
||||
<md-list-item>
|
||||
<router-link exact to="/">Introduction</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/getting-started">Getting Started</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span>Components</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/avatar">Avatar</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/bottom-bar">Bottom Bar</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/button">Button</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/button-toggle">Button Toggle</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/checkbox">Checkbox</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/icon">Icon</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/input">Input</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/list">List</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/radio">Radio</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/ripple">Ripple</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/select">Select</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/sidenav">Sidenav</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/subheader">Subheader</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/switch">Switch</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/tabs">Tabs</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/toolbar">Toolbar</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/tooltip">Tooltip</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/components/whiteframe">Whiteframe</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span>UI Elements</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/ui-elements/typography">Typography</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/ui-elements/grid-system">Grid System</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<span>Themes</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/themes/configuration">Configuration</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<router-link exact to="/themes/dynamic-themes">Dynamic Theme</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/changelog">Changelog</router-link>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<router-link exact to="/about">About</router-link>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</md-sidenav>
|
||||
|
||||
<transition name="md-router">
|
||||
<router-view></router-view>
|
||||
</transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../src/core/stylesheets/variables.scss';
|
||||
|
||||
$sizebar-size: 280px;
|
||||
|
||||
html,
|
||||
body {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
body {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.container {
|
||||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 1;
|
||||
transition: $swift-ease-out;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
padding-left: $sizebar-size;
|
||||
}
|
||||
}
|
||||
|
||||
.main-header {
|
||||
position: relative;
|
||||
z-index: 3;
|
||||
|
||||
.md-button:first-child {
|
||||
@media (min-width: 1280px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.md-toolbar,
|
||||
.md-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-title {
|
||||
.page-title {
|
||||
margin-left: 0;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
margin-left: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
span:not(.page-title) {
|
||||
@media (min-width: 1280px) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.main-sidebar.md-sidenav {
|
||||
.md-sidenav-content {
|
||||
width: $sizebar-size;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
top: 0;
|
||||
pointer-events: auto;
|
||||
transform: translate3d(0, 0, 0);
|
||||
box-shadow: $material-shadow-2dp;
|
||||
}
|
||||
}
|
||||
|
||||
.md-backdrop {
|
||||
@media (min-width: 1280px) {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
min-height: 172px;
|
||||
border-bottom: 1px solid rgba(#000, .12);
|
||||
}
|
||||
|
||||
.vue-material-logo {
|
||||
font-size: 24px;
|
||||
|
||||
a {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
img {
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.main-sidebar-links {
|
||||
overflow: auto;
|
||||
|
||||
.md-inset .md-list-item-container {
|
||||
padding-left: 36px;
|
||||
}
|
||||
|
||||
.md-list-item-container {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.page-content {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.page-content-wrapper {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
padding: 16px;
|
||||
flex: 1;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.md-router-enter-active,
|
||||
.md-router-leave-active {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
transition: $swift-ease-out;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
left: 280px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-router-enter,
|
||||
.md-router-leave-active {
|
||||
opacity: .2;
|
||||
}
|
||||
|
||||
.md-router-enter {
|
||||
.md-display-2 {
|
||||
transform: translate3D(0, -36px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
code {
|
||||
&:not(.hljs) {
|
||||
margin-left: 1px;
|
||||
margin-right: 1px;
|
||||
padding: 0 4px;
|
||||
display: inline-block;
|
||||
border-radius: 2px;
|
||||
font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
|
||||
|
||||
pre {
|
||||
margin: 8px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
toolbar: true,
|
||||
theme: 'default',
|
||||
pageTitle: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$refs['main-sidebar'].toggle();
|
||||
},
|
||||
closeSidenav() {
|
||||
this.$refs['main-sidebar'].close();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 1.9 KiB |
|
|
@ -1,109 +0,0 @@
|
|||
<template>
|
||||
<div class="code-block">
|
||||
<pre><code :class="lang" ref="block"><slot></slot></code></pre>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.code-block {
|
||||
width: 100%;
|
||||
max-width: 850px;
|
||||
padding: 4px 32px;
|
||||
margin: 0;
|
||||
position: relative;
|
||||
overflow: auto;
|
||||
border-radius: 2px;
|
||||
background-color: #eee;
|
||||
color: #455A64;
|
||||
font-family: "Operator Mono", "Fira Code", Menlo, Hack, "Roboto Mono", "Liberation Mono", Monaco, monospace;
|
||||
font-size: 14px;
|
||||
line-height: 24px;
|
||||
|
||||
+ .code-block {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
pre {
|
||||
margin: 0;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
code {
|
||||
padding: 0;
|
||||
background: none;
|
||||
}
|
||||
|
||||
.hljs:after {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 8px;
|
||||
color: rgba(#000, .26);
|
||||
font-family: $font-roboto;
|
||||
font-size: 11px;
|
||||
line-height: 1em;
|
||||
}
|
||||
|
||||
.hljs.html:after {
|
||||
content: 'HTML';
|
||||
}
|
||||
|
||||
.hljs.javascript:after {
|
||||
content: 'Javascript';
|
||||
}
|
||||
|
||||
.hljs.xml:after {
|
||||
content: 'HTML';
|
||||
}
|
||||
|
||||
.hljs.scss:after {
|
||||
content: 'SCSS';
|
||||
}
|
||||
|
||||
.hljs-keyword,
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-class,
|
||||
.hljs-subst {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.hljs-keyword {
|
||||
color: #D81B60;
|
||||
}
|
||||
|
||||
.hljs-string {
|
||||
color: #00796B;
|
||||
}
|
||||
|
||||
.hljs-comment {
|
||||
color: #00796B;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.hljs-built_in,
|
||||
.hljs-attr,
|
||||
.hljs-attribute {
|
||||
color: #1976D2;
|
||||
}
|
||||
|
||||
.hljs-selector-tag,
|
||||
.hljs-selector-class,
|
||||
.hljs-tag,
|
||||
.hljs-name,
|
||||
.hljs-number {
|
||||
color: #D81B60;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
import highlight from 'highlight.js/lib/highlight.js';
|
||||
|
||||
export default {
|
||||
props: ['lang'],
|
||||
mounted() {
|
||||
highlight.highlightBlock(this.$refs.block);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<template>
|
||||
<md-whiteframe class="demo-example" :class="classes" :style="{ height: height + 'px' }">
|
||||
<md-toolbar v-md-theme="titleTheme" class="demo-example-toolbar">
|
||||
<h2 class="md-title">{{ label }}</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<section v-md-theme="bodyTheme" class="demo-example-body">
|
||||
<slot></slot>
|
||||
</section>
|
||||
</md-whiteframe>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.demo-example {
|
||||
max-width: 100%;
|
||||
min-width: 320px;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #fafafa;
|
||||
|
||||
&.size-1 {
|
||||
width: 320px;
|
||||
}
|
||||
|
||||
&.size-2 {
|
||||
width: 412px;
|
||||
}
|
||||
|
||||
&.size-3 {
|
||||
width: 480px;
|
||||
}
|
||||
|
||||
&.size-4 {
|
||||
width: 600px;
|
||||
}
|
||||
|
||||
&.size-5 {
|
||||
width: 768px;
|
||||
}
|
||||
|
||||
+ .demo-example {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.demo-example-body {
|
||||
padding: 16px;
|
||||
background-color: #FFF;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
label: [String, Number],
|
||||
titleTheme: {
|
||||
type: String,
|
||||
default: 'grey'
|
||||
},
|
||||
bodyTheme: {
|
||||
type: String,
|
||||
default: 'default'
|
||||
},
|
||||
size: [String, Number],
|
||||
height: [String, Number]
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
if (!this.size) {
|
||||
return false;
|
||||
}
|
||||
|
||||
return 'size-' + this.size;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
|
|
@ -1,85 +0,0 @@
|
|||
<template>
|
||||
<div class="demo-page">
|
||||
<md-toolbar class="main-header">
|
||||
<md-button class="md-icon-button" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<div class="md-title">
|
||||
<span class="page-title">{{ label }}</span>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<div class="page-content">
|
||||
<md-tabs md-elevation="2" class="page-tabs">
|
||||
<md-tab md-label="Examples">
|
||||
<slot name="examples"></slot>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Code">
|
||||
<slot name="code"></slot>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="API">
|
||||
<slot name="api"></slot>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.demo-page {
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
}
|
||||
|
||||
.page-tabs {
|
||||
flex: 1;
|
||||
|
||||
> .md-whiteframe > .md-tabs-navigation {
|
||||
padding-left: 52px;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
padding-left: 8px;
|
||||
}
|
||||
|
||||
.md-tab-header {
|
||||
color: rgba(#fff, .7);
|
||||
|
||||
&.md-active {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.md-tab-indicator {
|
||||
background-color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
> .md-tabs-content {
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.md-tab {
|
||||
max-width: 1024px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['label'],
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$root.toggleSidenav();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<template>
|
||||
<div class="single-page-banner">
|
||||
<md-toolbar class="single-page-banner">
|
||||
<h1 class="md-display-2">{{ label }}</h1>
|
||||
</md-toolbar>
|
||||
|
||||
<md-button href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener" class="md-icon-button github-button">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024"><path fill="#ffffff" d="M512 0C229.25 0 0 229.25 0 512c0 226.25 146.69 418.13 350.16 485.81 25.59 4.69 34.94-11.12 34.94-24.62 0-12.19-0.47-52.56-0.72-95.31C242 908.81 211.91 817.5 211.91 817.5c-23.31-59.12-56.84-74.87-56.84-74.87-46.53-31.75 3.53-31.12 3.53-31.12 51.41 3.56 78.47 52.75 78.47 52.75 45.69 78.25 119.88 55.63 149 42.5 4.65-33 17.9-55.62 32.5-68.37C304.91 725.44 185.34 681.5 185.34 485.31c0-55.94 19.97-101.56 52.66-137.41-5.22-13-22.84-65.09 5.06-135.56 0 0 42.94-13.75 140.81 52.5 40.81-11.41 84.59-17.03 128.13-17.22 43.5 0.19 87.31 5.88 128.19 17.28 97.69-66.31 140.69-52.5 140.69-52.5 28 70.53 10.38 122.56 5.13 135.5 32.81 35.84 52.63 81.47 52.63 137.41 0 196.69-119.75 240-233.81 252.69 18.44 15.88 34.75 47 34.75 94.75 0 68.44-0.69 123.63-0.69 140.5 0 13.63 9.31 29.56 35.25 24.56C877.44 930 1024 738.13 1024 512 1024 229.25 794.75 0 512 0z"></svg>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button single-page-menu-trigger" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.single-page-banner {
|
||||
min-height: 256px;
|
||||
padding-top: 98px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
transition: $swift-ease-out;
|
||||
color: #fff !important;
|
||||
|
||||
.md-display-2 {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
padding-left: 16px;
|
||||
margin: 0 auto;
|
||||
transition: $swift-ease-out;
|
||||
color: #fff;
|
||||
|
||||
@media (max-width: 1120px) {
|
||||
margin-left: 36px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-button.single-page-menu-trigger {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 8px;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-button.github-button {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['label'],
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$root.toggleSidenav();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<template>
|
||||
<section class="single-page-section">
|
||||
<h2 class="md-headline"><md-icon>keyboard_arrow_right</md-icon> {{ label }}</h2>
|
||||
|
||||
<slot></slot>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.single-page-section {
|
||||
+ .single-page-section {
|
||||
margin-top: 48px;
|
||||
}
|
||||
|
||||
.md-headline {
|
||||
.md-icon {
|
||||
height: 32px;
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['label']
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,102 +0,0 @@
|
|||
<template>
|
||||
<div class="page-content single-page">
|
||||
<md-whiteframe md-elevation="1" class="main-header">
|
||||
<md-toolbar>
|
||||
<md-button class="md-icon-button" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<div class="md-title">
|
||||
<span class="page-title">{{ label }}</span>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<div class="single-page-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.single-page-content {
|
||||
width: 100%;
|
||||
max-width: 1024px;
|
||||
margin: 0 auto;
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.single-page {
|
||||
padding-top: 64px;
|
||||
|
||||
.main-header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 2;
|
||||
transition: $swift-ease-out;
|
||||
|
||||
@media (min-width: 1280px) {
|
||||
padding-left: 280px;
|
||||
}
|
||||
|
||||
.md-toolbar,
|
||||
.md-title {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.single-page-home {
|
||||
padding-top: 256px;
|
||||
}
|
||||
|
||||
.single-page-banner {
|
||||
min-height: 256px;
|
||||
padding-top: 98px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
color: #fff !important;
|
||||
|
||||
.md-title:first-child {
|
||||
margin-left: 48px;
|
||||
font-size: 45px;
|
||||
font-weight: 400;
|
||||
line-height: 1.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.single-page-menu-trigger {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
left: 8px;
|
||||
z-index: 3;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-button.github-button {
|
||||
margin: 0;
|
||||
position: fixed;
|
||||
top: 12px;
|
||||
right: 12px;
|
||||
z-index: 3;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['label'],
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$root.toggleSidenav();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
import Vue from 'vue';
|
||||
import VueMaterial from '../../src';
|
||||
|
||||
Vue.use(VueMaterial);
|
||||
|
||||
Vue.material.theme.registerAll({
|
||||
default: {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
},
|
||||
indigo: {
|
||||
primary: 'indigo',
|
||||
accent: 'pink'
|
||||
},
|
||||
brown: {
|
||||
primary: 'brown',
|
||||
accent: 'green'
|
||||
},
|
||||
purple: {
|
||||
primary: 'purple',
|
||||
accent: 'blue'
|
||||
},
|
||||
orange: {
|
||||
primary: 'orange',
|
||||
accent: 'green'
|
||||
},
|
||||
blue: {
|
||||
primary: 'blue',
|
||||
accent: 'pink'
|
||||
},
|
||||
green: {
|
||||
primary: 'green',
|
||||
accent: 'purple'
|
||||
},
|
||||
'light-blue': {
|
||||
primary: 'light-blue',
|
||||
accent: {
|
||||
color: 'cyan',
|
||||
hue: 'A200'
|
||||
}
|
||||
},
|
||||
teal: {
|
||||
primary: 'teal',
|
||||
accent: 'orange'
|
||||
},
|
||||
'dark-pink': {
|
||||
primary: {
|
||||
color: 'pink',
|
||||
hue: 800
|
||||
},
|
||||
accent: 'orange'
|
||||
},
|
||||
cyan: {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
},
|
||||
white: {
|
||||
primary: 'white',
|
||||
accent: 'indigo'
|
||||
},
|
||||
grey: {
|
||||
primary: {
|
||||
color: 'grey',
|
||||
hue: 300
|
||||
},
|
||||
accent: 'indigo'
|
||||
}
|
||||
});
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
/* Third Party */
|
||||
import Vue from 'vue';
|
||||
import VueRouter from 'vue-router';
|
||||
import highlight from 'highlight.js/lib/highlight.js';
|
||||
import highlightSCSS from 'highlight.js/lib/languages/scss';
|
||||
import highlightXML from 'highlight.js/lib/languages/xml';
|
||||
import highlightJS from 'highlight.js/lib/languages/javascript';
|
||||
|
||||
highlight.registerLanguage('scss', highlightSCSS);
|
||||
highlight.registerLanguage('xml', highlightXML);
|
||||
highlight.registerLanguage('javascript', highlightJS);
|
||||
|
||||
/* Configs */
|
||||
import './config.js';
|
||||
import routes from './routes.js';
|
||||
import App from './App';
|
||||
import SinglePage from './components/single-page';
|
||||
import SinglePageBanner from './components/single-page-banner';
|
||||
import SinglePageSection from './components/single-page-section';
|
||||
import DemoPage from './components/demo-page';
|
||||
import DemoExample from './components/demo-example';
|
||||
import CodeBlock from './components/code-block';
|
||||
|
||||
|
||||
Vue.component('single-page', SinglePage);
|
||||
Vue.component('single-page-banner', SinglePageBanner);
|
||||
Vue.component('single-page-section', SinglePageSection);
|
||||
Vue.component('demo-page', DemoPage);
|
||||
Vue.component('demo-example', DemoExample);
|
||||
Vue.component('code-block', CodeBlock);
|
||||
|
||||
Vue.use(VueRouter);
|
||||
|
||||
let router = new VueRouter({
|
||||
hashbang: false,
|
||||
routes
|
||||
});
|
||||
|
||||
let Docs = Vue.component('app', App);
|
||||
let handleSectionTheme = (route) => {
|
||||
if (route.name.indexOf('introduction') >= 0) {
|
||||
Docs.theme = 'blue';
|
||||
} else if (route.name.indexOf('components') >= 0) {
|
||||
Docs.theme = 'indigo';
|
||||
} else if (route.name.indexOf('themes') >= 0) {
|
||||
Docs.theme = 'teal';
|
||||
} else if (route.name.indexOf('ui-elements') >= 0) {
|
||||
Docs.theme = 'dark-pink';
|
||||
} else if (route.name.indexOf('changelog') >= 0) {
|
||||
Docs.theme = 'orange';
|
||||
} else if (route.name.indexOf('about') >= 0) {
|
||||
Docs.theme = 'green';
|
||||
} else {
|
||||
Docs.theme = 'default';
|
||||
}
|
||||
};
|
||||
|
||||
Docs = new Docs({
|
||||
el: '#app',
|
||||
router
|
||||
});
|
||||
|
||||
handleSectionTheme(router.currentRoute);
|
||||
|
||||
router.afterEach((currentRoute) => {
|
||||
let mainContent = document.querySelector('.main-content');
|
||||
|
||||
if (mainContent) {
|
||||
mainContent.scrollTop = 0;
|
||||
}
|
||||
|
||||
Docs.closeSidenav();
|
||||
|
||||
handleSectionTheme(currentRoute);
|
||||
});
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="About">
|
||||
<single-page-banner label="About"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Changelog">
|
||||
<single-page-banner label="Changelog"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Error">
|
||||
<single-page-banner label="Error 404"></single-page-banner>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,77 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Getting Started">
|
||||
<single-page-banner label="Getting Started"></single-page-banner>
|
||||
|
||||
<single-page-section label="Installation">
|
||||
<p>
|
||||
- Install Vue Material through npm or yarn: <br>
|
||||
<code>npm install vue-material</code><br>
|
||||
<code>yarn add vue-material</code>
|
||||
</p>
|
||||
<p>- Import or require Vue and Vue Material in your code:</p>
|
||||
<code-block lang="javascript">
|
||||
import Vue from 'vue';
|
||||
import VueMaterial from 'vue-material';
|
||||
|
||||
// OR
|
||||
|
||||
var Vue = require('vue');
|
||||
var VueMaterial = require('vue-material');
|
||||
</code-block>
|
||||
<small>* Others package managers like JSPM and Bower are not supported yet.</small>
|
||||
|
||||
<p>Or <a href="https://github.com/marcosmoura/vue-material/archive/master.zip" target="_blank" rel="noopener">download</a> from Github and reference the script and the stylesheet in yout HTML:</p>
|
||||
<code-block lang="xml">
|
||||
<link rel="stylesheet" href="path/to/vue-material.css">
|
||||
<script src="path/to/vue-material.js"></script>
|
||||
</code-block>
|
||||
</single-page-section>
|
||||
|
||||
<single-page-section label="Usage">
|
||||
<p>Enable Vue Material in your application using enableAll method. If you want to enable only some components you can enable them using <code>Vue.use()</code>:</p>
|
||||
<code-block lang="javascript">
|
||||
Vue.use(VueMaterial);
|
||||
|
||||
// OR
|
||||
|
||||
Vue.use(VueMaterial.MdCore); //Required to make all components work
|
||||
Vue.use(VueMaterial.MdButton);
|
||||
Vue.use(VueMaterial.MdIcon);
|
||||
Vue.use(VueMaterial.MdSidenav);
|
||||
Vue.use(VueMaterial.MdToolbar);
|
||||
</code-block>
|
||||
</single-page-section>
|
||||
|
||||
<single-page-section label="Apply theme">
|
||||
<p>Right now, to get Vue Material working properly, you'll need configure and apply a default theme.</p>
|
||||
<code-block lang="javascript">
|
||||
Vue.material.theme.register('default', {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
});
|
||||
</code-block>
|
||||
|
||||
<p>Or you can register multiple themes at once.</p>
|
||||
|
||||
<code-block lang="javascript">
|
||||
Vue.material.theme.registerAll({
|
||||
default: {
|
||||
primary: 'cyan',
|
||||
accent: 'pink'
|
||||
},
|
||||
phone: {
|
||||
primary: 'indigo',
|
||||
accent: 'pink'
|
||||
}
|
||||
});
|
||||
</code-block>
|
||||
|
||||
<p>Apply your theme using <code>v-md-theme</code> directive:</p>
|
||||
|
||||
<code-block lang="xml">
|
||||
<div v-md-theme="'default'"></div>
|
||||
<div v-md-theme="'phone'"></div>
|
||||
</code-block>
|
||||
</single-page-section>
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,74 +0,0 @@
|
|||
<template>
|
||||
<single-page label="Introduction">
|
||||
<div class="button-actions">
|
||||
<div class="example">
|
||||
<img src="https://lh6.googleusercontent.com/QTsTXFhpLc6qOCJEI9AFwW78-d2l456z5i-dLkhaMhhoY0EtABhsoMvSiCi0r2cIsmGIj7OWEKlTTPACO5x4FazNPPONVP8ye0EMu0OieX0U9_n18xg_wFiUuFHH0h6Zzg" alt="Material Design">
|
||||
</div>
|
||||
|
||||
<div class="introduction">Build well-crafted apps with Material Design and Vue 2.0</div>
|
||||
|
||||
<md-button class="md-primary md-raised" href="#/getting-started">Getting Started</md-button>
|
||||
<md-button class="md-primary md-raised" href="https://github.com/marcosmoura/vue-material" target="_blank" rel="noopener">Github</md-button>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Material Design</h2>
|
||||
<p>Vue Material is lightweight framework built exactly according to the <a href="http://material.google.com" target="_blank" rel="noopener">Material Design</a> specs. Build powerful and well-designed web apps that can can fit on every screen.</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Full-featured</h2>
|
||||
<p>You can generate and use themes dynamically, use components on demand, take advantage of UI Elements and Components with an ease-to-use API and more...</p>
|
||||
</div>
|
||||
|
||||
<div class="column">
|
||||
<h2 class="md-headline">Compatible</h2>
|
||||
<p>It aims to deliver a collection of reusable components and a series of UI Elements to build applications with support to <a href="https://saucelabs.com/u/vuejs" target="_blank" rel="noopener">modern Web Browsers</a> through Vue 2.0.</p>
|
||||
</div>
|
||||
</div>
|
||||
</single-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.example {
|
||||
margin-bottom: 24px;
|
||||
overflow: hidden;
|
||||
|
||||
img {
|
||||
margin: -45px 0;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.button-actions {
|
||||
margin-bottom: 24px;
|
||||
text-align: center;
|
||||
|
||||
.introduction {
|
||||
margin-bottom: .8em;
|
||||
font-size: 20px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
|
||||
.md-button {
|
||||
margin-left: 0;
|
||||
color: #fff !important;
|
||||
}
|
||||
}
|
||||
|
||||
.row {
|
||||
margin: 0 -10px;
|
||||
display: flex;
|
||||
flex-flow: row wrap;
|
||||
}
|
||||
|
||||
.column {
|
||||
margin: 0 10px;
|
||||
flex: 1 1 30%;
|
||||
|
||||
@media (max-width: 640px) {
|
||||
flex: 1 1 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,103 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Avatar">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<md-avatar>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Large" size="2">
|
||||
<md-avatar class="md-large">
|
||||
<img src="//placeimg.com/64/64/people/2" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<demo-example label="Default">
|
||||
<code-block lang="xml">
|
||||
<md-avatar class="md-large">
|
||||
<img src="//placeimg.com/64/64/people/2" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-large md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Large">
|
||||
<code-block lang="xml">
|
||||
<md-avatar>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-accent">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar class="md-avatar-icon md-warn">
|
||||
<md-icon>notes</md-icon>
|
||||
</md-avatar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
|
@ -1,254 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Bottom Bar">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Shifting">
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar class="md-accent" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar class="md-warn" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar class="md-transparent" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar v-md-theme="'indigo'">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar v-md-theme="'orange'">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift v-md-theme="'green'">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift v-md-theme="'brown'">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Dynamic Theme">
|
||||
<div class="phone-viewport">
|
||||
<md-bottom-bar md-shift v-md-theme="playground.theme">
|
||||
<md-bottom-bar-item @click="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<demo-example label="Default">
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar>
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Shifting">
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar class="md-accent" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar class="md-warn" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar class="md-transparent" md-shift>
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar v-md-theme="'indigo'">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar v-md-theme="'orange'">
|
||||
<md-bottom-bar-item md-icon="history">Recents</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="favorite" md-active>Favorites</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar md-shift v-md-theme="'green'">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar md-shift v-md-theme="'brown'">
|
||||
<md-bottom-bar-item md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Dynamic Theme">
|
||||
<code-block lang="xml">
|
||||
<md-bottom-bar md-shift v-md-theme="playground.theme">
|
||||
<md-bottom-bar-item @click="setTheme('blue')" md-icon="ondemand_video">Movies</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click="setTheme('teal')" md-icon="music_note">Music</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click="setTheme('brown')" md-icon="books" md-active>Books</md-bottom-bar-item>
|
||||
<md-bottom-bar-item @click="setTheme('indigo')" md-icon="photo">Pictures</md-bottom-bar-item>
|
||||
</md-bottom-bar>
|
||||
</code-block>
|
||||
|
||||
<code-block lang="javascript">
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playground: {
|
||||
theme: 'brown'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setTheme(theme) {
|
||||
this.playground.theme = theme;
|
||||
}
|
||||
}
|
||||
};
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-bottom-bar {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.phone-viewport {
|
||||
width: 320px;
|
||||
height: 480px;
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: darken(#fafafa, 5%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playground: {
|
||||
theme: 'brown'
|
||||
}
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
setTheme(theme) {
|
||||
this.playground.theme = theme;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,217 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Button Toggle">
|
||||
<div slot="examples">
|
||||
<demo-example label="Multiple" size="2">
|
||||
<md-button-toggle class="md-button-group">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_underline</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle class="md-button-group md-accent">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_underline</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle class="md-button-group md-warn">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_bold</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle" disabled>
|
||||
<md-icon>format_italic</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button" disabled>
|
||||
<md-icon>strikethrough_s</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>title</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle class="md-button-group md-primary">
|
||||
<md-button class="md-toggle">Works</md-button>
|
||||
<md-button class="md-toggle">With</md-button>
|
||||
<md-button>Text</md-button>
|
||||
<md-button>Too</md-button>
|
||||
</md-button-toggle>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Single Selection" size="2">
|
||||
<md-button-toggle type="radio" class="md-button-group">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-accent">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-warn">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-primary">
|
||||
<md-button class="md-icon-button md-toggle">
|
||||
<md-icon>format_align_left</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_center</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>format_align_right</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button" disabled>
|
||||
<md-icon>format_align_justify</md-icon>
|
||||
</md-button>
|
||||
</md-button-toggle>
|
||||
|
||||
<md-button-toggle type="radio" class="md-button-group md-primary">
|
||||
<md-button>Works</md-button>
|
||||
<md-button class="md-toggle">With</md-button>
|
||||
<md-button>Text</md-button>
|
||||
<md-button>Too</md-button>
|
||||
</md-button-toggle>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-button-group + .md-button-group {
|
||||
margin-top: 16px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,316 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Button">
|
||||
<div slot="examples">
|
||||
<demo-example label="Flat">
|
||||
<md-button @click="disablePrimaryButton">Default</md-button>
|
||||
<md-button class="md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button class="md-accent">Accent</md-button>
|
||||
<md-button class="md-warn">Warn</md-button>
|
||||
<md-button class="md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button class="md-dense">Dense</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Raised">
|
||||
<md-button class="md-raised" @click="disablePrimaryButton">Default</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button class="md-raised md-accent">Accent</md-button>
|
||||
<md-button class="md-raised md-warn">Warn</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button class="md-raised md-dense">Dense</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<md-button class="md-raised md-primary" @click="disablePrimaryButton" v-md-theme="'indigo'">Indigo</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="buttonDisabled" v-md-theme="'teal'">Teal</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'green'">Green</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'white'">White</md-button>
|
||||
<md-button class="md-raised md-primary" :disabled="!buttonDisabled" v-md-theme="'brown'">Brown</md-button>
|
||||
<md-button class="md-raised md-primary md-dense" v-md-theme="'orange'">Orange</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Links">
|
||||
<md-button href="#/button" class="md-raised" @click="disablePrimaryButton">Default</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" :disabled="buttonDisabled">Primary</md-button>
|
||||
<md-button href="#/button" class="md-raised md-accent">Accent</md-button>
|
||||
<md-button href="#/button" class="md-raised md-warn">Warn</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" :disabled="!buttonDisabled">Disabled</md-button>
|
||||
<md-button href="#/button" class="md-raised md-dense">Dense</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Icons - Flat">
|
||||
<md-button class="md-icon-button" @click="disablePrimaryButton">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-primary" :disabled="buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-accent">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-warn">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button" :disabled="!buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-dense">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Icons - Raised">
|
||||
<md-button class="md-icon-button md-raised" @click="disablePrimaryButton">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-primary" :disabled="buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-accent">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-warn">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised" :disabled="!buttonDisabled">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-dense">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Floating Action Button" height="360">
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-fab-bottom-left md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-primary">
|
||||
<md-icon>email</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-primary md-mini">
|
||||
<md-icon>email</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn md-mini">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-clean">
|
||||
<md-icon>chat</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-clean md-mini">
|
||||
<md-icon>chat</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab" disabled>
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-mini" disabled>
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<demo-example label="Flat">
|
||||
<code-block lang="html">
|
||||
<md-button>Default</md-button>
|
||||
<md-button class="md-primary">Primary</md-button>
|
||||
<md-button class="md-accent">Accent</md-button>
|
||||
<md-button class="md-warn">Warn</md-button>
|
||||
<md-button class="md-primary" disabled>Disabled</md-button>
|
||||
<md-button class="md-dense">Dense</md-button>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Raised">
|
||||
<code-block lang="xml">
|
||||
<md-button class="md-raised">Default</md-button>
|
||||
<md-button class="md-raised md-primary">Primary</md-button>
|
||||
<md-button class="md-raised md-accent">Accent</md-button>
|
||||
<md-button class="md-raised md-warn">Warn</md-button>
|
||||
<md-button class="md-raised md-primary" disabled>Disabled</md-button>
|
||||
<md-button class="md-raised md-dense">Dense</md-button>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<code-block lang="xml">
|
||||
<md-button class="md-raised md-primary" v-md-theme="'indigo'">Indigo</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'teal'">Teal</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'green'">Green</md-button>
|
||||
<md-button class="md-raised md-primary" v-md-theme="'white'">White</md-button>
|
||||
<md-button class="md-raised md-primary" disabled v-md-theme="'brown'">Brown</md-button>
|
||||
<md-button class="md-raised md-primary md-dense" v-md-theme="'orange'">Orange</md-button>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Links">
|
||||
<code-block lang="xml">
|
||||
<md-button href="#/button" class="md-raised">Default</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary">Primary</md-button>
|
||||
<md-button href="#/button" class="md-raised md-accent">Accent</md-button>
|
||||
<md-button href="#/button" class="md-raised md-warn">Warn</md-button>
|
||||
<md-button href="#/button" class="md-raised md-primary" disabled>Disabled</md-button>
|
||||
<md-button href="#/button" class="md-raised md-dense">Dense</md-button>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Icons - Flat">
|
||||
<code-block lang="xml">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-primary">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-accent">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-warn">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button" disabled>
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-dense">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Icons - Raised">
|
||||
<code-block lang="xml">
|
||||
<md-button class="md-icon-button md-raised">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-primary">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-accent">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-warn">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised" disabled>
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button md-raised md-dense">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Floating Action Button">
|
||||
<code-block lang="xml">
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-fab-bottom-left md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>edit</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-primary">
|
||||
<md-icon>email</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-primary md-mini">
|
||||
<md-icon>email</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-warn md-mini">
|
||||
<md-icon>save</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-clean">
|
||||
<md-icon>chat</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-clean md-mini">
|
||||
<md-icon>chat</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab" disabled>
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-fab md-mini" disabled>
|
||||
<md-icon>message</md-icon>
|
||||
</md-button>
|
||||
</code-block>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
buttonDisabled: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
disablePrimaryButton() {
|
||||
this.buttonDisabled = !this.buttonDisabled;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Checkbox">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<md-checkbox id="my-test1" name="my-test1" v-model="checkbox">Regular Checkbox</md-checkbox>
|
||||
<md-checkbox id="my-test2" name="my-test2" v-model="checkbox" class="md-primary">Primary Color</md-checkbox>
|
||||
<md-checkbox id="my-test3" name="my-test3" v-model="checkbox" class="md-warn">Warn Color</md-checkbox>
|
||||
<md-checkbox id="my-test4" name="my-test4" v-model="checkbox" disabled>Disabled</md-checkbox>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<div class="themed" v-md-theme="'orange'">
|
||||
<md-checkbox id="my-test5" name="my-test5" v-model="checkbox2" class="md-primary">Primary Orange</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'green'">
|
||||
<md-checkbox id="my-test6" name="my-test6" v-model="checkbox2" class="md-primary">Primary Green</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'light-blue'">
|
||||
<md-checkbox id="my-test7" name="my-test7" v-model="checkbox2" class="md-primary">Primary Light Blue</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'indigo'">
|
||||
<md-checkbox id="my-test8" name="my-test8" v-model="checkbox2" class="md-primary">Primary Indigo</md-checkbox>
|
||||
</div>
|
||||
|
||||
<div class="themed" v-md-theme="'brown'">
|
||||
<md-checkbox id="my-test9" name="my-test9" v-model="checkbox2" class="md-primary" disabled>Primary Brown Disabled</md-checkbox>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.themed {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checkbox: true,
|
||||
checkbox2: false
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Icon">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<md-icon>home</md-icon>
|
||||
<md-icon class="md-primary">home</md-icon>
|
||||
<md-icon class="md-accent">home</md-icon>
|
||||
<md-icon class="md-warn">home</md-icon>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed" size="2">
|
||||
<md-icon v-md-theme="'light-blue'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'green'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'brown'" class="md-primary">home</md-icon>
|
||||
<md-icon v-md-theme="'orange'" class="md-primary">home</md-icon>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
|
@ -1,127 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Input">
|
||||
<div slot="examples">
|
||||
<demo-example label="Regular fields" size="4">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Initial value</label>
|
||||
<md-input v-model="initialValue"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>With label</label>
|
||||
<md-input placeholder="My nice placeholder"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-inline>
|
||||
<label>Inline field</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Number</label>
|
||||
<md-input type="number"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Disabled</label>
|
||||
<md-input disabled></md-input>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Password" size="4">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Regular Password</label>
|
||||
<md-input type="password"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container md-has-password>
|
||||
<label>Password Reveal</label>
|
||||
<md-input type="password"></md-input>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Required and Errors" size="4">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Required</label>
|
||||
<md-input required></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Error</label>
|
||||
<md-input required></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Error with message</label>
|
||||
<md-input required></md-input>
|
||||
|
||||
<span class="md-error">Validation message</span>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container class="md-input-invalid">
|
||||
<label>Textarea with error</label>
|
||||
<md-textarea></md-textarea>
|
||||
|
||||
<span class="md-error">Textarea validation message</span>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Character counter" size="4">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container>
|
||||
<label>Textarea</label>
|
||||
<md-textarea maxlength="70"></md-textarea>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label>Input</label>
|
||||
<md-input maxlength="20"></md-input>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed" size="4">
|
||||
<form novalidate @submit.stop.prevent="submit">
|
||||
<md-input-container v-md-theme="'green'">
|
||||
<label>Themable - Input</label>
|
||||
<md-input></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container v-md-theme="'brown'">
|
||||
<label>Themable - Textarea</label>
|
||||
<md-textarea></md-textarea>
|
||||
</md-input-container>
|
||||
</form>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
initialValue: 'My initial value'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,727 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - List">
|
||||
<div slot="examples">
|
||||
<demo-example label="Single Line">
|
||||
<div class="phone-viewport">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Sent Mail</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Abbey Christansen</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Alex Nelson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Mary Johnson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-list class="md-dense">
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Sent Mail</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Abbey Christansen</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Alex Nelson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Mary Johnson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Double Line">
|
||||
<div class="phone-viewport">
|
||||
<md-list class="md-double-line">
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">phone</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">email</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>aliconnors@example.com</span>
|
||||
<span>Personal</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>ali_connors@example.com</span>
|
||||
<span>Work</span>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-list class="md-double-line md-dense">
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">phone</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>(650) 555-1234</span>
|
||||
<span>Mobile</span>
|
||||
</div>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon class="md-primary">email</md-icon>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>aliconnors@example.com</span>
|
||||
<span>Personal</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>sms</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item class="md-inset">
|
||||
<div class="md-list-text-container">
|
||||
<span>ali_connors@example.com</span>
|
||||
<span>Work</span>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Triple Line">
|
||||
<div class="phone-viewport">
|
||||
<md-list class="custom-list md-triple-line">
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Ali Connors</span>
|
||||
<span>Brunch this weekend?</span>
|
||||
<p>I'll be in your neighborhood doing errands...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>me, Scott, Jennifer</span>
|
||||
<span>Summer BBQ</span>
|
||||
<p>Wish I could come, but I'm out of town ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Sandra Adams</span>
|
||||
<span>Oui oui</span>
|
||||
<p>Do you have Paris recommendations ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Trevor Hansen</span>
|
||||
<span>Order confirmation</span>
|
||||
<p>Thank you for your recent order from ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-list class="custom-list md-triple-line md-dense">
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Ali Connors</span>
|
||||
<span>Brunch this weekend?</span>
|
||||
<p>I'll be in your neighborhood doing errands...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>me, Scott, Jennifer</span>
|
||||
<span>Summer BBQ</span>
|
||||
<p>Wish I could come, but I'm out of town ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Sandra Adams</span>
|
||||
<span>Oui oui</span>
|
||||
<p>Do you have Paris recommendations ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Trevor Hansen</span>
|
||||
<span>Order confirmation</span>
|
||||
<p>Thank you for your recent order from ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Controls">
|
||||
<div class="phone-viewport">
|
||||
<md-list>
|
||||
<md-list-item>
|
||||
<md-icon>whatshot</md-icon>
|
||||
<span>News</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">World</md-list-item>
|
||||
<md-list-item class="md-inset">Americas</md-list-item>
|
||||
<md-list-item class="md-inset">Europe</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>videogame_asset</md-icon>
|
||||
<span>Games</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">Console</md-list-item>
|
||||
<md-list-item class="md-inset">PC</md-list-item>
|
||||
<md-list-item class="md-inset">Phone</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>video_library</md-icon>
|
||||
<span>Video</span>
|
||||
|
||||
<md-list-expand>
|
||||
<md-list>
|
||||
<md-list-item class="md-inset">Humor</md-list-item>
|
||||
<md-list-item class="md-inset">Music</md-list-item>
|
||||
<md-list-item class="md-inset">Movies</md-list-item>
|
||||
<md-list-item class="md-inset">TV Shows</md-list-item>
|
||||
</md-list>
|
||||
</md-list-expand>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>shopping_basket</md-icon>
|
||||
<span>Shop</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Complete Example">
|
||||
<div class="phone-viewport complete-example">
|
||||
<md-whiteframe md-elevation="3">
|
||||
<md-toolbar class="md-large" v-md-theme="'light-blue'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button" @click="toggleSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>view_module</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">My Files</h2>
|
||||
|
||||
<md-button class="md-fab md-mini">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</md-whiteframe>
|
||||
|
||||
<md-list class="md-double-line">
|
||||
<md-subheader class="md-inset">Folders</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Photos</span>
|
||||
<p>Jan 9, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Recipes</span>
|
||||
<p>Jan 17, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>folder</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Work</span>
|
||||
<p>Jan 28, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-subheader class="md-inset">Files</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'blue'" class="md-avatar-icon md-primary">
|
||||
<md-icon>insert_drive_file</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Vacation Itinerary</span>
|
||||
<p>Jan 20, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Kitchen Remodel</span>
|
||||
<p>Jan 10, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'green'" class="md-avatar-icon md-primary">
|
||||
<md-icon>view_list</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Grocery Shop</span>
|
||||
<p>Jan 10, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar v-md-theme="'orange'" class="md-avatar-icon md-primary">
|
||||
<md-icon>collections</md-icon>
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Weekend Pictures</span>
|
||||
<p>Jan 10, 2014</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>info</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
|
||||
<md-sidenav class="md-left" ref="sidebar">
|
||||
<md-toolbar class="md-account-header" v-md-theme="'blue'">
|
||||
<md-list class="md-transparent">
|
||||
<md-list-item class="md-avatar-list">
|
||||
<md-avatar class="md-large">
|
||||
<img src="https://placeimg.com/64/64/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span style="flex: 1"></span>
|
||||
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/3" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/4" alt="People">
|
||||
</md-avatar>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<div class="md-list-text-container">
|
||||
<span>John Doe</span>
|
||||
<span>johndoe@email.com</span>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>arrow_drop_down</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-toolbar>
|
||||
|
||||
<md-list v-md-theme="'blue'">
|
||||
<md-list-item @click="toggleSidenav" class="md-primary">
|
||||
<md-icon>insert_drive_file</md-icon> <span>My files</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>people</md-icon> <span>Shared with me</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>access_time</md-icon> <span>Recent</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>start</md-icon> <span>Starred</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item @click="toggleSidenav">
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</md-sidenav>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@import '../../../../src/core/stylesheets/variables.scss';
|
||||
|
||||
.phone-viewport {
|
||||
width: 360px;
|
||||
height: 540px;
|
||||
margin-right: 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
background-color: #fff;
|
||||
border: 1px solid rgba(#000, .12);
|
||||
}
|
||||
|
||||
.custom-list {
|
||||
.md-list-action {
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
right: 16px;
|
||||
pointer-events: auto;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
|
||||
.complete-example {
|
||||
height: 540px;
|
||||
display: flex;
|
||||
flex-flow: column;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
.md-fab {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
bottom: -20px;
|
||||
left: 16px;
|
||||
box-shadow: $material-shadow-5dp;
|
||||
}
|
||||
|
||||
.md-toolbar {
|
||||
.md-icon {
|
||||
color: #014e70;
|
||||
}
|
||||
}
|
||||
|
||||
.md-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.md-list {
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.md-list-action .md-icon {
|
||||
color: rgba(#000, .26);
|
||||
}
|
||||
|
||||
.md-avatar-icon .md-icon {
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.md-sidenav .md-list-text-container > :nth-child(2) {
|
||||
color: rgba(#fff, .54);
|
||||
}
|
||||
|
||||
.md-account-header {
|
||||
.md-list-item:hover .md-button:hover {
|
||||
background-color: inherit;
|
||||
}
|
||||
|
||||
.md-avatar-list .md-list-item-container:hover {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
sidenavVisible: false
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
toggleSidenav() {
|
||||
this.$refs.sidebar.toggle();
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,88 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Radio">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div>
|
||||
<md-radio v-model="radio1" id="my-test1" name="my-test-group1" md-value="1">My beautiful radio</md-radio>
|
||||
<md-radio v-model="radio1" id="my-test2" name="my-test-group1" md-value="2">Another radio</md-radio>
|
||||
<md-radio v-model="radio1" id="my-test3" name="my-test-group1" md-value="3">Another another radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio2" id="my-test4" name="my-test-group2" md-value="1" class="md-primary">Primary radio</md-radio>
|
||||
<md-radio v-model="radio2" id="my-test5" name="my-test-group2" md-value="2" class="md-primary">Another primary radio</md-radio>
|
||||
<md-radio v-model="radio2" id="my-test6" name="my-test-group2" md-value="3" class="md-primary">Another another primary radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio3" id="my-test7" name="my-test-group3" md-value="1" class="md-warn">Warn radio</md-radio>
|
||||
<md-radio v-model="radio3" id="my-test8" name="my-test-group3" md-value="2" class="md-warn">Another warn radio</md-radio>
|
||||
<md-radio v-model="radio3" id="my-test9" name="my-test-group3" md-value="3" class="md-warn">Another another warn radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-radio v-model="radio4" id="my-test10" name="my-test-group3" md-value="1">My beautiful radio</md-radio>
|
||||
<md-radio v-model="radio4" id="my-test11" name="my-test-group3" md-value="2" disabled>Disabled</md-radio>
|
||||
<md-radio v-model="radio4" id="my-test12" name="my-test-group3" md-value="3">Another radio</md-radio>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-radio v-model="radio5" id="my-test13" name="my-test-group4" md-value="1" class="md-primary">Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test14" name="my-test-group4" md-value="2" class="md-primary">Another Orange radio</md-radio>
|
||||
<md-radio v-model="radio5" id="my-test15" name="my-test-group4" md-value="3" class="md-primary">Another another Orange radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-radio v-model="radio6" id="my-test16" name="my-test-group4" md-value="1" class="md-primary">Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test17" name="my-test-group4" md-value="2" class="md-primary">Another Brown radio</md-radio>
|
||||
<md-radio v-model="radio6" id="my-test18" name="my-test-group4" md-value="3" class="md-primary">Another another Brown radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-radio v-model="radio7" id="my-test19" name="my-test-group6" md-value="1" class="md-primary">Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test20" name="my-test-group6" md-value="2" class="md-primary">Another Green radio</md-radio>
|
||||
<md-radio v-model="radio7" id="my-test21" name="my-test-group6" md-value="3" class="md-primary">Another another Green radio</md-radio>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'teal'">
|
||||
<md-radio v-model="radio8" id="my-test22" name="my-test-group3" md-value="1" class="md-primary">Teal radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test23" name="my-test-group3" md-value="2" class="md-primary" disabled>Teal disabled radio</md-radio>
|
||||
<md-radio v-model="radio8" id="my-test24" name="my-test-group3" md-value="3" class="md-primary">Another another Teal radio</md-radio>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.themed {
|
||||
display: inline-block;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
radio1: 2,
|
||||
radio2: 1,
|
||||
radio3: 1,
|
||||
radio4: 1,
|
||||
radio5: 2,
|
||||
radio6: 3,
|
||||
radio7: 1,
|
||||
radio8: 2
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,49 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Ripple">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<span class="has-ripple" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple green" v-md-ink-ripple>This span has ripple effect</span>
|
||||
<span class="has-ripple blue" v-md-ink-ripple>This span has ripple effect</span>
|
||||
|
||||
<div>
|
||||
<md-avatar v-md-ink-ripple>
|
||||
<img src="//placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<md-avatar v-md-ink-ripple class="md-avatar-icon">
|
||||
<md-icon>home</md-icon>
|
||||
</md-avatar>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.has-ripple {
|
||||
margin-bottom: 16px;
|
||||
padding: 16px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.blue {
|
||||
color: #2196F3;
|
||||
}
|
||||
|
||||
.green {
|
||||
color: #4CAF50;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,107 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Select">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="movie">Movie</label>
|
||||
<md-select name="movie" id="movie" v-model="movie">
|
||||
<md-option value="Fight Club">Fight Club</md-option>
|
||||
<md-option value="Godfather II">Godfather II</md-option>
|
||||
<md-option value="Godfather III">Godfather III</md-option>
|
||||
<md-option value="Godfather">Godfather</md-option>
|
||||
<md-option value="Godfellas">Godfellas</md-option>
|
||||
<md-option value="Pulp Fiction">Pulp Fiction</md-option>
|
||||
<md-option value="Scarface">Scarface</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="country">Country</label>
|
||||
<md-select name="country" id="country" v-model="country">
|
||||
<md-option value="Australia">Australia</md-option>
|
||||
<md-option value="Brazil">Brazil</md-option>
|
||||
<md-option value="Japan">Japan</md-option>
|
||||
<md-option value="United States">United States</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label for="font">Font</label>
|
||||
<md-select name="font" id="font" v-model="font">
|
||||
<md-option value="Arial">Arial</md-option>
|
||||
<md-option value="Calibri">Calibri</md-option>
|
||||
<md-option value="Cambria">Cambria</md-option>
|
||||
<md-option value="Comic Sans">Comic Sans</md-option>
|
||||
<md-option value="Consolas">Consolas</md-option>
|
||||
<md-option value="Courier">Courier</md-option>
|
||||
<md-option value="Droid Sans">Droid Sans</md-option>
|
||||
<md-option value="Georgia">Georgia</md-option>
|
||||
<md-option value="Helvetica">Helvetica</md-option>
|
||||
<md-option value="Impact">Impact</md-option>
|
||||
<md-option value="Roboto">Roboto</md-option>
|
||||
<md-option value="Segoe UI">Segoe UI</md-option>
|
||||
<md-option value="Times New Roman">Times New Roman</md-option>
|
||||
<md-option value="Ubuntu">Ubuntu</md-option>
|
||||
<md-option value="Verdana">Verdana</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Groups">
|
||||
<div class="field-group">
|
||||
<md-input-container>
|
||||
<label for="food">Food</label>
|
||||
<md-select name="food" id="food" v-model="food">
|
||||
<md-subheader>Fruits</md-subheader>
|
||||
<md-option value="Apples">Apples</md-option>
|
||||
<md-option value="Bananas">Bananas</md-option>
|
||||
<md-option value="Peaches">Peaches</md-option>
|
||||
<md-option value="Oranges">Oranges</md-option>
|
||||
|
||||
<md-subheader>Vegetables</md-subheader>
|
||||
<md-option value="Carrots">Carrots</md-option>
|
||||
<md-option value="Cucumbers">Cucumbers</md-option>
|
||||
|
||||
<md-subheader>Baked Goods</md-subheader>
|
||||
<md-option value="Apple Pie">Apple Pie</md-option>
|
||||
<md-option value="Chocolate Cake">Chocolate Cake</md-option>
|
||||
</md-select>
|
||||
</md-input-container>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.field-group {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.md-input-container + .md-input-container {
|
||||
margin-left: 4px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
movie: 'Godfather',
|
||||
country: '',
|
||||
font: '',
|
||||
food: ''
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,78 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Sidenav">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default" size="2">
|
||||
<div class="phone-viewport">
|
||||
<md-toolbar>
|
||||
<md-button class="md-icon-button" @click="toggleLeftSidenav">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title">My App</h2>
|
||||
</md-toolbar>
|
||||
|
||||
<div>
|
||||
<md-button class="md-raised md-accent" @click="toggleRightSidenav">Toggle right</md-button>
|
||||
<p>Open console to see the events</p>
|
||||
</div>
|
||||
|
||||
<md-sidenav class="md-left" ref="leftSidenav" @open="open('Left')" @close="close('Left')">
|
||||
<md-toolbar class="md-large">
|
||||
<div class="md-toolbar-container">
|
||||
<h3 class="md-title">Sidenav content</h3>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nisi cupiditate esse necessitatibus beatae nobis, deserunt ut est fugit, tempora deleniti, eligendi commodi doloribus. Nemo, assumenda possimus, impedit inventore perferendis iusto!</p>
|
||||
</md-sidenav>
|
||||
|
||||
<md-sidenav class="md-right" ref="rightSidenav" @open="open('Right')" @close="close('Right')">
|
||||
<md-toolbar>
|
||||
<div class="md-toolbar-container">
|
||||
<h3 class="md-title">Sidenav content</h3>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-button class="md-raised md-accent" @click="closeRightSidenav">Close</md-button>
|
||||
</md-sidenav>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
p {
|
||||
padding: 8px 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
toggleLeftSidenav() {
|
||||
this.$refs.leftSidenav.toggle();
|
||||
},
|
||||
toggleRightSidenav() {
|
||||
this.$refs.rightSidenav.toggle();
|
||||
},
|
||||
closeRightSidenav() {
|
||||
this.$refs.rightSidenav.close();
|
||||
},
|
||||
open(ref) {
|
||||
console.log('Opened: ' + ref);
|
||||
},
|
||||
close(ref) {
|
||||
console.log('Closed: ' + ref);
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,155 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Subheader">
|
||||
<div slot="examples">
|
||||
<demo-example label="With Lists">
|
||||
<div class="phone-viewport">
|
||||
<md-list>
|
||||
<md-subheader>Navigation</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>move_to_inbox</md-icon> <span>Inbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>send</md-icon> <span>Outbox</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>delete</md-icon> <span>Trash</span>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-icon>error</md-icon> <span>Spam</span>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-subheader>Contacts</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Abbey Christansen</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Alex Nelson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<span>Mary Johnson</span>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>chat_bubble</md-icon>
|
||||
</md-button>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
|
||||
<div class="phone-viewport">
|
||||
<md-list class="custom-list md-triple-line">
|
||||
<md-subheader>Today</md-subheader>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Ali Connors</span>
|
||||
<span>Brunch this weekend?</span>
|
||||
<p>I'll be in your neighborhood doing errands...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon class="md-primary">star</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/6" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>me, Scott, Jennifer</span>
|
||||
<span>Summer BBQ</span>
|
||||
<p>Wish I could come, but I'm out of town ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/5" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Sandra Adams</span>
|
||||
<span>Oui oui</span>
|
||||
<p>Do you have Paris recommendations ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
|
||||
<md-list-item>
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/8" alt="People">
|
||||
</md-avatar>
|
||||
|
||||
<div class="md-list-text-container">
|
||||
<span>Trevor Hansen</span>
|
||||
<span>Order confirmation</span>
|
||||
<p>Thank you for your recent order from ...</p>
|
||||
</div>
|
||||
|
||||
<md-button class="md-icon-button md-list-action">
|
||||
<md-icon>star_border</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-divider class="md-inset"></md-divider>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
|
@ -1,66 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Switch">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div>
|
||||
<md-switch v-model="checked0" id="my-test0" name="my-test0"></md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked1" id="my-test1" name="my-test1" class="md-primary">Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked2" id="my-test2" name="my-test2" class="md-warn">Warn Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-switch v-model="checked3" id="my-test3" name="my-test3" disabled>Disabled</md-switch>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<div v-md-theme="'orange'">
|
||||
<md-switch v-model="checked4" id="my-test4" name="my-test4" class="md-primary"></md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'green'">
|
||||
<md-switch v-model="checked5" id="my-test5" name="my-test5" class="md-primary">Green Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'brown'">
|
||||
<md-switch v-model="checked6" id="my-test6" name="my-test6" class="md-primary">Brown Primary Color</md-switch>
|
||||
</div>
|
||||
|
||||
<div v-md-theme="'light-blue'">
|
||||
<md-switch v-model="checked7" id="my-test7" name="my-test7" class="md-primary" disabled>Light Blue Primary Color Disabled</md-switch>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
checked0: true,
|
||||
checked1: true,
|
||||
checked2: true,
|
||||
checked3: true,
|
||||
checked4: true,
|
||||
checked5: true,
|
||||
checked6: true,
|
||||
checked7: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,220 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Tabs">
|
||||
<div slot="examples" class="examples">
|
||||
<demo-example label="Default - Grey Theme" size="3" body-theme="grey">
|
||||
<md-tabs>
|
||||
<md-tab id="movies" md-label="Movies">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="music" md-label="Music">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="books" md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab id="pictures" md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Fixed - Accent Color" size="3">
|
||||
<md-tabs md-fixed class="md-accent">
|
||||
<md-tab md-label="Movies">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Music">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Pictures">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="With icons and text - Teal Theme" size="3" body-theme="teal">
|
||||
<md-tabs md-fixed>
|
||||
<md-tab md-label="Movies" md-icon="ondemand_video">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Music" md-icon="music_note">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Books" md-icon="books">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-label="Pictures" md-icon="photo">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Centered with only icon - Transparent Color" size="3">
|
||||
<md-tabs md-centered class="md-transparent">
|
||||
<md-tab md-icon="phone">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="favorite">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="near_me">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Fixed with only icon - Default Theme" size="3">
|
||||
<md-tabs md-fixed>
|
||||
<md-tab md-icon="phone">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="favorite">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas amet cum vitae, omnis! Illum quas voluptatem, expedita iste, dicta ipsum ea veniam dolore in, quod saepe reiciendis nihil.</p>
|
||||
</md-tab>
|
||||
|
||||
<md-tab md-icon="near_me">
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt dolorum quas.</p>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Playground" size="3">
|
||||
<div class="playground">
|
||||
<md-subheader>Tabs Attributes</md-subheader>
|
||||
<md-checkbox id="fixed" v-model="playground.fixed">Fixed</md-checkbox>
|
||||
<md-checkbox id="centered" v-model="playground.centered">Centered</md-checkbox>
|
||||
<md-input-container>
|
||||
<label for="shadow">Shadow</label>
|
||||
<md-input type="number" id="shadow" v-model="playground.shadow" min="0" max="24"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-subheader>Theme</md-subheader>
|
||||
<md-radio v-model="playground.theme" id="theme1" name="theme" md-value="default">Default</md-radio>
|
||||
<md-radio v-model="playground.theme" id="theme2" name="theme" md-value="green">Green</md-radio>
|
||||
<md-radio v-model="playground.theme" id="theme3" name="theme" md-value="cyan">Cyan</md-radio>
|
||||
<md-radio v-model="playground.theme" id="theme4" name="theme" md-value="brown">Brown</md-radio>
|
||||
|
||||
<md-subheader>Colors</md-subheader>
|
||||
<md-radio v-model="playground.color" id="color1" name="color" md-value="0">Default</md-radio>
|
||||
<md-radio v-model="playground.color" id="color2" name="color" md-value="1">Accent</md-radio>
|
||||
<md-radio v-model="playground.color" id="color3" name="color" md-value="2">Warn</md-radio>
|
||||
<md-radio v-model="playground.color" id="color4" name="color" md-value="3">Transparent</md-radio>
|
||||
|
||||
<md-subheader>Second Tab</md-subheader>
|
||||
<md-checkbox id="disabled" v-model="playground.tabs[1].disabled">Disabled</md-checkbox>
|
||||
<md-checkbox id="active" v-model="playground.tabs[1].active">Active</md-checkbox>
|
||||
</div>
|
||||
|
||||
<md-tabs
|
||||
:class="{
|
||||
'md-accent': playground.color === '1',
|
||||
'md-warn': playground.color === '2',
|
||||
'md-transparent': playground.color === '3'
|
||||
}"
|
||||
:md-fixed="playground.fixed"
|
||||
:md-centered="playground.centered"
|
||||
:md-elevation="playground.shadow"
|
||||
v-md-theme="playground.theme">
|
||||
<md-tab v-for="(tab, index) in playground.tabs" :md-label="tab.label" :md-icon="tab.icon" :md-disabled="tab.disabled" :md-active="tab.active">
|
||||
<md-input-container>
|
||||
<label :for="'label' + index">Label</label>
|
||||
<md-input type="text" :id="'label' + index" v-model="tab.label"></md-input>
|
||||
</md-input-container>
|
||||
|
||||
<md-input-container>
|
||||
<label :for="'icon' + index">Icon</label>
|
||||
<md-input type="text" :id="'icon' + index" v-model="tab.icon"></md-input>
|
||||
</md-input-container>
|
||||
</md-tab>
|
||||
</md-tabs>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt debitis magni dolorem praesentium labore velit repudiandae nostrum culpa quod assumenda. Dolores ipsum, explicabo quasi eius architecto esse ratione natus iure.</p>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
<p>
|
||||
To use Tabs you must wrap all <code><md-tab></code> in a <code><md-tabs></code> as a direct parent.
|
||||
The <code><md-tabs></code> can accept some parameters to modify his styles, like <code>md-fixed</code> and <code>md-centered</code> for example.
|
||||
Each single tab accept a <code>md-label</code> and/or <code>md-icon</code>. You can set the active tab by setting a parameter <code>md-active</code>.
|
||||
</p>
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.playground {
|
||||
padding: 0 16px 16px;
|
||||
|
||||
.md-subheader {
|
||||
padding: 16px 0 0;
|
||||
}
|
||||
}
|
||||
|
||||
div.examples .demo-example .demo-example-body {
|
||||
padding: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
playground: {
|
||||
color: '3',
|
||||
fixed: true,
|
||||
centered: false,
|
||||
shadow: 0,
|
||||
theme: 'default',
|
||||
tabs: [
|
||||
{
|
||||
label: 'Phone',
|
||||
icon: 'phone',
|
||||
active: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
label: 'Favorites',
|
||||
icon: 'favorite',
|
||||
active: false,
|
||||
disabled: false
|
||||
},
|
||||
{
|
||||
label: 'Near me',
|
||||
icon: 'near_me',
|
||||
active: true,
|
||||
disabled: false
|
||||
}
|
||||
]
|
||||
},
|
||||
firstTabName: 'Movies'
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,225 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Toolbar">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<md-toolbar>
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Dense">
|
||||
<md-toolbar class="md-dense">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Medium">
|
||||
<md-toolbar class="md-medium">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1;">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Large">
|
||||
<md-toolbar class="md-large">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1;"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">Vue Material</h2>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Accent, Warn and Transparent Colors">
|
||||
<md-toolbar class="md-accent">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar class="md-warn">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button>Add</md-button>
|
||||
<md-button>Remove</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar class="md-transparent">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-raised">Add</md-button>
|
||||
<md-button class="md-raised md-warn">Remove</md-button>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Themed">
|
||||
<md-toolbar v-md-theme="'green'">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>favorite</md-icon>
|
||||
</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar class="md-large" v-md-theme="'brown'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1;"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">Vue Material</h2>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar v-md-theme="'orange'">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button>Add</md-button>
|
||||
<md-button>Remove</md-button>
|
||||
</md-toolbar>
|
||||
|
||||
<md-toolbar v-md-theme="'blue'">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<h2 class="md-title" style="flex: 1">Vue Material</h2>
|
||||
|
||||
<md-button class="md-raised">Add</md-button>
|
||||
<md-button class="md-raised md-warn">Remove</md-button>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Complete Example" class="example">
|
||||
<md-toolbar class="md-large" v-md-theme="'green'">
|
||||
<div class="md-toolbar-container">
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>menu</md-icon>
|
||||
</md-button>
|
||||
|
||||
<span style="flex: 1;"></span>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>search</md-icon>
|
||||
</md-button>
|
||||
|
||||
<md-button class="md-icon-button">
|
||||
<md-icon>filter_list</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
|
||||
<div class="md-toolbar-container">
|
||||
<h2 class="md-title">Vue Material</h2>
|
||||
|
||||
<md-button class="md-fab md-fab-bottom-right">
|
||||
<md-icon>add</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</md-toolbar>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-toolbar + .md-toolbar {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
.md-button.md-fab {
|
||||
margin: 0;
|
||||
right: 56px;
|
||||
bottom: -26px;
|
||||
}
|
||||
|
||||
.example {
|
||||
.md-toolbar {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,72 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Tooltip">
|
||||
<div slot="examples">
|
||||
<demo-example label="Default">
|
||||
<div>
|
||||
<md-button class="md-icon-button md-raised md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
<md-tooltip md-direction="top">My tooltip</md-tooltip>
|
||||
</md-button>
|
||||
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
<md-tooltip md-direction="bottom">My tooltip</md-tooltip>
|
||||
</md-avatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-button class="md-icon-button md-raised md-warn">
|
||||
<md-icon>home</md-icon>
|
||||
<md-tooltip md-direction="left">My tooltip</md-tooltip>
|
||||
</md-button>
|
||||
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>person</md-icon>
|
||||
<md-tooltip md-direction="right">My tooltip</md-tooltip>
|
||||
</md-avatar>
|
||||
</div>
|
||||
</demo-example>
|
||||
|
||||
<demo-example label="Delay - 400ms">
|
||||
<div>
|
||||
<md-button class="md-icon-button md-raised md-primary">
|
||||
<md-icon>folder</md-icon>
|
||||
<md-tooltip md-delay="400" md-direction="top">My tooltip</md-tooltip>
|
||||
</md-button>
|
||||
|
||||
<md-avatar>
|
||||
<img src="https://placeimg.com/40/40/people/1" alt="People">
|
||||
<md-tooltip md-delay="400" md-direction="bottom">My tooltip</md-tooltip>
|
||||
</md-avatar>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<md-button class="md-icon-button md-raised md-warn">
|
||||
<md-icon>home</md-icon>
|
||||
<md-tooltip md-delay="400" md-direction="left">My tooltip</md-tooltip>
|
||||
</md-button>
|
||||
|
||||
<md-avatar class="md-avatar-icon">
|
||||
<md-icon>person</md-icon>
|
||||
<md-tooltip md-delay="400" md-direction="right">My tooltip</md-tooltip>
|
||||
</md-avatar>
|
||||
</div>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.md-button,
|
||||
.md-avatar {
|
||||
margin: 24px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,55 +0,0 @@
|
|||
<template>
|
||||
<demo-page label="Components - Whiteframe">
|
||||
<div slot="examples" class="whiteframe-list">
|
||||
<demo-example label="Default">
|
||||
<md-whiteframe md-elevation="1">1dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="2">2dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="3">3dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="4">4dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="5">5dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="6">6dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="7">7dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="8">8dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="9">9dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="10">10dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="11">11dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="12">12dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="13">13dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="14">14dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="15">15dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="16">16dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="17">17dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="18">18dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="19">19dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="20">20dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="21">21dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="22">22dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="23">23dp</md-whiteframe>
|
||||
<md-whiteframe md-elevation="24">24dp</md-whiteframe>
|
||||
</demo-example>
|
||||
</div>
|
||||
|
||||
<div slot="code">
|
||||
<h2>Code</h2>
|
||||
</div>
|
||||
|
||||
<div slot="api">
|
||||
|
||||
</div>
|
||||
</demo-page>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
.whiteframe-list .demo-example .demo-example-body {
|
||||
padding-bottom: 48px;
|
||||
|
||||
.md-whiteframe {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
margin: 24px 12px 12px 24px;
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Themes - Configuration">
|
||||
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="Themes - Dynamic Themes">
|
||||
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="UI Elements - Grid System">
|
||||
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<single-page class="single-page-home" label="UI Elements - Typography">
|
||||
|
||||
</single-page>
|
||||
</template>
|
||||
|
|
@ -1,201 +0,0 @@
|
|||
/* main */
|
||||
import Introduction from './pages/Introduction';
|
||||
import GettingStarted from './pages/GettingStarted';
|
||||
import About from './pages/About';
|
||||
import Changelog from './pages/Changelog';
|
||||
import Error404 from './pages/Error';
|
||||
|
||||
/* Components */
|
||||
import Avatar from './pages/components/Avatar';
|
||||
import BottomBar from './pages/components/BottomBar';
|
||||
import Buttons from './pages/components/Buttons';
|
||||
import ButtonToggle from './pages/components/ButtonToggle';
|
||||
import Checkbox from './pages/components/Checkbox';
|
||||
import Icon from './pages/components/Icon';
|
||||
import Input from './pages/components/Input';
|
||||
import List from './pages/components/List';
|
||||
import Radio from './pages/components/Radio';
|
||||
import Ripple from './pages/components/Ripple';
|
||||
import Select from './pages/components/Select';
|
||||
import Sidenav from './pages/components/Sidenav';
|
||||
import Subheader from './pages/components/Subheader';
|
||||
import Switch from './pages/components/Switch';
|
||||
import Tabs from './pages/components/Tabs';
|
||||
import Toolbar from './pages/components/Toolbar';
|
||||
import Tooltip from './pages/components/Tooltip';
|
||||
import Whiteframe from './pages/components/Whiteframe';
|
||||
|
||||
/* UI Elements */
|
||||
import Typography from './pages/ui-elements/Typography';
|
||||
import GridSystem from './pages/ui-elements/GridSystem';
|
||||
|
||||
/* Themes */
|
||||
import Configuration from './pages/themes/Configuration';
|
||||
import DynamicThemes from './pages/themes/DynamicThemes';
|
||||
|
||||
const main = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'introduction',
|
||||
component: Introduction
|
||||
},
|
||||
{
|
||||
path: '/getting-started',
|
||||
name: 'getting-started',
|
||||
component: GettingStarted
|
||||
},
|
||||
{
|
||||
path: '/about',
|
||||
name: 'about',
|
||||
component: About
|
||||
},
|
||||
{
|
||||
path: '/changelog',
|
||||
name: 'changelog',
|
||||
component: Changelog
|
||||
}
|
||||
];
|
||||
|
||||
const components = [
|
||||
{
|
||||
path: '/components',
|
||||
name: 'components',
|
||||
redirect: '/components/avatar'
|
||||
},
|
||||
{
|
||||
path: '/components/avatar',
|
||||
name: 'components:avatar',
|
||||
component: Avatar
|
||||
},
|
||||
{
|
||||
path: '/components/bottom-bar',
|
||||
name: 'components:bottom-bar',
|
||||
component: BottomBar
|
||||
},
|
||||
{
|
||||
path: '/components/button',
|
||||
name: 'components:button',
|
||||
component: Buttons
|
||||
},
|
||||
{
|
||||
path: '/components/button-toggle',
|
||||
name: 'components:button-toggle',
|
||||
component: ButtonToggle
|
||||
},
|
||||
{
|
||||
path: '/components/checkbox',
|
||||
name: 'components:checkbox',
|
||||
component: Checkbox
|
||||
},
|
||||
{
|
||||
path: '/components/icon',
|
||||
name: 'components:icon',
|
||||
component: Icon
|
||||
},
|
||||
{
|
||||
path: '/components/input',
|
||||
name: 'components:input',
|
||||
component: Input
|
||||
},
|
||||
{
|
||||
path: '/components/list',
|
||||
name: 'components:list',
|
||||
component: List
|
||||
},
|
||||
{
|
||||
path: '/components/radio',
|
||||
name: 'components:radio',
|
||||
component: Radio
|
||||
},
|
||||
{
|
||||
path: '/components/ripple',
|
||||
name: 'components:ripple',
|
||||
component: Ripple
|
||||
},
|
||||
{
|
||||
path: '/components/select',
|
||||
name: 'components:select',
|
||||
component: Select
|
||||
},
|
||||
{
|
||||
path: '/components/sidenav',
|
||||
name: 'components:sidenav',
|
||||
component: Sidenav
|
||||
},
|
||||
{
|
||||
path: '/components/switch',
|
||||
name: 'components:switch',
|
||||
component: Switch
|
||||
},
|
||||
{
|
||||
path: '/components/subheader',
|
||||
name: 'components:subheader',
|
||||
component: Subheader
|
||||
},
|
||||
{
|
||||
path: '/components/tabs',
|
||||
name: 'components:tabs',
|
||||
component: Tabs
|
||||
},
|
||||
{
|
||||
path: '/components/toolbar',
|
||||
name: 'components:toolbar',
|
||||
component: Toolbar
|
||||
},
|
||||
{
|
||||
path: '/components/tooltip',
|
||||
name: 'components:tooltip',
|
||||
component: Tooltip
|
||||
},
|
||||
{
|
||||
path: '/components/whiteframe',
|
||||
name: 'components:whiteframe',
|
||||
component: Whiteframe
|
||||
}
|
||||
];
|
||||
|
||||
const theme = [
|
||||
{
|
||||
path: '/themes',
|
||||
name: 'themes',
|
||||
redirect: '/themes/configuration'
|
||||
},
|
||||
{
|
||||
path: '/themes/configuration',
|
||||
name: 'themes:configuration',
|
||||
component: Configuration
|
||||
},
|
||||
{
|
||||
path: '/themes/dynamic-themes',
|
||||
name: 'themes:dynamic-themes',
|
||||
component: DynamicThemes
|
||||
}
|
||||
];
|
||||
|
||||
const uiElements = [
|
||||
{
|
||||
path: '/ui-elements',
|
||||
name: 'ui-elements',
|
||||
redirect: '/ui-elements/typography'
|
||||
},
|
||||
{
|
||||
path: '/ui-elements/typography',
|
||||
name: 'ui-elements:typography',
|
||||
component: Typography
|
||||
},
|
||||
{
|
||||
path: '/ui-elements/grid-system',
|
||||
name: 'ui-elements:grid-system',
|
||||
component: GridSystem
|
||||
}
|
||||
];
|
||||
|
||||
const error = [
|
||||
{
|
||||
path: '*',
|
||||
name: 'error',
|
||||
component: Error404
|
||||
}
|
||||
];
|
||||
|
||||
export default [].concat(main, components, theme, uiElements, error);
|
||||
1
index.html
Normal file
1
index.html
Normal file
|
|
@ -0,0 +1 @@
|
|||
<!DOCTYPE html><html lang=en-us><meta charset=utf-8><meta name=viewport content="width=device-width,initial-scale=1,minimal-ui"><meta name=mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-capable content=yes><meta name=apple-mobile-web-app-status-bar-style content=black><meta name=apple-mobile-web-app-title content="Vue.js Material"><meta name=application-name content="Vue.js Material"><meta http-equiv=cleartype content=on><meta name=description content="Material Design for Vue"><title>Vue.js Material</title><link rel=stylesheet href="//fonts.googleapis.com/css?family=Roboto:300,400,500,700,400italic"><link rel=stylesheet href="//fonts.googleapis.com/icon?family=Material+Icons"><link href=docs.5e0a49df.css rel=stylesheet><div id=app v-cloak><docs></docs></div><script src=manifest.1f93864b.js></script><script src=vendor.7566f251.js></script><script src=docs.911c935d.js></script>
|
||||
1
manifest.1f93864b.js
Normal file
1
manifest.1f93864b.js
Normal file
|
|
@ -0,0 +1 @@
|
|||
!function(e){function t(n){if(r[n])return r[n].exports;var a=r[n]={exports:{},id:n,loaded:!1};return e[n].call(a.exports,a,a.exports,t),a.loaded=!0,a.exports}var n=window.webpackJsonp;window.webpackJsonp=function(o,p){for(var c,l,s=0,i=[];s<o.length;s++)l=o[s],a[l]&&i.push.apply(i,a[l]),a[l]=0;for(c in p)e[c]=p[c];for(n&&n(o,p);i.length;)i.shift().call(null,t);if(p[0])return r[0]=0,t(0)};var r={},a={0:0};t.e=function(e,n){if(0===a[e])return n.call(null,t);if(void 0!==a[e])a[e].push(n);else{a[e]=[n];var r=document.getElementsByTagName("head")[0],o=document.createElement("script");o.type="text/javascript",o.charset="utf-8",o.async=!0,o.src=t.p+""+e+"."+{1:"911c935d",2:"7566f251"}[e]+".js",r.appendChild(o)}},t.m=e,t.c=r,t.p=""}([]);
|
||||
80
package.json
80
package.json
|
|
@ -1,80 +0,0 @@
|
|||
{
|
||||
"name": "vue-material",
|
||||
"description": "Material Design for Vue.js",
|
||||
"version": "0.1.0",
|
||||
"author": "Marcos Moura <marcosvmmoura@gmail.com>",
|
||||
"license": "MIT",
|
||||
"keywords": [
|
||||
"vue",
|
||||
"vue 2",
|
||||
"vuejs",
|
||||
"material design",
|
||||
"material",
|
||||
"angular-material",
|
||||
"components"
|
||||
],
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/marcosmoura/vue-material.git"
|
||||
},
|
||||
"main": "dist/vue-material.js",
|
||||
"files": [
|
||||
"dist",
|
||||
"src",
|
||||
"CHANGELOG.md",
|
||||
"LICENSE",
|
||||
"README.md"
|
||||
],
|
||||
"scripts": {
|
||||
"dev": "babel-node build/server/index.js --presets es2015,stage-0",
|
||||
"build:docs": "babel-node build/server/build-docs.js --presets es2015,stage-0",
|
||||
"build:lib": "babel-node build/server/build-lib.js --presets es2015,stage-0",
|
||||
"build": "rm -rf dist && npm run build:docs && npm run build:lib",
|
||||
"lint": "eslint --ext .js,.vue --fix src",
|
||||
"deploy-docs": "npm run build && git subtree push --prefix dist/docs origin gh-pages",
|
||||
"publish": "npm run deploy-docs && npm publish"
|
||||
},
|
||||
"dependencies": {
|
||||
"autosize": "^3.0.17",
|
||||
"element.scrollintoviewifneeded-polyfill": "^1.0.1",
|
||||
"scopedQuerySelectorShim": "github:lazd/scopedQuerySelectorShim",
|
||||
"vue": "^2.0.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"autoprefixer": "^6.5.0",
|
||||
"babel-core": "^6.17.0",
|
||||
"babel-eslint": "^7.0.0",
|
||||
"babel-loader": "^6.2.5",
|
||||
"babel-plugin-transform-runtime": "^6.15.0",
|
||||
"babel-preset-es2015": "^6.16.0",
|
||||
"babel-preset-stage-0": "^6.16.0",
|
||||
"chalk": "^1.1.3",
|
||||
"connect-history-api-fallback": "^1.3.0",
|
||||
"css-loader": "^0.25.0",
|
||||
"eslint": "^3.7.1",
|
||||
"eslint-friendly-formatter": "^2.0.6",
|
||||
"eslint-loader": "^1.5.0",
|
||||
"eslint-plugin-html": "^1.5.3",
|
||||
"eventsource-polyfill": "^0.9.6",
|
||||
"express": "^4.14.0",
|
||||
"extract-text-webpack-plugin": "^1.0.1",
|
||||
"file-loader": "^0.9.0",
|
||||
"highlight.js": "^9.7.0",
|
||||
"html-webpack-plugin": "^2.22.0",
|
||||
"node-sass": "^3.10.1",
|
||||
"ora": "^0.3.0",
|
||||
"raw-loader": "^0.5.1",
|
||||
"sass-loader": "^4.0.2",
|
||||
"url-loader": "^0.5.7",
|
||||
"vue-hot-reload-api": "^2.0.6",
|
||||
"vue-html-loader": "^1.2.3",
|
||||
"vue-loader": "^9.5.1",
|
||||
"vue-router": "^2.0.1",
|
||||
"vue-style-loader": "^1.0.0",
|
||||
"vue-template-compiler": "^2.0.1",
|
||||
"webpack": "^1.13.2",
|
||||
"webpack-dev-middleware": "^1.8.4",
|
||||
"webpack-hot-middleware": "^2.12.2",
|
||||
"webpack-merge": "^0.14.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import mdAvatar from './mdAvatar.vue';
|
||||
import mdAvatarTheme from './mdAvatar.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-avatar', Vue.extend(mdAvatar));
|
||||
|
||||
Vue.material.styles.push(mdAvatarTheme);
|
||||
}
|
||||
|
|
@ -1,81 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
$avatar-size: 40px;
|
||||
$avatar-large-size: 64px;
|
||||
$avatar-large-icon: 40px;
|
||||
|
||||
.md-avatar {
|
||||
width: $avatar-size;
|
||||
min-width: $avatar-size;
|
||||
height: $avatar-size;
|
||||
min-height: $avatar-size;
|
||||
margin: auto;
|
||||
display: inline-block;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
position: relative;
|
||||
border-radius: $avatar-size;
|
||||
vertical-align: middle;
|
||||
|
||||
&.md-large {
|
||||
width: $avatar-large-size;
|
||||
min-width: $avatar-large-size;
|
||||
height: $avatar-large-size;
|
||||
min-height: $avatar-large-size;
|
||||
border-radius: $avatar-large-size;
|
||||
|
||||
.md-icon {
|
||||
width: $avatar-large-icon;
|
||||
min-width: $avatar-large-icon;
|
||||
height: $avatar-large-icon;
|
||||
min-height: $avatar-large-icon;
|
||||
font-size: $avatar-large-icon;
|
||||
line-height: $avatar-large-icon;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-avatar-icon {
|
||||
background-color: rgba(#000, .38);
|
||||
|
||||
.md-icon {
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
border-radius: 50%;
|
||||
|
||||
.md-ripple.md-active {
|
||||
animation-duration: .9s;
|
||||
}
|
||||
}
|
||||
|
||||
.md-tooltip {
|
||||
&.md-tooltip-top {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
&.md-tooltip-right {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.md-tooltip-bottom {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&.md-tooltip-left {
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,34 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-avatar,
|
||||
&.md-avatar {
|
||||
&.md-primary {
|
||||
&.md-avatar-icon {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
|
||||
.md-icon {
|
||||
color: #{'PRIMARY-CONTRAST-0.99999'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
&.md-avatar-icon {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
|
||||
.md-icon {
|
||||
color: #{'ACCENT-CONTRAST-0.99999'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
&.md-avatar-icon {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
|
||||
.md-icon {
|
||||
color: #{'WARN-CONTRAST-0.99999'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<div class="md-avatar">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdAvatar.scss"></style>
|
||||
|
|
@ -1,10 +0,0 @@
|
|||
import MdBottomBar from './mdBottomBar.vue';
|
||||
import MdBottomBarItem from './mdBottomBarItem.vue';
|
||||
import MdBottomBarTheme from './mdBottomBar.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-bottom-bar', Vue.extend(MdBottomBar));
|
||||
Vue.component('md-bottom-bar-item', Vue.extend(MdBottomBarItem));
|
||||
|
||||
Vue.material.styles.push(MdBottomBarTheme);
|
||||
}
|
||||
|
|
@ -1,99 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
.md-bottom-bar {
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
height: 56px;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
box-shadow: $material-shadow-8dp;
|
||||
transition: $swift-ease-out;
|
||||
|
||||
.md-ripple {
|
||||
animation-duration: $swift-ease-out-duration;
|
||||
}
|
||||
}
|
||||
|
||||
.md-bottom-bar-item {
|
||||
max-width: 168px;
|
||||
min-width: 80px;
|
||||
height: 100%;
|
||||
padding: 8px 12px 10px;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex: 1;
|
||||
position: relative;
|
||||
cursor: pointer;
|
||||
border: none;
|
||||
background: transparent;
|
||||
transform: translate3d(0, 0, 0);
|
||||
color: currentColor;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
line-height: 1em;
|
||||
|
||||
&.md-active {
|
||||
padding-top: 6px;
|
||||
|
||||
.md-text {
|
||||
transform: scale(1) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.md-text,
|
||||
.md-icon {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
.md-bottom-bar.md-shift & {
|
||||
min-width: 56px;
|
||||
max-width: 96px;
|
||||
position: static;
|
||||
flex: 1 1 32px;
|
||||
transition: $swift-ease-out-duration $swift-ease-out-timing-function;
|
||||
transition-property: flex, min-width, max-width;
|
||||
|
||||
.md-icon {
|
||||
transform: translate3d(0, 8px, 0);
|
||||
}
|
||||
|
||||
.md-text {
|
||||
opacity: 0;
|
||||
transform: scale(1) translate3d(0, 6px, 0);
|
||||
}
|
||||
|
||||
&.md-active {
|
||||
min-width: 96px;
|
||||
max-width: 168px;
|
||||
flex: 1 1 72px;
|
||||
|
||||
.md-icon,
|
||||
.md-text {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
transform: scale(1) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
.md-text {
|
||||
transform: scale(1) translate3d(0, 2px, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-text {
|
||||
transform: scale(.8571) translateY(2px);
|
||||
transition: $swift-ease-out,
|
||||
color $swift-linear-duration $swift-linear-timing-function,
|
||||
opacity $swift-linear-duration $swift-linear-timing-function;
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
transition: $swift-ease-out,
|
||||
color $swift-linear-duration $swift-linear-timing-function;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,65 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-bottom-bar,
|
||||
&.md-bottom-bar {
|
||||
&.md-fixed {
|
||||
background-color: #{'BACKGROUND-COLOR'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-shift {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'PRIMARY-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'ACCENT-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'WARN-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-transparent {
|
||||
background-color: transparent;
|
||||
|
||||
.md-bottom-bar-item {
|
||||
color: #{'BACKGROUND-CONTRAST-0.54'};
|
||||
|
||||
&.md-active {
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,20 +0,0 @@
|
|||
<template>
|
||||
<div class="md-bottom-bar" :class="classes">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdBottomBar.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdShift: Boolean
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return this.mdShift ? 'md-shift' : 'md-fixed';
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,57 +0,0 @@
|
|||
<template>
|
||||
<button type="button" class="md-bottom-bar-item" :class="classes" v-md-ink-ripple @click="setActive">
|
||||
<md-icon>{{ mdIcon }}</md-icon>
|
||||
|
||||
<span class="md-text">
|
||||
<slot></slot>
|
||||
</span>
|
||||
</button>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdIcon: String,
|
||||
mdActive: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
active: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
'md-active': this.active
|
||||
};
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
mdActive(active) {
|
||||
this.setActive(active);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
setActive(active) {
|
||||
this.$parent.$children.forEach((item) => {
|
||||
item.active = false;
|
||||
});
|
||||
|
||||
this.active = !!active;
|
||||
|
||||
this.$emit('click');
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$parent.$el.classList.contains('md-bottom-bar')) {
|
||||
this.$destroy();
|
||||
|
||||
throw new Error('You should wrap the md-bottom-bar-item in a md-bottom-bar');
|
||||
}
|
||||
|
||||
if (this.mdActive) {
|
||||
this.active = true;
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import MdButton from './mdButton.vue';
|
||||
import MdButtonTheme from './mdButton.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-button', Vue.extend(MdButton));
|
||||
|
||||
Vue.material.styles.push(MdButtonTheme);
|
||||
}
|
||||
|
|
@ -1,245 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
$button-width: 88px;
|
||||
$button-height: 36px;
|
||||
$button-radius: 2px;
|
||||
|
||||
$button-fab-size: 56px;
|
||||
$button-fab-size-mini: 40px;
|
||||
|
||||
$button-dense-height: 32px;
|
||||
|
||||
$button-icon-size: 40px;
|
||||
|
||||
.md-button {
|
||||
min-width: $button-width;
|
||||
min-height: $button-height;
|
||||
margin: 6px 8px;
|
||||
padding: 0 16px;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
background: none;
|
||||
border: 0;
|
||||
border-radius: $button-radius;
|
||||
transition: $swift-ease-out;
|
||||
color: currentColor;
|
||||
font-family: inherit;
|
||||
font-size: 14px;
|
||||
font-style: inherit;
|
||||
font-variant: inherit;
|
||||
font-weight: 500;
|
||||
line-height: $button-height;
|
||||
text-align: center;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
vertical-align: top;
|
||||
white-space: nowrap;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
&:not([disabled]) {
|
||||
&:not(.md-raised) {
|
||||
background-color: rgba(#999, .2);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
&.md-raised {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:active:not([disabled]) {
|
||||
background-color: rgba(#999, .4);
|
||||
}
|
||||
|
||||
&.md-raised:not([disabled]) {
|
||||
box-shadow: $material-shadow-2dp;
|
||||
}
|
||||
|
||||
&.md-icon-button {
|
||||
min-width: $button-icon-size;
|
||||
height: $button-icon-size;
|
||||
margin: 0 6px;
|
||||
padding: 8px;
|
||||
border-radius: 50%;
|
||||
line-height: 24px;
|
||||
|
||||
&:not([disabled]) {
|
||||
&:hover {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-dense {
|
||||
min-width: $button-dense-height;
|
||||
height: $button-dense-height;
|
||||
min-height: $button-dense-height;
|
||||
padding: 0;
|
||||
line-height: $button-dense-height;
|
||||
}
|
||||
|
||||
.md-tooltip {
|
||||
&.md-tooltip-top {
|
||||
margin-top: -8px;
|
||||
}
|
||||
|
||||
&.md-tooltip-right {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&.md-tooltip-bottom {
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
&.md-tooltip-left {
|
||||
margin-left: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
border-radius: 50%;
|
||||
|
||||
.md-ripple {
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.md-ripple.md-active {
|
||||
animation-duration: .9s;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-dense {
|
||||
min-height: $button-dense-height;
|
||||
line-height: $button-dense-height;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
&.md-fab {
|
||||
width: $button-fab-size;
|
||||
height: $button-fab-size;
|
||||
min-width: 0;
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
box-shadow: $material-shadow-2dp;
|
||||
border-radius: $button-fab-size;
|
||||
line-height: $button-fab-size;
|
||||
vertical-align: middle;
|
||||
background-clip: padding-box;
|
||||
transition: $swift-ease-in;
|
||||
transition-property: background-color,
|
||||
box-shadow,
|
||||
transform;
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
box-shadow: $material-shadow-5dp;
|
||||
}
|
||||
|
||||
&.md-fab-top-right {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
}
|
||||
|
||||
&.md-fab-top-left {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
left: 16px;
|
||||
}
|
||||
|
||||
&.md-fab-bottom-right {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
&.md-fab-bottom-left {
|
||||
position: absolute;
|
||||
left: 16px;
|
||||
bottom: 16px;
|
||||
}
|
||||
|
||||
&.md-mini {
|
||||
width: $button-fab-size-mini;
|
||||
height: $button-fab-size-mini;
|
||||
line-height: $button-fab-size-mini;
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
border-radius: $button-fab-size;
|
||||
}
|
||||
}
|
||||
|
||||
&[disabled] {
|
||||
color: rgba(#000, .26);
|
||||
cursor: default;
|
||||
|
||||
&.md-raised,
|
||||
&.md-fab {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
|
||||
&.md-fab {
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
border-radius: $button-radius;
|
||||
background-clip: padding-box;
|
||||
overflow: hidden;
|
||||
//-webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC');
|
||||
}
|
||||
}
|
||||
|
||||
.md-button-group {
|
||||
width: auto;
|
||||
display: flex;
|
||||
|
||||
> .md-button {
|
||||
margin: 0;
|
||||
overflow: hidden;
|
||||
border-width: 1px 0 1px 1px;
|
||||
border-radius: 0;
|
||||
text-align: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
|
||||
&:first-child {
|
||||
border-radius: 2px 0 0 2px;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-right-width: 1px;
|
||||
border-radius: 0 2px 2px 0;
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
border-radius: $button-radius;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-button.md-icon-button,
|
||||
.md-button.md-fab {
|
||||
md-icon {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,96 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-button:not([disabled]),
|
||||
&.md-button:not([disabled]) {
|
||||
&.md-raised {
|
||||
&:not(.md-icon-button) {
|
||||
color: #{'BACKGROUND-COLOR-900'};
|
||||
background-color: #{'BACKGROUND-COLOR-50'};
|
||||
|
||||
&:hover {
|
||||
background-color: #{'BACKGROUND-COLOR-200'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-icon-button:not(.md-raised) {
|
||||
color: #{'BACKGROUND-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-fab {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
|
||||
&:hover {
|
||||
background-color: #{'ACCENT-COLOR-600'};
|
||||
}
|
||||
|
||||
&.md-clean {
|
||||
color: #{'BACKGROUND-COLOR-900'};
|
||||
background-color: #{'BACKGROUND-COLOR-50'};
|
||||
|
||||
&:hover {
|
||||
background-color: #{'BACKGROUND-COLOR-200'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
&:not(.md-icon-button) {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
||||
&.md-raised,
|
||||
&.md-fab {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
|
||||
&:hover {
|
||||
background-color: #{'PRIMARY-COLOR-600'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-icon-button:not(.md-raised) {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
&:not(.md-icon-button) {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
&.md-raised {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
|
||||
&:hover {
|
||||
background-color: #{'ACCENT-COLOR-600'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-icon-button:not(.md-raised) {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
&:not(.md-icon-button) {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
|
||||
&.md-raised,
|
||||
&.md-fab {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
color: #{'WARN-CONTRAST'};
|
||||
|
||||
&:hover {
|
||||
background-color: #{'WARN-COLOR-600'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-icon-button:not(.md-raised) {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<style lang="scss" src="./mdButton.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
href: String,
|
||||
type: String,
|
||||
disabled: Boolean
|
||||
},
|
||||
render(createElement) {
|
||||
let isDisabled = Boolean(this.disabled);
|
||||
let hasLink = Boolean(this.href);
|
||||
let tag = 'button';
|
||||
let options = {
|
||||
staticClass: 'md-button',
|
||||
attrs: {
|
||||
type: hasLink || 'button',
|
||||
disabled: isDisabled
|
||||
},
|
||||
directives: [{
|
||||
name: 'md-ink-ripple',
|
||||
value: isDisabled,
|
||||
expression: 'disabled'
|
||||
}],
|
||||
on: {
|
||||
click: () => {
|
||||
this.$emit('click');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
if (hasLink) {
|
||||
tag = 'a';
|
||||
options.attrs.href = this.href;
|
||||
delete options.attrs.type;
|
||||
}
|
||||
|
||||
return createElement(tag, options, this.$slots.default);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import mdButtonToggle from './mdButtonToggle.vue';
|
||||
import mdButtonToggleTheme from './mdButtonToggle.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-button-toggle', Vue.extend(mdButtonToggle));
|
||||
|
||||
Vue.material.styles.push(mdButtonToggleTheme);
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
.md-button-toggle {
|
||||
.md-button {
|
||||
&:not([disabled]) {
|
||||
color: rgba(#000, .54);
|
||||
|
||||
&:hover:not(.md-toggle) {
|
||||
&:not(.md-raised) {
|
||||
background-color: rgba(#999, .2);
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-button-toggle,
|
||||
&.md-button-toggle {
|
||||
.md-button {
|
||||
&:after {
|
||||
width: 1px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
content: " ";
|
||||
}
|
||||
}
|
||||
|
||||
.md-toggle {
|
||||
color: #{'BACKGROUND-CONTRAST-600'};
|
||||
background-color: #{'BACKGROUND-COLOR-500'};
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: #{'BACKGROUND-COLOR-600'};
|
||||
}
|
||||
|
||||
+ .md-toggle:after {
|
||||
background-color: #{'BACKGROUND-COLOR-600'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary .md-toggle {
|
||||
color: #{'PRIMARY-CONTRAST'};
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: #{'PRIMARY-COLOR-600'};
|
||||
}
|
||||
|
||||
+ .md-toggle:after {
|
||||
background-color: #{'PRIMARY-COLOR-700'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent .md-toggle {
|
||||
color: #{'ACCENT-CONTRAST'};
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: #{'ACCENT-COLOR-600'};
|
||||
}
|
||||
|
||||
+ .md-toggle:after {
|
||||
background-color: #{'ACCENT-COLOR-700'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn .md-toggle {
|
||||
color: #{'WARN-CONTRAST'};
|
||||
background-color: #{'WARN-COLOR'};
|
||||
|
||||
&:hover:not([disabled]) {
|
||||
background-color: #{'WARN-COLOR-600'};
|
||||
}
|
||||
|
||||
+ .md-toggle:after {
|
||||
background-color: #{'WARN-COLOR-700'};
|
||||
}
|
||||
}
|
||||
|
||||
[disabled] {
|
||||
color: rgba(#000, .26);
|
||||
|
||||
&.md-toggle {
|
||||
color: #{'BACKGROUND-CONTRAST-0.2'};
|
||||
background-color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
<template>
|
||||
<div class="md-button-group md-button-toggle">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdButtonToggle.scss"></style>
|
||||
|
||||
<script>
|
||||
let onClickButton;
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String
|
||||
},
|
||||
mounted() {
|
||||
this.$children.forEach((child) => {
|
||||
let element = child.$el;
|
||||
let toggleClass = 'md-toggle';
|
||||
|
||||
onClickButton = () => {
|
||||
if (this.type === 'radio') {
|
||||
this.$children.forEach((child) => {
|
||||
child.$el.classList.remove(toggleClass);
|
||||
});
|
||||
|
||||
element.classList.add(toggleClass);
|
||||
} else {
|
||||
element.classList.toggle(toggleClass);
|
||||
}
|
||||
};
|
||||
|
||||
if (element && element.classList.contains('md-button')) {
|
||||
element.addEventListener('click', onClickButton);
|
||||
}
|
||||
});
|
||||
},
|
||||
beforeDestroy() {
|
||||
this.$children.forEach((child) => {
|
||||
let element = child.$el;
|
||||
|
||||
if (element && element.classList.contains('md-button')) {
|
||||
element.removeEventListener('click', onClickButton);
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import mdCheckbox from './mdCheckbox.vue';
|
||||
import mdCheckboxTheme from './mdCheckbox.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-checkbox', Vue.extend(mdCheckbox));
|
||||
|
||||
Vue.material.styles.push(mdCheckboxTheme);
|
||||
}
|
||||
|
|
@ -1,75 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
$checkbox-size: 20px;
|
||||
$checkbox-ripple-size: 48px;
|
||||
|
||||
.md-checkbox {
|
||||
width: auto;
|
||||
margin: 16px 8px 16px 0;
|
||||
display: inline-flex;
|
||||
position: relative;
|
||||
transform: translate3D(0, 0, 0);
|
||||
|
||||
.md-checkbox-container {
|
||||
width: $checkbox-size;
|
||||
height: $checkbox-size;
|
||||
position: relative;
|
||||
border-radius: 2px;
|
||||
border: 2px solid rgba(#000, .54);
|
||||
transition: $swift-ease-out;
|
||||
|
||||
&:after {
|
||||
width: 6px;
|
||||
height: 13px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 5px;
|
||||
border: 2px solid #fff;
|
||||
border-top: 0;
|
||||
border-left: 0;
|
||||
opacity: 0;
|
||||
transform: rotate(45deg) scale3D(.15, .15, 1);
|
||||
transition: $swift-ease-in;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
input {
|
||||
position: absolute;
|
||||
left: -999em;
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
top: -16px;
|
||||
right: -16px;
|
||||
bottom: -16px;
|
||||
left: -16px;
|
||||
border-radius: 50%;
|
||||
color: rgba(#000, .54);
|
||||
|
||||
.md-ripple {
|
||||
width: $checkbox-ripple-size !important;
|
||||
height: $checkbox-ripple-size !important;
|
||||
top: 0 !important;
|
||||
right: 0 !important;
|
||||
bottom: 0 !important;
|
||||
left: 0 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-checkbox-label {
|
||||
height: $checkbox-size;
|
||||
padding-left: 8px;
|
||||
line-height: $checkbox-size;
|
||||
}
|
||||
}
|
||||
|
||||
.md-checkbox.md-checked {
|
||||
.md-checkbox-container {
|
||||
&:after {
|
||||
opacity: 1;
|
||||
transform: rotate(45deg) scale3D(1, 1, 1);
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,68 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-checkbox,
|
||||
&.md-checkbox {
|
||||
&.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'ACCENT-COLOR'};
|
||||
border-color: #{'ACCENT-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'ACCENT-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
.md-ripple {
|
||||
opacity: .38;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
border-color: #{'PRIMARY-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'PRIMARY-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
border-color: #{'WARN-COLOR'};
|
||||
|
||||
&:after {
|
||||
border-color: #{'WARN-CONTRAST'};
|
||||
}
|
||||
}
|
||||
|
||||
.md-ink-ripple {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-disabled {
|
||||
&.md-checked {
|
||||
.md-checkbox-container {
|
||||
background-color: rgba(#000, .26);
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
&:not(.md-checked) {
|
||||
.md-checkbox-container {
|
||||
border-color: rgba(#000, .26);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,46 +0,0 @@
|
|||
<template>
|
||||
<div class="md-checkbox" :class="classes">
|
||||
<div class="md-checkbox-container" @click="toggleCheck" v-md-ink-ripple="disabled">
|
||||
<input type="checkbox" :name="name" :id="id" :disabled="disabled" :value="value">
|
||||
</div>
|
||||
|
||||
<label :for="id || name" class="md-checkbox-label" v-if="$slots.default">
|
||||
<slot></slot>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdCheckbox.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
name: String,
|
||||
value: [String, Boolean],
|
||||
id: String,
|
||||
disabled: Boolean
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
checked: this.value
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
'md-checked': Boolean(this.value),
|
||||
'md-disabled': this.disabled
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
toggleCheck() {
|
||||
if (!this.disabled) {
|
||||
this.checked = !this.checked;
|
||||
this.$emit('change', this.checked);
|
||||
this.$emit('input', this.checked);
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
import mdDivider from './mdDivider.vue';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-divider', Vue.extend(mdDivider));
|
||||
}
|
||||
|
|
@ -1,14 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
.md-divider {
|
||||
height: 1px;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: block;
|
||||
border: 0;
|
||||
background-color: rgba(#000, .12);
|
||||
|
||||
&.md-inset {
|
||||
margin-left: 72px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<template>
|
||||
<hr class="md-divider">
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdDivider.scss"></style>
|
||||
|
|
@ -1,8 +0,0 @@
|
|||
import mdIcon from './mdIcon.vue';
|
||||
import mdIconTheme from './mdIcon.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-icon', Vue.extend(mdIcon));
|
||||
|
||||
Vue.material.styles.push(mdIconTheme);
|
||||
}
|
||||
|
|
@ -1,15 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
$icon-size: 24px;
|
||||
|
||||
.md-icon {
|
||||
width: $icon-size;
|
||||
min-width: $icon-size;
|
||||
height: $icon-size;
|
||||
min-height: $icon-size;
|
||||
margin: auto;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
fill: currentColor;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
|
@ -1,16 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-icon,
|
||||
&.md-icon {
|
||||
&.md-primary {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<i class="md-icon material-icons">
|
||||
<slot></slot>
|
||||
</i>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdIcon.scss"></style>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import mdInputContainer from './mdInputContainer.vue';
|
||||
import mdInput from './mdInput.vue';
|
||||
import mdTextarea from './mdTextarea.vue';
|
||||
import mdInputContainerTheme from './mdInputContainer.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-input-container', mdInputContainer);
|
||||
Vue.component('md-input', mdInput);
|
||||
Vue.component('md-textarea', mdTextarea);
|
||||
|
||||
Vue.material.styles.push(mdInputContainerTheme);
|
||||
}
|
||||
|
|
@ -1,124 +0,0 @@
|
|||
<template>
|
||||
<input
|
||||
class="md-input"
|
||||
:type="type || 'text'"
|
||||
:value="value"
|
||||
:disabled="disabled"
|
||||
:required="required"
|
||||
:placeholder="placeholder"
|
||||
:maxlength="maxlength"
|
||||
@invalid="onInvalid"
|
||||
@valid="onValid"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"
|
||||
@keydown.up="onInput"
|
||||
@keydown.down="onInput">
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let invalidClass = 'md-input-invalid';
|
||||
let disabledClass = 'md-input-disabled';
|
||||
let requiredClass = 'md-input-required';
|
||||
let placeholderClass = 'md-input-placeholder';
|
||||
let focusedClass = 'md-input-focused';
|
||||
let hasValueClass = 'md-has-value';
|
||||
|
||||
let manageDisabledClass = (state, scope) => {
|
||||
if (state) {
|
||||
scope.add(disabledClass);
|
||||
} else {
|
||||
scope.remove(disabledClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageRequiredClass = (required, scope) => {
|
||||
if (required) {
|
||||
scope.add(requiredClass);
|
||||
} else {
|
||||
scope.remove(requiredClass);
|
||||
}
|
||||
};
|
||||
|
||||
let managePlaceholderClass = (placeholder, scope) => {
|
||||
if (placeholder) {
|
||||
scope.add(placeholderClass);
|
||||
} else {
|
||||
scope.remove(placeholderClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageHasValueClass = function(value, scope) {
|
||||
if (value.length > 0) {
|
||||
scope.add(hasValueClass);
|
||||
} else {
|
||||
scope.remove(hasValueClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageMaxlength = (length, parent) => {
|
||||
parent.enableCounter = +length > 0;
|
||||
parent.counterLength = +length;
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
value: [String, Number],
|
||||
disabled: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: [String, Number],
|
||||
placeholder: [String, Number]
|
||||
},
|
||||
watch: {
|
||||
disabled(disabled) {
|
||||
manageDisabledClass(disabled, this.parentClasses);
|
||||
},
|
||||
required(required) {
|
||||
manageRequiredClass(required, this.parentClasses);
|
||||
},
|
||||
placeholder(placeholder) {
|
||||
managePlaceholderClass(placeholder, this.parentClasses);
|
||||
},
|
||||
maxlength(maxlength) {
|
||||
manageMaxlength(maxlength, this.$parent);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInvalid() {
|
||||
this.parentClasses.add(invalidClass);
|
||||
},
|
||||
onValid() {
|
||||
this.parentClasses.remove(invalidClass);
|
||||
},
|
||||
onFocus() {
|
||||
this.parentClasses.add(focusedClass);
|
||||
},
|
||||
onBlur() {
|
||||
this.parentClasses.remove(focusedClass);
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
},
|
||||
onInput() {
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
this.$parent.inputLength = this.$el.value.length;
|
||||
this.$emit('change', this.$el.value);
|
||||
this.$emit('input', this.$el.value);
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$parent.$el.classList.contains('md-input-container')) {
|
||||
this.$destroy();
|
||||
|
||||
throw new Error('You should wrap the md-input in a md-input-container');
|
||||
}
|
||||
|
||||
this.parentClasses = this.$parent.$el.classList;
|
||||
|
||||
manageDisabledClass(this.disabled, this.parentClasses);
|
||||
manageRequiredClass(this.required, this.parentClasses);
|
||||
managePlaceholderClass(this.placeholder, this.parentClasses);
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
manageMaxlength(this.maxlength, this.$parent);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,200 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
$input-size: 32px;
|
||||
|
||||
.md-input-container {
|
||||
min-height: 48px;
|
||||
margin: 4px 0 24px;
|
||||
padding-top: 16px;
|
||||
position: relative;
|
||||
|
||||
&:after {
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
background-color: rgba(#000, .12);
|
||||
transition: $swift-ease-out;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
label {
|
||||
position: absolute;
|
||||
top: 23px;
|
||||
left: 0;
|
||||
pointer-events: none;
|
||||
transition: $swift-ease-out;
|
||||
transition-duration: .3s;
|
||||
color: rgba(#000, .54);
|
||||
font-size: 16px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
width: 100%;
|
||||
height: $input-size;
|
||||
padding: 0;
|
||||
display: block;
|
||||
border: none;
|
||||
background: none;
|
||||
transition: $swift-ease-out;
|
||||
transition-property: font-size;
|
||||
color: rgba(#000, .54);
|
||||
font-family: inherit;
|
||||
font-size: 1px;
|
||||
line-height: $input-size;
|
||||
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&::-webkit-input-placeholder {
|
||||
color: rgba(#000, .54);
|
||||
font-size: 16px;
|
||||
text-shadow: none;
|
||||
-webkit-text-fill-color: initial;
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
min-height: 32px;
|
||||
max-height: 230px;
|
||||
padding: 5px 0;
|
||||
line-height: 1.3em;
|
||||
resize: none;
|
||||
}
|
||||
|
||||
.md-error {
|
||||
height: 20px;
|
||||
display: block !important;
|
||||
position: absolute;
|
||||
opacity: 0;
|
||||
transform: translate3d(0, -8px, 0);
|
||||
transition: $swift-ease-in;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.md-count {
|
||||
height: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-input-container {
|
||||
&.md-input-placeholder {
|
||||
label {
|
||||
pointer-events: auto;
|
||||
top: 10px;
|
||||
opacity: 0;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-focused,
|
||||
&.md-has-value {
|
||||
label {
|
||||
pointer-events: auto;
|
||||
top: 0;
|
||||
opacity: 1;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-has-value {
|
||||
input,
|
||||
textarea {
|
||||
color: rgba(#000, .87);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-inline {
|
||||
label {
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&.md-input-focused {
|
||||
label {
|
||||
top: 23px;
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-has-value {
|
||||
label {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-disabled {
|
||||
&:after {
|
||||
background: bottom left repeat-x;
|
||||
background-image: linear-gradient(to right, rgba(#000, .38) 0%, rgba(#000, .38) 33%, transparent 0%);
|
||||
background-size: 4px 1px;
|
||||
}
|
||||
|
||||
label,
|
||||
input,
|
||||
textarea {
|
||||
color: rgba(#000, .38);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-has-password {
|
||||
&.md-input-focused .md-toggle-password {
|
||||
color: rgba(#000, .54);
|
||||
}
|
||||
|
||||
.md-toggle-password {
|
||||
margin: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -2px;
|
||||
color: rgba(#000, .38);
|
||||
|
||||
.md-ink-ripple {
|
||||
color: rgba(#000, .87);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-invalid {
|
||||
.md-error {
|
||||
opacity: 1;
|
||||
transform: translate3d(0, 0, 0);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-required {
|
||||
label:after {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
transform: translateX(calc(100% + 2px));
|
||||
content: "*";
|
||||
font-size: 12px;
|
||||
line-height: 1em;
|
||||
vertical-align: top;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-has-select:hover {
|
||||
.md-select:after {
|
||||
color: rgba(#000, .87);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-input-container,
|
||||
&.md-input-container {
|
||||
&.md-input-invalid {
|
||||
&:after {
|
||||
background-color: #{'WARN-COLOR'};
|
||||
}
|
||||
|
||||
label,
|
||||
.md-error,
|
||||
.md-count,
|
||||
input,
|
||||
textarea {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-focused {
|
||||
&.md-input-inline {
|
||||
label {
|
||||
color: rgba(#000, .54);
|
||||
}
|
||||
}
|
||||
|
||||
&.md-input-required {
|
||||
label:after {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&:after {
|
||||
height: 2px;
|
||||
background-color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
|
||||
input,
|
||||
textarea {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
text-shadow: 0 0 0 #{'BACKGROUND-CONTRAST'};
|
||||
-webkit-text-fill-color: transparent;
|
||||
}
|
||||
|
||||
label {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,76 +0,0 @@
|
|||
<template>
|
||||
<div class="md-input-container" :class="classes">
|
||||
<slot></slot>
|
||||
|
||||
<span class="md-count" v-if="enableCounter">{{ inputLength }} / {{ counterLength }}</span>
|
||||
|
||||
<md-button class="md-icon-button md-toggle-password" @click="togglePasswordType" v-if="mdHasPassword">
|
||||
<md-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</md-icon>
|
||||
</md-button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdInputContainer.scss"></style>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
mdInline: Boolean,
|
||||
mdDisabled: Boolean,
|
||||
mdHasPassword: Boolean
|
||||
},
|
||||
computed: {
|
||||
classes() {
|
||||
return {
|
||||
'md-input-inline': this.mdInline,
|
||||
'md-has-password': this.mdHasPassword,
|
||||
'md-has-select': this.mdHasSelect,
|
||||
'md-has-value': Boolean(this.value)
|
||||
};
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
value: null,
|
||||
input: false,
|
||||
inputType: false,
|
||||
showPassword: false,
|
||||
enableCounter: false,
|
||||
mdHasSelect: false,
|
||||
counterLength: 0,
|
||||
inputLength: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
togglePasswordType() {
|
||||
if (this.input.tagName.toLowerCase() === 'input') {
|
||||
let type = this.input.type;
|
||||
|
||||
if (type === 'password') {
|
||||
this.input.type = 'text';
|
||||
this.showPassword = true;
|
||||
} else {
|
||||
this.input.type = 'password';
|
||||
this.showPassword = false;
|
||||
}
|
||||
|
||||
this.input.focus();
|
||||
}
|
||||
},
|
||||
setValue(value) {
|
||||
this.value = value;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.input = this.$el.querySelector('input') || this.$el.querySelector('textarea') || this.$el.querySelector('select');
|
||||
|
||||
if (!this.input) {
|
||||
this.$destroy();
|
||||
|
||||
throw new Error('Missing input/select/textarea inside md-input-container');
|
||||
}
|
||||
|
||||
this.inputType = this.input.type;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,125 +0,0 @@
|
|||
<template>
|
||||
<textarea
|
||||
class="md-input"
|
||||
:disabled="disabled"
|
||||
@invalid="onInvalid"
|
||||
@valid="onValid"
|
||||
@focus="onFocus"
|
||||
@blur="onBlur"
|
||||
@input="onInput"></textarea>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import autosize from 'autosize';
|
||||
|
||||
let invalidClass = 'md-input-invalid';
|
||||
let disabledClass = 'md-input-disabled';
|
||||
let requiredClass = 'md-input-required';
|
||||
let placeholderClass = 'md-input-placeholder';
|
||||
let focusedClass = 'md-input-focused';
|
||||
let hasValueClass = 'md-has-value';
|
||||
|
||||
let manageDisabledClass = (state, scope) => {
|
||||
if (state) {
|
||||
scope.add(disabledClass);
|
||||
} else {
|
||||
scope.remove(disabledClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageRequiredClass = (required, scope) => {
|
||||
if (required) {
|
||||
scope.add(requiredClass);
|
||||
} else {
|
||||
scope.remove(requiredClass);
|
||||
}
|
||||
};
|
||||
|
||||
let managePlaceholderClass = (placeholder, scope) => {
|
||||
if (placeholder) {
|
||||
scope.add(placeholderClass);
|
||||
} else {
|
||||
scope.remove(placeholderClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageHasValueClass = function(value, scope) {
|
||||
if (value.length > 0) {
|
||||
scope.add(hasValueClass);
|
||||
} else {
|
||||
scope.remove(hasValueClass);
|
||||
}
|
||||
};
|
||||
|
||||
let manageMaxlength = (length, parent) => {
|
||||
parent.enableCounter = length > 0;
|
||||
parent.counterLength = length;
|
||||
};
|
||||
|
||||
export default {
|
||||
props: {
|
||||
type: String,
|
||||
disabled: Boolean,
|
||||
required: Boolean,
|
||||
maxlength: String,
|
||||
placeholder: String
|
||||
},
|
||||
watch: {
|
||||
disabled(disabled) {
|
||||
manageDisabledClass(disabled, this.parentClasses);
|
||||
},
|
||||
required(required) {
|
||||
manageRequiredClass(required, this.parentClasses);
|
||||
},
|
||||
placeholder(placeholder) {
|
||||
managePlaceholderClass(placeholder, this.parentClasses);
|
||||
},
|
||||
maxlength(maxlength) {
|
||||
manageMaxlength(maxlength, this.$parent);
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onInvalid() {
|
||||
this.parentClasses.add(invalidClass);
|
||||
},
|
||||
onValid() {
|
||||
this.parentClasses.remove(invalidClass);
|
||||
},
|
||||
onFocus() {
|
||||
this.parentClasses.add(focusedClass);
|
||||
},
|
||||
onBlur() {
|
||||
this.parentClasses.remove(focusedClass);
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
},
|
||||
onInput() {
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
this.$parent.inputLength = this.$el.value.length;
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if (!this.$parent.$el.classList.contains('md-input-container')) {
|
||||
this.$destroy();
|
||||
|
||||
throw new Error('You should wrap the md-textarea in a md-input-container');
|
||||
}
|
||||
|
||||
this.parentClasses = this.$parent.$el.classList;
|
||||
|
||||
manageDisabledClass(this.disabled, this.parentClasses);
|
||||
manageRequiredClass(this.required, this.parentClasses);
|
||||
managePlaceholderClass(this.placeholder, this.parentClasses);
|
||||
manageHasValueClass(this.$el.value, this.parentClasses);
|
||||
manageMaxlength(this.maxlength, this.$parent);
|
||||
|
||||
if (!this.$el.getAttribute('rows')) {
|
||||
this.$el.setAttribute('rows', '1');
|
||||
}
|
||||
|
||||
autosize(this.$el);
|
||||
},
|
||||
beforeDestroy() {
|
||||
autosize.destroy(this.$el);
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,12 +0,0 @@
|
|||
import mdList from './mdList.vue';
|
||||
import mdListItem from './mdListItem.vue';
|
||||
import mdListExpand from './mdListExpand.vue';
|
||||
import mdListTheme from './mdList.theme';
|
||||
|
||||
export default function install(Vue) {
|
||||
Vue.component('md-list', Vue.extend(mdList));
|
||||
Vue.component('md-list-item', Vue.extend(mdListItem));
|
||||
Vue.component('md-list-expand', Vue.extend(mdListExpand));
|
||||
|
||||
Vue.material.styles.push(mdListTheme);
|
||||
}
|
||||
|
|
@ -1,313 +0,0 @@
|
|||
@import '../../core/stylesheets/variables.scss';
|
||||
|
||||
.md-list {
|
||||
margin: 0;
|
||||
padding: 8px 0;
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
position: relative;
|
||||
list-style: none;
|
||||
|
||||
&.md-dense {
|
||||
padding: 4px 0;
|
||||
|
||||
.md-list-item {
|
||||
&.md-inset .md-list-item-container {
|
||||
padding-left: 72px;
|
||||
}
|
||||
|
||||
.md-list-item-container {
|
||||
min-height: 40px;
|
||||
font-size: 13px;
|
||||
|
||||
.md-avatar:first-child {
|
||||
margin-right: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-avatar {
|
||||
width: 32px;
|
||||
min-width: 32px;
|
||||
height: 32px;
|
||||
min-height: 32px;
|
||||
}
|
||||
|
||||
.md-list-item-expand {
|
||||
min-height: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
&.md-double-line {
|
||||
&.md-dense {
|
||||
.md-list-item {
|
||||
.md-list-item-container {
|
||||
min-height: 60px;
|
||||
}
|
||||
|
||||
.md-avatar {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-text-container {
|
||||
> :nth-child(1) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item {
|
||||
.md-list-item-container {
|
||||
min-height: 72px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-triple-line {
|
||||
&.md-dense {
|
||||
.md-list-item {
|
||||
.md-list-item-container {
|
||||
min-height: 76px;
|
||||
}
|
||||
|
||||
.md-avatar {
|
||||
width: 36px;
|
||||
min-width: 36px;
|
||||
height: 36px;
|
||||
min-height: 36px;
|
||||
|
||||
&:first-child {
|
||||
margin-right: 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-text-container {
|
||||
> :nth-child(1) {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
font-size: 13px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item {
|
||||
.md-list-item-container {
|
||||
min-height: 88px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-avatar {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.md-list-item-container {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
.md-subheader {
|
||||
&.md-inset {
|
||||
padding-left: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
> .md-subheader:first-of-type {
|
||||
margin-top: -8px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item {
|
||||
height: auto;
|
||||
position: relative;
|
||||
|
||||
&.md-inset {
|
||||
.md-list-item-container {
|
||||
padding-left: 72px;
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item-container {
|
||||
width: 100%;
|
||||
min-height: 48px;
|
||||
margin: 0;
|
||||
padding: 0 16px;
|
||||
display: flex;
|
||||
flex-flow: row nowrap;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
border-radius: 0;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
text-align: left;
|
||||
text-transform: none;
|
||||
|
||||
> .md-ink-ripple {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
> .md-icon:first-child {
|
||||
margin-right: 32px;
|
||||
}
|
||||
|
||||
.md-avatar:first-child {
|
||||
margin-right: 16px;
|
||||
}
|
||||
|
||||
.md-list-action {
|
||||
margin: 0 -2px 0 0;
|
||||
|
||||
&:nth-child(3) {
|
||||
margin: 0 -2px 0 16px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-divider {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.md-icon,
|
||||
.md-avatar {
|
||||
margin: 0;
|
||||
|
||||
&:first-of-type + * {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
|
||||
.md-avatar {
|
||||
margin-top: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.md-icon {
|
||||
color: rgba(#000, .54);
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item-expand {
|
||||
min-height: 48px;
|
||||
flex-flow: column wrap;
|
||||
overflow: hidden;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
height: 1px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
left: 0;
|
||||
z-index: 3;
|
||||
transition: $swift-ease-out;
|
||||
content: " ";
|
||||
}
|
||||
|
||||
&:before {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
&:after {
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
&.md-active {
|
||||
position: relative;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
background-color: rgba(#000, .12);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
&:before {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
&:after {
|
||||
background: none;
|
||||
}
|
||||
}
|
||||
|
||||
> .md-list-item-container .md-list-expand-indicator {
|
||||
transform: rotateZ(180deg) translate3D(0, 0, 0);
|
||||
}
|
||||
|
||||
> .md-list-expand {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
> .md-list-item-container {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
> span {
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.md-expansion-indicator,
|
||||
.md-list-item-container,
|
||||
.md-icon {
|
||||
transition: $swift-ease-out;
|
||||
}
|
||||
|
||||
.md-list-expand {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transform: translate3D(0, 0, 0);
|
||||
transition: $swift-ease-in-out;
|
||||
|
||||
&.md-transition-off {
|
||||
transition: none;
|
||||
}
|
||||
|
||||
.md-list {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-text-container {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
flex: 1;
|
||||
overflow: hidden;
|
||||
line-height: 1.25em;
|
||||
text-overflow: ellipsis;
|
||||
white-space: normal;
|
||||
|
||||
> :nth-child(1) {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
> :nth-child(2),
|
||||
> :nth-child(3) {
|
||||
margin: 0;
|
||||
color: rgba(#000, .54);
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
> :nth-child(2):not(:last-child) {
|
||||
color: rgba(#000, .87);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,63 +0,0 @@
|
|||
.THEME_NAME {
|
||||
.md-list,
|
||||
&.md-list {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
color: #{'BACKGROUND-CONTRAST'};
|
||||
|
||||
&.md-transparent {
|
||||
background-color: transparent;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
.md-list-item {
|
||||
.router-link-active.md-list-item-container {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
|
||||
> .md-icon {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
|
||||
&.md-primary {
|
||||
.md-list-item-container {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
|
||||
> .md-icon {
|
||||
color: #{'PRIMARY-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-accent {
|
||||
.md-list-item-container {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
|
||||
> .md-icon {
|
||||
color: #{'ACCENT-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&.md-warn {
|
||||
.md-list-item-container {
|
||||
color: #{'WARN-COLOR'};
|
||||
|
||||
> .md-icon {
|
||||
color: #{'WARN-COLOR'};
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.md-list-item-expand {
|
||||
.md-list-item-container {
|
||||
background-color: #{'BACKGROUND-COLOR-A100'};
|
||||
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: rgba(#999, .2);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +0,0 @@
|
|||
<template>
|
||||
<ul class="md-list">
|
||||
<slot></slot>
|
||||
</ul>
|
||||
</template>
|
||||
|
||||
<style lang="scss" src="./mdList.scss"></style>
|
||||
|
|
@ -1,23 +0,0 @@
|
|||
<template>
|
||||
<div class="md-list-expand" :style="{ 'margin-bottom': height }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
height: 0
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
calculatePadding() {
|
||||
this.height = -this.$el.offsetHeight + 'px';
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.calculatePadding();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
Some files were not shown because too many files have changed in this diff Show more
Loading…
Reference in a new issue