[Vue3 + typescript] Quasar 스타일

VUE.JS 목록

 

Style & Identity

https://quasar.dev/style/typography

<template>
  <div
    class="text-h1 text-weight-thin q-mt-sm q-pa-md"
    style="background-color:blueviolet;"
  >
    hello
    <q-btn
      color="light-blue-6"
      icon="check"
      label="OK"
    />
  </div>

  <div class="shadow-8 q-ma-sm q-pa-lg">
    shadow
  </div>
</template>

 

 

 

Layout

https://quasar.dev/layout/grid/introduction-to-flexbox

<template>
  <div class="row">
    <div class="col-xs-12 col-sm-6 col-md-4">
      col
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      col
    </div>
    <div class="col-xs-12 col-sm-6 col-md-4">
      col
    </div>
  </div>
</template>

 

 

 

Alignment

가로정렬

<div class="row justify-start">
  <div class="col-6">One of two cols</div>
  <div class="col-6">One of two cols</div>
</div>

 

 

 

세로정렬

<div class="row items-start">
  <div class="col">One of three cols</div>
  <div class="col">One of three cols</div>
</div>

 

 

 

VUE.JS 목록