Skip to content

Instantly share code, notes, and snippets.

@bnnk

bnnk/button-square-buttons-quasar-v2-12-7.markdown

Created September 24, 2023 04:53
Show Gist options
  • Save bnnk/33e9b2d88a9289bbaed5549402252494 to your computer and use it in GitHub Desktop.
Save bnnk/33e9b2d88a9289bbaed5549402252494 to your computer and use it in GitHub Desktop.
Download ZIP
Button: Square buttons - Quasar v2.12.7
Raw
button-square-buttons-quasar-v2-12-7.markdown
Raw
index.html
<!--
Forked from:
https://quasar.dev/vue-components/button#example--square-buttons
-->
<div id="q-app" style="min-height: 100vh;">
<div class="q-pa-md q-gutter-sm">
<q-btn square color="primary" icon="shopping_cart"></q-btn>
<q-btn square color="secondary" icon="navigation"></q-btn>
<q-btn square color="amber" glossy text-color="black" icon="layers_clear"></q-btn>
<q-btn square color="brown-5" icon="directions"></q-btn>
<q-btn square color="deep-orange" icon="edit_location"></q-btn>
<q-btn square color="purple" glossy icon="local_grocery_store"></q-btn>
<q-btn square color="black" icon="my_location"></q-btn>
</div>
</div>
Raw
script.babel
const app = Vue.createApp({})
app.use(Quasar, { config: {} })
app.mount('#q-app')
Raw
scripts
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.umd.prod.js"></script>
Raw
styles
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/quasar.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment