Quasar Framework笔记

1.布局(Layout)

基本用法:

<!-- 主包装组件 -->
<q-layout>
      <!-- optional -->
      <q-layout-header>
        <!-- content; any -->
      </q-layout-header>

      <!-- optional -->
      <q-layout-drawer side="left">
        <!-- content; any -->
      </q-layout-drawer>

      <!-- optional -->
      <q-layout-drawer side="right">
    <!-- content; any -->
  </q-layout-drawer>

  <!-- REQUIRED -->
  <q-page-container>

<!--
  Here it's where Vue Router injects children
  Page components.

  <router-view/> tag below can be replaced by an
  actual page content should you wish to do so.
-->
<router-view />
<!--
  First child of QPageContainer must be a QPage,
  so make sure that your layout route children components
  encapsulate a QPage.
-->

  </q-page-container>

  <!-- optional -->
  <q-layout-footer>
    <!-- content; any -->
  </q-layout-footer>
</q-layout>

2.按钮(button)

基本用法:

<!-- 仅标签 -->
<q-btn label="New item" />

<!-- 仅图片 -->
<q-btn icon="map" />

<!-- 图片 & 标签 -->
<q-btn icon="create" label="New item" />

标准圆形按钮
<q-btn round color="secondary" icon="card_giftcard" />
或:
<q-btn round color="secondary">
      <q-icon name="card_giftcard" />
</q-btn>

button Sizes:
<q-btn color="primary" size="xs" label="Extra Small Button" />
size(xs,sm,md,lg,xl) md:默认

按钮颜色(primary,amber-8,orange,lime)
按钮样式类型(outline,push,round,flat,rounded和glossy)
按钮组(button group)
基本用法:
<q-btn-group>
  <q-btn label="One" @click="clickHandler1"/>
  <q-btn label="Two" @click="clickHandler2"/>
  <q-btn label="Three" @click="clickHandler3"/>
</q-btn-group>
下拉按钮
<q-btn-dropdown label="Button">
  <!-- dropdown content -->
      <q-list link>
        <q-item>
          <q-item-main>
            <q-item-tile label>Item</q-item-tile>
          </q-item-main>
        </q-item>
      </q-list>
</q-btn-dropdown>
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里只属于前端工程师。