Quasar Framework Integration
Project description
Zemfrog Quasar
Quasar Framework Integration
Features
- Support vue v2
- Added Vuex & Vue-Router
- Integrated with Quasar
Usage
Install this
pip install zemfrog-quasar
Add this to the ZEMFROG_THEMES
configuration
ZEMFROG_THEMES = ["zemfrog_quasar"]
Quick Tutorial
In this theme, several jinja blocks are available, such as:
meta
- List of meta tags to includelinks
- This is to be included in the head tag as (link
,title
, etc)content
- This is to be included in the main tag (div#q-app
)js
- The js script that will be included, after vue, vuex, vue-router & quasarvuex
- Configuration passed to vuexvue_router
- Configuration passed to vue-routervue
- Configuration passed to vue
Layouts
Examples of using layouts:
{% extends 'quasar/layout.html' %}
Links
An example of using block links, below we add material icons. By default it doesn't come with an icon, so you have to add it yourself.
{% block links %}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900|Material+Icons" rel="stylesheet" type="text/css">
{% endblock %}
Content
An example of using block content:
{% block content %}
<q-toolbar class="text-primary">
<q-btn flat round dense icon="menu" ></q-btn>
<q-toolbar-title>
Toolbar
</q-toolbar-title>
<q-btn flat round dense icon="more_vert" ></q-btn>
</q-toolbar>
{% endblock %}
Vue
Examples of using vue:
{% block content %}
<q-toolbar class="text-primary">
<q-btn flat round dense icon="menu" @click="active = !active"></q-btn>
<q-toolbar-title>
Is this active? <{ active }>
</q-toolbar-title>
<q-btn flat round dense icon="more_vert" ></q-btn>
</q-toolbar>
{% endblock %}
{% block vue %}
data() {
return {
active: false
}
},
{% endblock %}
In the example above, there are several explanations. See below:
- We add
data
to vue via thevue block
- We also change the vue delimiter to
<{
,}>
Quasar
If you use this, you can't use the self-closing tag. See here https://quasar.dev/start/umd#usage
Project details
Release history Release notifications | RSS feed
Download files
Download the file for your platform. If you're not sure which to choose, learn more about installing packages.
Source Distribution
zemfrog-quasar-1.0.2.tar.gz
(3.2 kB
view hashes)
Built Distribution
Close
Hashes for zemfrog_quasar-1.0.2-py3-none-any.whl
Algorithm | Hash digest | |
---|---|---|
SHA256 | 2adf3b17057ed26af0f1082c96b44c686deeca2c8e8ef747072472b0853d4c8f |
|
MD5 | 9c70fb682b7ef232610c89786b8ebdea |
|
BLAKE2b-256 | cb8dec876d7d4f560c9b3a1cdc08f5fa2334efa43c2da8a59029a6c02836baeb |