Use Quasar to Design Material and IOS-style Responsive Websites

  Front end, ios, material, quasar, vue.js

GITHUB：Using Quasar to Design Tourism Websites
Article link:Use Quasar to Design Material and IOS-style Responsive Websites

Quasar

QuasarIt is based onVue.jsDevelopedUIThe framework can make it easy for you to build a concise and lively interface of the website. More importantly, it can also make it easy for you to do well.RWD(responsive website design), in addition to helping you addPWA, make your web page into a mobile phoneApp.

The following is from the official websiteQuasar Framework, summarizedQuasarThe main characteristics of.

QuasarYesMITLicensed Open Source Framework (Based onVue), which can helpWebDevelopers create:

  • Responsive website
  • PWA
  • viaApache CordovaBuild moveApp
  • Multi-Platform Desktop Applications (UsingElectron)

Five Reasons to Choose Quasar

  1. Built-inMaterialAndIOSTwo themes
  2. Components are built-inRWDquick response
  3. Diverse foundationsUIComponent library
  4. I brought it with me.Vuex、VueRouter、Vuei18n(Multilingual Department)
  5. Powerful deployment tools

Installation guide

First installNode.jsAndvue-cliSee the official website for specific installation methods.

Then installQuasar,npm install -g quasar-cli.

Finally, build the project:quasar init <folder name>

Replacemain.jsThequasar.config.jsSetup file:

  • Reference to Quasar’s built-in components can be avoided everywhereimport components
  • i18nSetting up Multilingual Department
  • iconsRemove comments to use
  • Development modeHTTPS under andportSet up
  • CSSAnimation settings
  • Settings for other external plug-ins
  • PWA、manifestSettings such as

quasar.config.js

  • plugins

In the pastVueInstall otherpluginWill be inmain.jsIn the introduction, and inQuasarWill replacemain.jsBecome all configuration files.

  • css

The introduction of CSS will be placed in this file, the default location./src/css, the required CSS library is ready for direct use.

  • extra

Here is whether the setting is introduced or not.quasar-extrasThe content of.

Package name explain
Roboto Font roboto-font Suggested fonts for Material themes
Roboto Font Latin Extended roboto-font-latin-ext Suggested fonts for Material themes
Material Icons material-icons Material styleicon
MDI (Material Design Icons) mdi Material styleiconextend
Font Awesome fontawesome optionicon
Ionicons ionicons ioniconsTheicon
Animate.css animations Web Component Animation
  • scopeHoiting

DefaulttrueTo promotewebpackRuntime performance

  • VueRouterMode

Set upVue RouterThe mode of, there arehistory、hashTwo values.

  • vueCompiler

Compiling modes including two Vuevue runtime+compiler, the default is onlyruntime-onlyRuntime compilation

  • gzip

Enable website supportgzipThe format of the.

  • analyze

InbuildThewebpack-bundle-analyzerTools.

  • extractCSS

Extract CSS into the file.VueLoader

  • extendWebpack

IndevSettings for servers in mode.

  • https
  • port

Set to the specifiedportWhen quasar is runningdevMode, encountered the sameportWhen will oneself again+1.

  • open

Is it indevAfter the command is executed, the page of this website will be opened automatically on the browser.

Layout

quasar devOpen the initial pageheaderAnddrawerAll inlayout/MyLayout.vueLi.

Some common attributes:

Attribute Value explain
side String There are two valuesleft,rightTo decide whether to appear on the left or right
overlay Boolean Set the sidebar to squeeze when it pops up.q-page-containerOr is it directly covered on it
content-style Object Set CSS for Sidebar
content-class String/Object/Array The that sets the sidebarclass
mini Boolean Reduce the sidebar to onlyicon

CSS to be used hereObjectIn the same way.

:content-style="{color: 'red'}"

Tourism website -Header

Demonstration project:

  • Toolbar
  • ToolbarTitle
  • Button
<q-layout-header>
      <q-toolbar
        color="primary"
        text-color="primary"
        inverted>

        <q-toolbar-title>
          好玩旅游网
          <div slot="subtitle">WeFunWeb</div>
        </q-toolbar-title>
        <div class="gt-xs">
          <q-btn class="q-mr-md" flat>精选景点</q-btn>
          <q-btn class="q-mr-md" flat>美食地图</q-btn>
          <q-btn class="q-mr-md" flat>夜宿晓行</q-btn>
          <q-btn class="q-mr-md" flat>夜宿晓行</q-btn>
          <q-btn class="q-mr-md" flat>注册</q-btn>
          <q-btn class="q-mr-md" flat>登录</q-btn>
        </div>
      </q-toolbar>
