<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="//unpkg.com/quasar-extras@1.0.2/material-icons/material-icons.css">
<link rel="stylesheet" href="//unpkg.com/quasar-framework@latest/dist/umd/quasar.mat.min.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/quasar-framework@latest/dist/umd/quasar.mat.umd.min.js"></script>
<!--
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/quasar/dist/quasar.min.css">
<script src="//cdn.jsdelivr.net/npm/vue"></script>
<script src="//cdn.jsdelivr.net/npm/quasar/dist/quasar.umd.min.js"></script>
-->
</head>
<body>
<h1>Hello Plunker!</h1>
<div id="q-app">
<q-layout view="hHr LpR lFf">
<q-layout-header>
<q-toolbar color="primary">
<q-btn flat round dense @click="showLeft = !showLeft" icon="menu"></q-btn>
<q-toolbar-title>
Layout Header
<span slot="subtitle">
<p class="text-white">Optional subtitle</p>
</span>
</q-toolbar-title>
<q-btn flat round dense @click="showRight = !showRight" icon="menu"></q-btn>
</q-toolbar>
<q-tabs>
<q-route-tab slot="title" icon="view_quilt" to="/test-layout/about" replace hide="icon" label="About"></q-route-tab>
<q-route-tab slot="title" icon="view_day" to="/test-layout/toolbar" replace hide="icon" label="Toolbar"></q-route-tab>
<q-route-tab slot="title" icon="view_day" to="/test-layout/tabs" replace label="Tabs"></q-route-tab>
<q-route-tab slot="title" icon="input" to="/test-layout/drawer" replace label="Drawer"></q-route-tab>
</q-tabs>
</q-layout-header>
<q-layout-drawer side="left" v-model="showLeft">
<q-scroll-area class="fit">
<q-item to="/test-layout/toolbar">Toolbar</q-item>
<q-item to="/test-layout/tabs">Tabs</q-item>
<q-item to="/test-layout/drawer">Drawer</q-item>
</q-scroll-area>
</q-layout-drawer>
<q-layout-drawer side="left">
<q-list no-border link inset-separator>
<q-list-header>Essential Links</q-list-header>
<q-item to="/docs">
<q-item-side icon="school" />
<q-item-main label="Docs" sublabel="quasar-framework.org" />
</q-item>
<q-item to="/forum">
<q-item-side icon="record_voice_over" />
<q-item-main label="Forum" sublabel="forum.quasar-framework.org" />
</q-item>
<q-item to="/chat">
<q-item-side icon="chat" />
<q-item-main label="Discord Chat Channel" sublabel="https://discord.gg/5TDhbDg" />
</q-item>
<q-item to="/twitter">
<q-item-side icon="rss feed" />
<q-item-main label="Twitter" sublabel="@quasarframework" />
</q-item>
</q-list>
</q-layout-drawer>
<q-layout-drawer side="right" v-model="showRight">
Right Side of Layout
</q-layout-drawer>
<q-page-container>
<router-view>
<div class="q-ma-md">
<p class="text-primary">
Fork and make your own! Do NOT use self-closing tags here on jsFiddle.
</p>
</div>
<q-btn label="My Button" color="primary" class="q-ma-md" @click="notify"></q-btn>
<q-btn color="primary" icon="warning" label="Notify" @click="notify" class="q-ma-md"></q-btn>
<div class="q-ma-md">
Running Quasar v{{ version }}
</div>
</router-view>
</q-page-container>
</q-layout>
</div>
<script src="script.js"></script>
</body>
</html>
Quasar.icons.set(Quasar.icons.fontawesome);
new Vue({
el: '#q-app',
data: function() {
return {
version: Quasar.version,
showLeft: false,
showRight: false,
}
},
methods: {
notify: function() {
this.$q.notify('Running on Quasar v' + this.$q.version)
}
}
})
/* Styles go here */