mirror of
https://github.com/Hopiu/vue-material.git
synced 2026-05-16 03:03:11 +00:00
71 lines
2.9 KiB
HTML
71 lines
2.9 KiB
HTML
<!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">
|
|
<link href="stylesheets/core.css" rel="stylesheet">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container" id="app" v-cloak>
|
|
<md-button class="md-primary" @click="clickAction">Button</md-button>
|
|
<md-link-button class="md-primary" :disabled="disabled">Primary</md-link-button>
|
|
<md-link-button class="md-raised">Raised</md-link-button>
|
|
<md-link-button class="md-raised" :disabled="!disabled">Disabled</md-link-button>
|
|
<md-link-button class="md-raised md-dense">Dense</md-link-button>
|
|
<md-link-button class="md-icon-button">
|
|
<md-icon>menu</md-icon>
|
|
</md-link-button>
|
|
|
|
<div class="md-button-group">
|
|
<md-link-button class="md-icon-button">
|
|
<md-icon>format_align_left</md-icon>
|
|
</md-link-button>
|
|
|
|
<md-link-button class="md-icon-button">
|
|
<md-icon>format_align_center</md-icon>
|
|
</md-link-button>
|
|
|
|
<md-link-button class="md-icon-button">
|
|
<md-icon>format_align_right</md-icon>
|
|
</md-link-button>
|
|
|
|
<md-link-button class="md-icon-button">
|
|
<md-icon>format_align_justify</md-icon>
|
|
</md-link-button>
|
|
</div>
|
|
|
|
<div style="padding: 16px; position: relative" v-md-ink-ripple>
|
|
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
|
|
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
|
|
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
|
|
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
|
|
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
|
|
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
|
|
</div>
|
|
|
|
<div style="width: 320px; height: 480px;">
|
|
<md-bottom-bar>
|
|
<md-bottom-bar-item md-icon="restore">Recents</md-bottom-bar-item>
|
|
<md-bottom-bar-item md-icon="favorite">Favorites</md-bottom-bar-item>
|
|
<md-bottom-bar-item md-icon="near_me">Nearby</md-bottom-bar-item>
|
|
</md-bottom-bar>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="components/main.js"></script>
|
|
</body>
|
|
</html>
|