</q-layout-header>

Toolbar

  • color

Quasar built-in color:color-palette

In/src/css/themes/common.variables.stylAdd a palette of colors inside.

  • inverted

Letbackground colorBecomeWhite, and then make the original white text into setbackground color.

  • glossy

Add glass effect

QToolbarTitle

  • gt-xs

Used to set display pixels above576pxThe page style of the.

  • q-mr-md

mrequal tomargin-right
smexactlysizeThe value of issmall

Other non-appearance functional attributes:

  • disable,:disable="true"When the button is disabled
  • labelSet the text of the button
  • typeCan bebutton、submit、resetOne of them
  • loading, the value istrueDisplay reading
  • percentageAccording to the read circle, followloadingUse together
  • dark-percentageUsed on buttons in bright colors

List&ListItem

Modify Drawer

  • v-model="rightDrawerOpen"Controls the position of the pop-up sidebar
  • content-class="bg-grey-10"background color
  • side="right"The button is set on the multilateral side.

Set uprightDrawerOpenNeed to add todataLi.

export default {
  name: 'MyLayout',
  data () {
    return {
      rightDrawerOpen: false
    }
  }
}

Mobile button

Controlled displayclassUselt-smAs long as the pixel is less thansm(768px)This area is displayed.

Set List andListItem

Use the Dark property to make the component content display better on a dark background

List of available components, these components need to be introduced into the configuration file.

  • QListHeaderTitle on List
  • QItemSeparatorcut-off rule
  • QItem
  • QItemSideIt can be divided into left and right blocks.
  • QItemMainMiddle block
  • QItemTitleTitle in block

Tourism website -Carousel page

Create a new home page

Insrc/pages/New belowIndexFolder and create a new one under this folderIndex.vueAs the home page, delete the originalIndex.vueDocuments.

Modify vuelouter

Insrc/router/routers.jsModifyIndex.vueThe path of the.

Create blocks for rotation

Insrc/pages/IndexNew belowSectionCarousel.vue, and inIndex.vueIntroduction of.

Then againtemplateinferiorq-pageAdd insection-carousel

<template>
  <q-page>
    <section-carousel></section-carousel>
  </q-page>
</template>

Start writing carousel

Official Carousel

In the settings filequasa.config.jsIntroduction of:

framework: {
  components: [
    'QCarousel',
    'QCarouselSlide',
    'QCarouselControl'
    ...
  ],
}

Add carousel pictures/pages

<template>
  <q-carousel
    color="white"
    infinite
    arrows
    autoplay
    height="400px"
  >
    <q-carousel-slide img-src="statics/images/papercut1.jpg"/>
    <q-carousel-slide img-src="statics/images/papercut2.jpg"/>
  </q-carousel>
</template>

Add text block

Quasar incarouselThere are subcomponents inQCarouselControlUsed to customize buttons on the page.

According to the example of official documents,QCarouselControlPut it onQCarouselAt the back of the, that isQCarouselSlideThe back of the.

<q-carousel-control
  position="center"
  slot="control-nav"
  slot-scope="carousel"
  class="carouselInput">
</q-carousel-control>

Inq-carousel-controlAdd content to:

<div class="main">
  <h6 class="title">新锐旅游网站</h6>
  <p class="subtitle">您身边的好玩专家</p>
  <p>发现周边好玩的地方，玩得快乐，玩得精彩。</p>
</div>

Plus CSS

<style lang="stylus" scoped>
  .carouselInput {
    width: 90%
  }

  .carouselInput .main {
    text-align center
    color: #f50057
  }

  .carouselInput .title {
    font-size 48px
  }

  .carouselInput .subtitle {
    font-size 24px
  }
</style>

Adjust CSS for Mobile Phone Edition

@media (min-width: 768px) {
  .carouselInput .title {
    font-size 48px
  }

  .carouselInput .subtitle {
    font-size 24px
  }
}

@media (max-width: 768px) {
  .carouselInput .title {
    font-size 24px
  }

  .carouselInput .subtitle {
    font-size 16px
  }
}

Travel website-search box

Add search box

input

First toquasar.config.jsIntroduction ofQInput

framework: {
  components: ['QInput']
}

In<div class="main">Add afterq-inputContents:

<q-input
  inverted-light
  color="white"
  placeholder="输入城市/景点 或是想去的地方"
  :after="[{icon:'fas fa-search-location'}]"
  v-model="search">
</q-input>
  • inverteddisplayBackground
  • colorTheme color
  • afterUsed to display the input box before and aftericon

Final bindingv-model="search", at this time need to be indataAdd tovalueValue, otherwise an error will be reported.

  data() {
    return {
      search: ''
    }
  }

Adjust typesetting

UseFlex CSSAdjust the component length.

<div class="row">
  <div class="col-md-2 col-xs-1"></div>
  <div class="col-md-8 col-xs-10">
    <q-input ...></q-input>
  </div>
  <div class="col-md-2 col-xs-1"></div>
</div>

Automatic fillingautocomplete

introduceQAutocompleteComponents:

framework: {
  components: ['QAutocomplete']
}

joinq-autocomplete：

<q-input ...>
  <q-autocomplete :static-data="{field: 'label', list: countries}"/>
</q-input>

  • static-data

    • fieldFields for searching data
    • listSources of data searched

Set static data

countries: [
  {label: '广州市', icon: 'fas fa-map-marker-alt'},
  {label: '深圳市', icon: 'fas fa-map-marker-alt'},
  {label: '珠海市', icon: 'fas fa-map-marker-alt'},
  {label: '[网美景点]香山公园，秋季赏枫胜地', stamp: '北京市'},
  {label: '珠海长隆[海豚剧场]精彩不容错过！精彩变身演出抢先看', 
   stamp: '珠海，长隆', rightTextColor: 'pink-13'}
]

Custom filterfilter

Inq-autocompleteAdd infilter：

<q-autocomplete
  :static-data="{field: 'label', list: countries}"
  :filter="advFilter"
/>

introducelodashTo deal withfilter.

Tourism website -Popover pop-up box

Add Popover component

Inquasar.config.jsIntroduction ofQPopover.Popover

  • no-focusNo focus
  • fitThe pop-up box is the same length as the input box.
  • v-show="! search"The bullet box and the candidate box do not appear at the same time.

Content layout

UseFlexCSSFor typesetting.

<div class="row viewList">
  <div class="col-sm-4 col-xs-12"></div>
  <div class="col-sm-4 col-xs-12"></div>
  <div class="col-sm-4 col-xs-12"></div>
</div>

Set up a mobile phone terminal and add at the bottom of CSS:

@media (max-width: 576px) {
  .viewList {
    width: 280px
  }
}

The invention solves the problem that under the pixel of the mobile phonePopoverNot automaticfixThis is a question. This should be less than PopoverfixTheminimum widith.

Set content (List&Item)

List Class Directly UsedlistThe fastest.

<div class="col-sm-4 col-xs-12">
  <q-list>
    <q-list-header>热门目的地</q-list-header>
    <q-item>
      <q-item-main>珠海</q-item-main>
    </q-item>
  </q-list>
</div>

Add right Icon and text

Insrc/componentsNew belowLIcon.vue, promote component reuse.

Mainly usedq-iconTo introduceFont AwesomeTheicon.

Introduce subcomponents to the original page

Specific code:
SectionCarousel.vue
src/components/LIcon.vue

Travel website -Cards

Create and introduce a second block

Insrc/pages/IndexNew belowSectionCards.vueThe module is used as a card block.

InIndex.vueIntroduction ofSectionCards.vue.

Layout planning within blocks

<div class="row">
  <div class="col-12"><b>本月最精选</b></div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片一</div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片二</div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片三</div>
  <div class="col-lg-3 col-sm-6 col-xs-12">卡片四</div>
</div>

Make cards

The contents of the card will be repeated in large quantities, so the card is directly separated into a component.

Insrc/components/Create a new one nextLCard.vue.

Inquasar.config.jsThe card assembly is introduced into theCards 

framework: {
  components: [
    'QCard',
    'QCardTitle',
    'QCardMain',
    'QCardMedia',
    'QCardSeparator',
    'QCardActions'
  ]
}

The card is mainly divided into three parts:

  • q-card-mediaThe block where the photo film is shown.
  • q-card-titleTitle of card
  • q-card-mainThe main contents of the card
  • q-card-actionsA block used to hold buttons and other operations.
  • q-card-separatorline between

InSectionCards.vueIntroduction ofLCard.vue.

<div class="col-lg-3 col-sm-6 col-xs-12">
  <l-card/>
</div>
import LCard from 'src/components/LCard.vue'
export default {
  components:{
    LCard
  },
}

Add Icon

Continue to make upscoreAndLandmarkTheIcon.

Let LCard text be imported from the parent component.

LetLCard.vueAbility to dynamically acquire data:

<template>
  <q-card inline>
    <q-card-media>
      <img :src="image"/>
    </q-card-media>

    <q-card-title>
      <span>{{title}}</span>
      <div class="q-mt-sm" slot="subtitle">
        <l-icon
          :icon="'fas fa-star'"
          :text="rate"
          :color="'orange'"
          class="q-mr-md"/>
        <span class="q-mr-sm">{{comment}}个评价</span>
        <span>{{view}}人浏览</span>
      </div>
    </q-card-title>

    <q-card-main>
      <l-icon
        :icon="'fas fa-map-marker-alt'"
        :text="locate"
        :color="'grey'"
        class="q-mr-md"/>
    </q-card-main>
  </q-card>
</template>

<script>
import LIcon from 'src/components/LIcon';

export default {
  name: "LCard",
  props: {
    image: String,
    title: String,
    rate: String,
    comment: String,
    view: String,
    locate: String
  },
  components: {
    LIcon
  }
}
</script>

Setting data in SectionCards

Add a new onedataDatamonthBestList, and then intemplateUsed in templatesv-forGet the data and display it.

<template v-for="(data,index) in monthBestList">
  <div class="col-lg-3 col-sm-6 col-xs-12 q-pa-sm" :key="index">
    <l-card
      :title="data.title"
      :rate="data.rate"
      :comment="data.comment"
      :view="data.view"
      :locate="data.locate"
      :image="data.image"
    />
  </div>
</template>

Adjust CSS and layout

Tourism Website-Making Attraction Details Page

Insrc/pagesNew belowplaceFolder and create a new one under this folderIndex.vueAs the main page of the article.

Set up vuelouter

Vue Router is required for page navigation/switching.

Inrouter/routes.jsAdd navigation to:

const routes = [
  {
    path: '/',
    component: () => import('layouts/MyLayout.vue'),
    children: [
      {path: '', component: () => import('pages/Index')},
      {path: 'Place', component: () => import('pages/Place')}
    ]
  }
];

Inhttp://localhost:8080/#/placeTo see the effect.

Adding Parallax Components

Parallax

Inquasar.config.jsIntroduction ofQParallaxComponents.

<template>
  <q-page>
    <q-parallax :src="localData.image" :height="400">
      <p>{{ localData.title }}</p>
    </q-parallax>
  </q-page>
</template>

Page layout of theme section

According to the 8 +4 grid layout:

<div class="row place-main">
  <div class="col-8"></div>
  <div class="col-4"></div>
</div>

CSS added left and rightmargin 5%Make the page look less full.

.place-main {
  margin-left 5%
  margin-right 5%
}

Set left screen

We need Quasar crumbs here.BreadCrumbsComponents.

Inquasar.config.jsIntroduction of:

'QBreadcrumbs',
'QBreadcrumbsEl',

Add scenic spot information and grading layout

According to8 +4 squaresSet the left column to align the text to the right.

Add scenic spot information

introduceLIcon.vueIcon component:

<div class="col-8 info-left">
  <l-icon 
    class="q-mt-sm" 
    :text="'景点编号：' + localData.id" 
    :icon="'fas fa-tag'" 
    :color="'grey'"/><br>
  ...
</div>

Add a score

Scoring componentRating

Form component -Field

Form Field

Field’s components areQInput、QSeclet、QDatetime、QChipsInput

Incoming component

Inquasar.config.jsIntroduce components into

Basic example

<q-field
  label="信箱">
  <q-input suffix="@gmail.com" v-model="model"/>
</q-field>
  • labelSet title text
  • iconThe that sets the titleicon
  • icon-colorSet titleiconThe color of
  • helperAuxiliary Text Under Components
  • errorThe control assembly will turn red when it is wrong.
  • error-labelText to be displayed in case of error
  • warningControls whether the component is in a warning state
  • warning-labelwitherror-label
  • countDisplays how much text is currently entered
  • insetUsed for noicon/labelThe field for is empty
  • orientationThe arrangement direction of components (horizontalhorizontal/verticalvertical)
  • label-widthThe width of the text block (in12Grid width division) set to assuming that the width of the text is as long as the input6
  • darkIs the text highlighted, suitable for dark background

Form component-chipinput

Chips Input

<q-chips-input float-label="兴趣" v-model="model" />
export default {
  data() {
    return {
      model: []
    }
  }
}

Appearance attribute

  • chips-colorChangechipsThe color of
  • chips-bg-colorChangechipsThe background color of
  • add-iconThe displayed on the right when replacing the inputenterButtonicon

Basic attribute

  • prefixAdd prefix text (does not affectarrayValue within)
  • suffixAdd suffix text, which can be used with prefix.
  • hide-underlineRemove the bottom line of the original input box
  • no-parent-fieldIf QField is set outside, it can avoid linking with the effect of QField.
  • upper-caseAutomatic capitalization
  • lower-caseAutomatically convert to lowercase

Basic attributes that most components repeat

  • float-labelSuspended title
  • stack-labelFixed title
  • colorComponent color
  • invertedIs there a background color
  • inverted-lightImprove the display of components under bright background
  • darkImproves display of components on dark backgrounds
  • errorError
  • warningWarning
  • disablewithreadonlySimilar, but with gray key effect

event attribute

  • @input(newVal)Colleagues who enter text will trigger
  • @change(newVal)Trigger of array value change
  • @clear(clearVal)Triggered when the array is emptied
  • @duplicate(val)Triggered when duplicate values are entered
  • @add(val)Triggered on input
  • @remove({index, value})Triggered when one of the components is deleted

Method properties (Vue Methods)

The usage here is usually added to the assembly.redProperty, and then use it elsewhere.this.$refsTo operate on these components.

  • add(value)Adds a value to an array of components
  • remove(index)Deletes the value of the specified index
  • focus()Focus on components
  • select()Select component
  • clear()Clears the value of the array in the component
<q-chips-input ref="myChipInput" />
addSomething() {
    this.$refs.myChipInput.add('Hello Quasar')
}

Form component -Radio

Incoming componentQRadio,Radio

Used with QField

<q-field
        label="黄金周去哪玩？"
        orientation="vertical">
    <q-radio v-model="model" label="去杭州" val="hangzhou"/>
    <q-radio v-model="model" label="去北京" val="beijing"/>
    <q-radio v-model="model" label="去成都" val="chengdu"/>
</q-field>

Basic attribute

  • valStores the value of a bound variable
  • labelText on assembly
  • left-labelSet totrueWhen, the text changes to appear to the left of the option
  • checked-iconChange icon when selecting
  • unchecked-iconChange icon when not selected
  • colorChange the color of components
  • keep-colorThere is also a color when not selected (the default is gray)
  • readonlyRead-only attribute
  • disableDisable
  • darkHighlight assembly text on dark background
  • no-focusThe focus event will not be triggered

elementary event

  • @inputTriggered when selected
  • @blurTriggered when losing focus (point to other places)
  • @focusTriggered when focusing (clicking on the component)

Form Component -Checkbox

Checkbox

Incoming component

Inquasai.config.jsIntroduction ofQCheckbox.

Check box requires binding data type to beArray, also need andQFieldTogether.

Basic attribute

  • valValue added tov-modelIn bound variables
  • true-valueIfmodelNot an array, will be given when selectedmodelvaluetrueTo replacetrue
  • false-valueSame as above
  • indeterminate-valueTo replacenull
  • toggle-indeterminateClick to switch the status among the above three

Form Component -Toggle

Toggle key

Incoming component

Inquasar.config.jsIntroduction ofQToggle

Basic attribute

  • val,v-modelYesArray, will be added to theArrayInside
  • iconIf the bottom two (checke-icon、unchecked-icon) icon will be overwritten

Form component -Option Group

Option group option-group

Write the option into oneArray, and then directly usev-forAll rendered.

Incoming component

Every step is the same, inquasar.config.jsIntroduction ofQOptionGroup.

Basic example

CheckBox

<template>
    <q-field orientation="vertical" label="要选购的商品">
        <q-option-group
                type="checkbox"
                v-model="model"
                :options="optionList"
        />
    </q-field
    >
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                model: [],
                optionList: [
                    {label: '鸡蛋', value: 'egg'},
                    {label: '海带', value: 'seaweed'},
                    {label: '鸡腿', value: 'lag'},
                    {label: '牛肉', value: 'beef'}
                ]
            }
        }
    }
</script>

toggle、radioAndcheckboxSimilarly, only modifications are requiredtypeAttribute values are sufficient

Form Component -Datetime

Datetime, the time and date input box, has two styles: Material and IOS.

Incoming component

There are two components that need to be introduced, one is displayed during input and the other is displayed by default. They are:

Date and time inputDatetime Input

framework: {
  components: ['QDatetime']
}

Date and time selectorDatetime Picker

framework: {
  components: ['QDatetimePicker']
}

Basic operation

// Datetime Input
<q-datetime v-model="model" type="date"/>

// Datetime Picker
<q-datetime-picker v-model="model" type="date"/>

Basic attribute

  • type, a total of three values, the default isdate

    1. dateSimple date
    2. timeSimple time
    3. datetimeTime+Date
  • minimal, do not display the title
  • min max, set the date and time range that can be selected.
<q-datetime v-model="model" type="datetime" max="2019/02/27 2:30"/>

  • format-modelThere are four options for the time format of storage:

    1. auto2019-02-27T12:01:00.000+08:00
    2. date“2019-02-27T04:00:00.000Z”
    3. number1541044860000
    4. string2019-02-27T12:01:00.000+08:00
  • format24hSet to 24-hour clock

Basic method

Input

  • show()Display input
  • hide()Hide input
  • toggle()Toggle input
  • clear()Empty model

Picker

  • setYear(val)Setting year
  • setMonth(val)Set month
  • setDay(val)Setting day
  • setHour(val)When setting up
  • setMinute(val)Set score
  • setView(val)Set the mode to display
  • clear()Empty model

Form Component -Editor

Built-in article Editor

Editor (WYSIWYG)

Inquasar.config.jsIntroduction ofQEditorComponents.

<q-editor v-model="model"/>

There are three main settings page properties:

  • Toolbar
<q-editor
  v-model="model"
  :toolbar="[
      ['bold','italic','strike','underline'],
      ['hr','link'],
      ['fullscreen'],
      ['print']
    ]"
/>

  • Definitions

    • labelThe text to display
    • iconIcon to display
    • tipTips
    • cmdIf you don’t want to use the default function name, you can use this to tie back the function you want.
    • handlercustommethodsThefunctionName
    save: {
Label:' save',
handler: functionName
}
    • disableDisable
<q-editor
        v-model="model"
        :toolbar="[
        ['bold','italic','strike','underline'],
        ['hr','link'],
        ['fullscreen'],
        ['print']
    ]"
        :definitions="{
            bold:{label:'粗体',icon:null,tip:'这是粗体'}
            }"
/>
  • Font
<q-editor v-model="model"
          :toolbar="[
        ['arial','arial_black','comic_sans'],
    ]"
          :fonts="{
              arial:'Arial',
              arial_black:'Arial Black',
              comic_sans:'Comic Sans MS'
              }"
/>

elementary event

  • @inputTriggered on input
  • @fullscreen(true/false)Triggered when switching full screen

Form Component -Knob Rotate Button

Rotate button

Inquasar.config.jsIntroduction ofQKnobComponents.

<q-knob
        v-model="model"
        :min="0"
        :max="25"
>
    <q-icon class="q-mr-xs" name="volume_up"/>
    {{model}}
</q-knob>

Attribute

  • sizeResize components, default120px
  • stepSpacing of values
  • decimalsNumber of digits displayed by decimal point
  • min maxMinimum and maximum values
  • color、track-colorColor, rotation axis color not reached
  • line-widthWidth of line, default6px

Events

  • @input(val)Triggered immediately upon change
  • @change(val)Triggered on change
  • @drag-value(val)Triggered when dragging

Pop-up window -Action Sheet

ActionSheet

Inquasar.config.jsIntroduction ofActionSheetComponent, there are two styles of Material and IOS.

pluginSForm

framework: {
  plugins: ['ActionSheet']
}

componentsForm

framework: {
  components: ['QActionSheet']
}

As the use method of Plugins

Vueney

this.$q.actionSheet(configObj)

Outside Vue

import { ActionSheet } from 'quasar';
ActionSheet.create(configObj)
this.$q.actionSheet({
    title: '操作选择',
    grid: true, //使用格状排版（一排三个）
    dismissLabel: '取消', //取消按钮的文字 只有IOS主题下可用 默认是cancel
    actions: [
        {
            label: '抓虫',
            color: 'green',
            icon: 'fas fa-bug',
            handler() {
                console.log('抓虫大师')
            }
        },
        {
            label: '分享到微博',
            color: 'blue',
            icon: 'fas fa-weibo'
        },
        {
            label: '请人帮忙',
            color: 'black',
            icon: 'fas fa-alipay'
        }
    ]
}).then(action => {}).watch(() => {});

As the use method of Component

It is basically the same as the above operation, except that it can monitor more.@showAnd@hideTime.

Events

  • @okTriggered when an option is clicked
  • @cancelTriggered on cancellation
  • @showTriggered on display
  • @hideTriggered when hidden
  • @escape-keyTriggered when Esc is pressed

Pop-up window -Dialog

The operation method is basically the same as that of Action Sheet above.

this.$q.dialog({
    title: '选择主菜',
    message: '主厨精心特制主餐请选择',
    color: 'red-13',
    ok: true,
    cancel: true,
    preventClose: true, //设置为true，除非按cancel或是ok，不然不会关闭窗口
    noBackdropDismiss: false, //按空白的地方不会关闭窗口
    noEscDismiss: false, //按Esc不会关闭窗口
    stackButtons: false, //为true时会将ok/cancel按钮垂直排列
    position: 'top', //设置窗口显示的位置

    //使用input
    prompt: {
        mode: '顶级和牛帝王蟹',
        type: 'text'
    },

    //使用option
    options:{
        type:'radio',
        model:'beef', //默认的选项
        items:[
            {label:'绝对不加热生牛排',value:'beef'},
            {label:'极地冰山沙漠鲔鱼',value:'tuna'},
            {label:'超级漆黑山洞野猪肉',value:'pork'}
        ]
    }
}).then(action => {}).watch(() => {});

As the use method of Component

Introduce in configuration fileQDialogComponents.

<q-dialog>
    <span slot="title">标题</span>
    <span slot="message">正文</span>
    <span slot="body">主体</span>
    <span slot="buttons">按钮</span>
</q-dialog>

Pop-up window -Modal

Modal box

introduceQModalComponents, in addition to adddirectivesTheCloseOverlay.

Use buttons ormethodwillmodalSet totrueTo openmodal.

Full page display

<q-btn @click="model=true">Open</q-btn>
<q-modal v-model="model" content-css="padding: 50px" maximized>
    <h4>想去哪里玩？</h4>
    <p>自由行·出国度假</p>
    <p>泰国、首尔、珠海、九寨沟</p>
    <q-btn
            class="q-mt-lg"
            color="primary"
            @click="model=false"
            label="订购行程"
    />
</q-modal>

Minimum windowminimized

Set uppositionIt will be cleared automatically afterwards.content-cssDefinedcss, so want to be in one moredivDo itpadding.

<q-modal v-model="model" minimized>
    <div style="padding: 20px">
        ...
    </div>
</q-modal>

Basic attribute

  • minimized,maximizedSet the window to minimize or maximize
  • no-route-dismiss、no-esc-dismiss、no-backdrop-dismissThey are respectively to control whether switching pages, pressing Esc and pressing black background will trigger the opening and closing events.
  • content-css,content-classesCSS and class in Modal are set inpositionIt will be invalid later.
  • positionSet the location of the pop-up window
  • position-classesSet uppositionThis will be used later.class, the default isitems-center,justify-center
  • transition,enter-class,leave-classYou can use custom CSS to animate your appearance.
  • no-refocusDo you want to focus on the last component before opening the window when closing the window

Vue method

Some methods of controlling the opening and closing of windows should be matchedThis. $ refs.window nameTo use.

  • show
  • hide
  • toggle

Pop-up window -Notify

Notify

this.$q.notify({
    message: '已保存',
    timeout: 5000,
    // type:'positive', //自带选项
    color: 'grey',
    textColor: 'blue',
    icon: 'fas fa-warning',
    avatar: 'statics/images', //这个跟icon二选一
    detail: '',
    position: 'top',
    actions: [
        {
            label: '',
            icon: '',
            noDismiss: true,
            handler() {
                console.log('hello world');
            }
        }
    ],
    onDismiss() {
        console.log('warning');
    }
});

Use outside Vue

import {Notify} from 'quasar';

Notify.create('已保存');
//方式二
Notify.create({
    message: '已保存'
});

Progress bar -Ajax Bar&Loading Bar

Ajax Bar

Inquasar.config.jsIntroduction ofQAjaxBarComponents.

Basic usage

Ajax Bar

Because it is used on every page, it is placed at the top.App.vue.

<div id="q-app">
    <router-view></router-view>
    <a-ajax-bar/>
</div>
  • positionSet component position
  • sizeWidth of load bar, default4px
  • colorDefaultred
  • reverseMake progress in the opposite direction

elementary event

  • @startTriggered when action is started
  • @stopTriggered at end of action

Basic method

  • start()
  • stop()

Loading Bar

Progress bar -Inner Loading

Inner Loading

Matters needing attention

When using InnerLoading, it acts onrelative-positionThis ..classNext, if this is not added, it will become the whole page.

Basic operation

index.vue

<template>
  <q-page class="q-ma-lg">
    <q-btn @click="$refs.myField.show()">Open</q-btn>
    <my-field class="relative-position" ref="myField"/>
  </q-page>
</template>

<script>
import MyField from './MyField';

export default {
  name: 'PageIndex',
  components: {
    MyField
  }
}
</script>

MyField.vue

<template>
  <q-field
    label="跨年去哪玩？"
    orientation="vertical"
  >
    <q-radio v-model="model" label="去日本" val="japan" checked-icon="far fa-check-circle" keep-color/>
    <q-radio v-model="model" label="去韩国" val="korea" color="green" keep-color/>
    <q-radio v-model="model" label="在家待着" val="home" color="red" keep-color/>
    <q-inner-loading :visible="visible">
      <q-spinner-gears size="50px" color="primary"></q-spinner-gears>
    </q-inner-loading>
  </q-field>
</template>

<script>
export default {
    name: "MyField",
    data() {
      return {
        model: false,
        visible: false
      }
    },
    methods: {
      show() {
        this.visible = true;
        setTimeout(() => {
          this.visible = false
        }, 5000)
      }
    }
  }
</script>

Effect

CSS Helpers

Space typesetting csss spaceclasses

CSS spacing classes csss spacing classes

Basic example

q-ma-xs
  • qAs a prefix

  • ma：

    • mType,margin
    • aDirection,all
  • xsThe size of the range is the same asflex cssConsistent

Grammar

q-[类型][方向]-[大小]

  • Type

    • m(marginOutward expansion)
    • p(paddingExpand inward)
  • Method

There are a total of 7 choices, except the basic ones.t(top),r(right),l(left)、b(bottom),a(all)In addition, there are two kindsx(left+right),y(top+bottom).

  • Size

Yesnone,auto(can only be used inmargin),xs,sm,md,lg,xl.

Shadows CSS Shadows

CSS shadows (elevation) csss shadows

Visual range CSS Visibility

Visual range CSS Visibility

Position typesetting CSS Positioning Classes

CSS positioning classes csss positioning classes

Custom color

Color Palette

Insrc/css/app.stylCustom global CSS in file

Add color

.text-redsp
  color: #D03F38
.bg-redsp
  background: #D03F38

HeretextAndbgIt needs to be set at the same time.

Use

<q-btn color="redsp">Open</q-btn>

Multilingual department I18n

I18n of Quasar

Multilingual department (I18n)

Inquasar.config.jsSettings in:

framework: {
  i18n: 'zh-hans'
}

Read the current language family

let lang = this.#q.i18n.getLocal()

Dynamic settings

Quasar’s switching language family is not traditionalvue-i18nIt can be changed directly and the language file of the new language family must be reloaded.

<template>
  <q-btn @click="setLang('zh-hans')">简体中文</q-btn>
</template>

<script>
  export default {
    name: "I18n",
    methods: {
      setLang(lang) {
        import('quasar-framework/i18n/${lang}').then(lang => {
          this.$q.i18n.set(lang.default)
        })
      }
    }
  }
</script>

Vue-I18n

Vue-I18nsrc/i18nInside, add the desired language family according to the set content.

Application

<p>{{$t('apple')}}</p>
<q-btn @click="setLang()" :label="$t('setting')"></q-btn>

Dynamic switching language family

methods: {
    setLang() {
        this.$i18m.local = 'zh-CN'
    }
}

Related Posts: