Material Design風(fēng)格神框架vuetify 學(xué)習(xí)筆記(三) 基礎(chǔ)組件1 按鈕圖標(biāo) 列表

一. 按鈕 (V-BTN)

參考文檔:
https://vuetifyjs.com/zh-Hans/components/buttons/
https://vuetifyjs.com/zh-Hans/api/v-btn/

1. 按鈕的顏色

我們可以用class 或者 color來控制按鈕的顏色

    <v-btn color="pink">text</v-btn>
    <v-btn dark color="pink">text</v-btn>
    <v-btn class="pink">text</v-btn>
    <v-btn class="pink white--text">text</v-btn>

也可以使用系統(tǒng)顏色:

    <v-btn color="success"> success </v-btn>
    <v-btn color="info"> info </v-btn>
    <v-btn color="error"> error </v-btn>
...

2. 按鈕樣式

(1). 扁平化按鈕 (depressed )

<v-btn depressed class="pink white--text">text</v-btn>

(2). 透明背景按鈕 (plain )

<v-btn plain color="pink">text</v-btn>

(3). 輪廓線按鈕 (outlined)

<v-btn outlined color="pink">text</v-btn>

(4). 圓角按鈕 (rounded )

<v-btn rounded color="pink white--text">text</v-btn>

(5). 圓形浮動(dòng)按鈕 (fab)

<v-btn fab color="pink white--text">text</v-btn>

(6). 文本按鈕 (text)

文本按鈕沒有華麗的樣式, 顏色屬性只設(shè)置文本顏色

<v-btn text color="pink">text</v-btn>

(7). 凸起的按鈕 raised

凸起的按鈕有更夸張的陰影和點(diǎn)擊效果

<v-btn raised color="pink white--text">text</v-btn>

點(diǎn)擊時(shí)有遞增的陰影

(8). 瓷磚按鈕(無圓角按鈕) tile

<v-btn tile  color="pink white--text">text</v-btn>

3 . 圖標(biāo)按鈕

    <v-btn color="pink white--text">
      <v-icon>mdi-heart</v-icon>
    </v-btn>
    <v-btn fab color="orange white--text">
      <v-icon>mdi-email</v-icon>
    </v-btn>

4. 按鈕的尺寸

屬性	說明
x-small	特小
small	小
normal	正常(默認(rèn))
large	大
x-large	特大
block	將按鈕擴(kuò)大到可用空間的 100％

    <v-btn x-small color="pink white--text"> x-small </v-btn>
    <v-btn small color="pink white--text"> small </v-btn>
    <v-btn normal color="pink white--text"> normal </v-btn>
    <v-btn large color="pink white--text"> large </v-btn>
    <v-btn x-large color="pink white--text"> x-large </v-btn>
    <v-btn block color="pink white--text"> block </v-btn>

5. 按鈕加載中和失效

<v-btn loading color="pink white--text"> TEXT </v-btn>
<v-btn disabled color="pink white--text"> disabled </v-btn>

6. 按鈕點(diǎn)擊事件

vue 老規(guī)矩, @click處理點(diǎn)擊事件

<template>
  <div class="home text-center">
    <p></p>
    <v-btn :loading="loading" color="pink white--text" @click="btn_click">
      {{ btn_text }}
    </v-btn>
  </div>
</template>

<script>
export default {
  name: "Home",
  data() {
    return {
      loading: false,
      btn_text: "點(diǎn)我",
    };
  },
  methods: {
    btn_click() {
      this.loading = true;
      setTimeout(() => {
        this.btn_text = "感謝點(diǎn)擊";
        this.loading = false;
      }, 2000);
    },
  },
};

</script>

7. 超鏈接 href

<v-btn  color="indigo white--text"> 百度一下 </v-btn>

二. 圖標(biāo) v-icon

1. 圖標(biāo)的顏色

參考按鈕的顏色

2. 和按鈕結(jié)合使用

    <v-btn class="ma-2" color="primary" dark>
      Accept
      <v-icon dark right> mdi-checkbox-marked-circle </v-icon>
    </v-btn>
    <v-btn class="ma-2" dark>
      <v-icon dark left> mdi-minus-circle </v-icon>Cancel
    </v-btn>
    <v-btn class="ma-2" text icon color="blue lighten-2">
      <v-icon>mdi-thumb-up</v-icon>
    </v-btn>

    <v-btn class="ma-2" text icon color="red lighten-2">
      <v-icon>mdi-thumb-down</v-icon>
    </v-btn>

三. 列表 v-list

v-list 組件用于顯示信息玉掸。它可以包含頭像萝毛、內(nèi)容信粮、操作棺牧、列表組標(biāo)題等等。列表以易于在集合中識(shí)別特定項(xiàng)目的方式顯示內(nèi)容。它們?yōu)榻M織一組文本和圖像提供了一致的樣式而咆。

1. 列表相關(guān)標(biāo)簽

(1). 列表標(biāo)簽 v-list

基本列表標(biāo)簽

(2). 列表組標(biāo)簽 v-list-group

有了group才能點(diǎn)擊

重要屬性

sub-group : 將組件指定為嵌套列表組
no-action : 從組項(xiàng)目中刪除分配給操作圖標(biāo)的左邊距
eager : 將強(qiáng)制組件內(nèi)容在加載時(shí)呈現(xiàn)。如果存在內(nèi)容的話幕袱，則不會(huì)在 DOM 中渲染暴备，如果你想優(yōu)化 SEO，這是非常有用的们豌。

(3). 列表項(xiàng)目組 v-list-item-group

有了group才能點(diǎn)擊

重要屬性

value : 選定的條目可以用v-modle綁定
multiple : 多選
max : 最大多選數(shù)

(4). 列表項(xiàng)目 v-list-item

重要屬性

link : 指定組件為鏈接涯捻。當(dāng)使用 href 或 ** to ** 屬性時(shí)，這是自動(dòng)的設(shè)置的望迎。
href : 指定組件為錨點(diǎn)并應(yīng)用 href 屬性
target : 指定 target 屬性障癌。只在使用 href 屬性時(shí)應(yīng)用
inactive: 不活躍,如果設(shè)置了該屬性，即使有to/href或者@click辩尊，列表塊也不會(huì)響應(yīng)鏈接涛浙。
selectable : 允許在 v-list-item 中選擇文本。
to : 表示鏈接的目標(biāo)路由摄欲。

(5). 列表項(xiàng)目?jī)?nèi)容 v-list-item-content

(6). 列表項(xiàng)目頭像 v-list-item-avatar

重要屬性

rounded: 對(duì)指定的組件應(yīng)用 border-radius 樣式轿亮。
left : 指定頭像在組件左側(cè)。
rigth: 指定頭像在組件的右側(cè)胸墙。
horizontal : 使用另一種水平樣式我注。

(7). 列表項(xiàng)目圖標(biāo) v-list-item-icon

(8). 列表項(xiàng)目標(biāo)題 v-list-item-title

(9). 列表項(xiàng)目副標(biāo)題 v-list-item-subtitle

(10). 列表項(xiàng)目動(dòng)作插槽 v-list-item-action

(11). 列表項(xiàng)目動(dòng)作插槽文本 v-list-item-action-text

2. v-list-item的單行/雙行/三行

列表有三種基本形式。單行 (默認(rèn)), 雙行和三行.

<template>
  <v-card class="mx-auto" max-width="400" tile>
    <v-list>
      <v-list-item>
        <v-list-item-content>
          <v-list-item-title>單行列表項(xiàng)目</v-list-item-title>
        </v-list-item-content>
      </v-list-item>

      <v-list-item two-line>
        <v-list-item-content>
          <v-list-item-title>雙行列表項(xiàng)目</v-list-item-title>
          <v-list-item-subtitle>項(xiàng)目副標(biāo)題</v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>

      <v-list-item three-line>
        <v-list-item-content>
          <v-list-item-title>三行列表項(xiàng)目</v-list-item-title>
          <v-list-item-subtitle> 項(xiàng)目副標(biāo)題 </v-list-item-subtitle>
          <v-list-item-subtitle> 項(xiàng)目副標(biāo)題 </v-list-item-subtitle>
        </v-list-item-content>
      </v-list-item>
    </v-list>
  </v-card>
</template>

3. 列表的樣式

(1). 緊湊型列表 dense

    <v-list dense>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>歷史記錄</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

(2). 扁平化列表 flat

    <v-list flat>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>歷史記錄</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

(3). 圓角風(fēng)格

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list rounded>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>歷史記錄</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-email</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>聯(lián)系我們</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

(4). 各種形狀風(fēng)格 shaped

4. 列表的典型的應(yīng)用

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超級(jí)奶爸</v-list-item-subtitle>
          </v-list-item-content>

          <v-list-item-action>
            <v-btn icon>
              <v-icon color="blue lighten-1">mdi-information</v-icon>
            </v-btn>
          </v-list-item-action>
        </v-list-item>

        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-email-lock</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超級(jí)奶爸</v-list-item-subtitle>
          </v-list-item-content>

          <v-list-item-action>
            <v-btn icon>
              <v-icon color="blue lighten-1">mdi-information</v-icon>
            </v-btn>
          </v-list-item-action>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>

數(shù)據(jù)驅(qū)動(dòng)生成版

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-item-group v-model="selected">
        <v-list-item v-for="link in links" :key="link.text">
          <v-list-item-avatar>
            <v-icon color="amber">{{ link.icon }}</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>


<script>
export default {
  data() {
    return {
      selected: null,
      links: [
        { icon: "mdi-information", text: "首頁", route: "/" },
        { icon: "mdi-qqchat", text: "QQ", route: "/qq" },
        { icon: "mdi-wechat", text: "微信", route: "/wechat" },
      ],
    };
  },
};
</script>

5. 列表的嵌套

<v-list rounded>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-clock</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>歷史記錄</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-icon>
            <v-icon>mdi-email</v-icon>
          </v-list-item-icon>
          <v-list-item-content>
            <v-list-item-title>聯(lián)系我們</v-list-item-title>
            <v-list-item-group sub-group>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon>mdi-home</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>上海事業(yè)部</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
              <v-list-item>
                <v-list-item-icon>
                  <v-icon>mdi-home</v-icon>
                </v-list-item-icon>
                <v-list-item-content>
                  <v-list-item-title>廣州事業(yè)部</v-list-item-title>
                </v-list-item-content>
              </v-list-item>
            </v-list-item-group>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

6. 列表多選 multiple

    <v-list>
      <v-list-item-group multiple>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超級(jí)奶爸</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="red">mdi-heart</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>anny</v-list-item-title>
            <v-list-item-subtitle>Dec 8,2014 可愛寶寶</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

7. 可擴(kuò)展列表插槽 v-slot:activator

列表可以包含一組項(xiàng)目迟隅，這些項(xiàng)目將利用 v-item-group 的激活器插槽在點(diǎn)擊時(shí)顯示但骨。在 v-navigation-drawer 組件中也使用了擴(kuò)展列表.

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-group no-action>
        <template v-slot:activator>
          <v-list-item-content>
            <v-list-item-title>用戶信息</v-list-item-title>
          </v-list-item-content>
        </template>
        <v-list-item-group>
          <v-list-item>
            <v-list-item-avatar>
              <v-icon color="amber">mdi-gesture-tap-button</v-icon>
            </v-list-item-avatar>
            <v-list-item-content>
              <v-list-item-title>熊爸天下200</v-list-item-title>
              <v-list-item-subtitle>Jan 10,2014 超級(jí)奶爸</v-list-item-subtitle>
            </v-list-item-content>
          </v-list-item>
        </v-list-item-group>
      </v-list-group>
    </v-list>
  </v-card>
</template>

8. 帶操作的列表

利用 v-list-item-group，輕松將操作連接到您的磁貼玻淑。

    <v-list>
      <v-list-item-group>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下200</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超級(jí)奶爸</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <template v-slot:default="{ active }">
            <v-list-item-action>
              <v-checkbox :input-value="active"></v-checkbox>
            </v-list-item-action>

            <v-list-item-content>
              <v-list-item-title>安全</v-list-item-title>
              <v-list-item-subtitle>保存以上信息</v-list-item-subtitle>
            </v-list-item-content>
          </template>
        </v-list-item>
      </v-list-item-group>
    </v-list>

9. 列表禁用 disabled

10. 列表標(biāo)題 subheader

    <v-list subheader>
      <v-subheader>用戶信息</v-subheader>
      <v-list-item-group multiple>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="amber">mdi-gesture-tap-button</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>熊爸天下</v-list-item-title>
            <v-list-item-subtitle>Jan 10,2014 超級(jí)奶爸</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
        <v-list-item>
          <v-list-item-avatar>
            <v-icon color="red">mdi-heart</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>anny</v-list-item-title>
            <v-list-item-subtitle>Dec 8,2014 可愛寶寶</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>

11. 列表跳轉(zhuǎn)路由

我們只需要在 v-list-item上加上 to屬性綁定好路由即可

<template>
  <v-card class="mx-auto" max-width="400">
    <v-list>
      <v-list-item-group v-model="selected">
        <v-list-item v-for="link in links" :key="link.text" link :to="link.route">
          <v-list-item-avatar>
            <v-icon color="amber">{{ link.icon }}</v-icon>
          </v-list-item-avatar>
          <v-list-item-content>
            <v-list-item-title>{{ link.text }}</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list-item-group>
    </v-list>
  </v-card>
</template>


<script>
export default {
  data() {
    return {
      selected: null,
      links: [
        { icon: "mdi-information", text: "首頁", route: "/" },
        { icon: "mdi-qqchat", text: "QQ", route: "/qq" },
        { icon: "mdi-wechat", text: "微信", route: "/wechat" },
      ],
    };
  },
};
</script>

最后編輯于：2021.08.26 10:22:24

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者

人面猴
序言：七十年代末嗽冒，一起剝皮案震驚了整個(gè)濱河市呀伙，隨后出現(xiàn)的幾起案子补履，更是在濱河造成了極大的恐慌，老刑警劉巖剿另，帶你破解...
沈念sama閱讀 217,657評(píng)論 6贊 505
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件箫锤，死亡現(xiàn)場(chǎng)離奇詭異贬蛙，居然都是意外死亡，警方通過查閱死者的電腦和手機(jī)谚攒，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 92,889評(píng)論 3贊 394
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進(jìn)店門阳准，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人馏臭，你說我怎么就攤上這事野蝇。” “怎么了括儒？”我有些...
開封第一講書人閱讀 164,057評(píng)論 0贊 354
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵绕沈，是天一觀的道長(zhǎng)。經(jīng)常有香客問我帮寻，道長(zhǎng)乍狐，這世上最難降的妖魔是什么？我笑而不...
開封第一講書人閱讀 58,509評(píng)論 1贊 293
?港島之戀（遺憾婚禮）
正文為了忘掉前任固逗，我火速辦了婚禮浅蚪，結(jié)果婚禮上，老公的妹妹穿的比我還像新娘烫罩。我一直安慰自己惜傲，他們只是感情好，可當(dāng)我...
茶點(diǎn)故事閱讀 67,562評(píng)論 6贊 392
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布贝攒。她就那樣靜靜地躺著操漠，像睡著了一般。火紅的嫁衣襯著肌膚如雪饿这。梳的紋絲不亂的頭發(fā)上浊伙，一...
開封第一講書人閱讀 51,443評(píng)論 1贊 302
城市分裂傳說
那天，我揣著相機(jī)與錄音长捧，去河邊找鬼嚣鄙。笑死，一個(gè)胖子當(dāng)著我的面吹牛串结，可吹牛的內(nèi)容都是我干的哑子。我是一名探鬼主播，決...
沈念sama閱讀 40,251評(píng)論 3贊 418
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼肌割，長(zhǎng)吁一口氣：“原來是場(chǎng)噩夢(mèng)啊……” “哼卧蜓！你這毒婦竟也來了？” 一聲冷哼從身側(cè)響起把敞，我...
開封第一講書人閱讀 39,129評(píng)論 0贊 276
萬榮殺人案實(shí)錄
序言：老撾萬榮一對(duì)情侶失蹤弥奸，失蹤者是張志新（化名）和其女友劉穎，沒想到半個(gè)月后奋早，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體盛霎，經(jīng)...
沈念sama閱讀 45,561評(píng)論 1贊 314
?護(hù)林員之死
正文獨(dú)居荒郊野嶺守林人離奇死亡赠橙，尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點(diǎn)故事閱讀 37,779評(píng)論 3贊 335
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了愤炸。大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片期揪。...
茶點(diǎn)故事閱讀 39,902評(píng)論 1贊 348
活死人
序言：一個(gè)原本活蹦亂跳的男人離奇死亡，死狀恐怖规个，靈堂內(nèi)的尸體忽然破棺而出凤薛，到底是詐尸還是另有隱情，我是刑警寧澤诞仓，帶...
沈念sama閱讀 35,621評(píng)論 5贊 345
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布枉侧，位于F島的核電站，受9級(jí)特大地震影響狂芋，放射性物質(zhì)發(fā)生泄漏榨馁。R本人自食惡果不足惜，卻給世界環(huán)境...
茶點(diǎn)故事閱讀 41,220評(píng)論 3贊 328
男人毒藥：我在死后第九天來索命
文/蒙蒙一帜矾、第九天我趴在偏房一處隱蔽的房頂上張望翼虫。院中可真熱鬧，春花似錦屡萤、人聲如沸珍剑。這莊子的主人今日做“春日...
開封第一講書人閱讀 31,838評(píng)論 0贊 22
一樁弒父案死陆，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽招拙。三九已至，卻和暖如春措译，著一層夾襖步出監(jiān)牢的瞬間别凤，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 32,971評(píng)論 1贊 269
情欲美人皮
我被黑心中介騙來泰國(guó)打工领虹，沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留规哪，地道東北人。一個(gè)月前我還...
沈念sama閱讀 48,025評(píng)論 2贊 370
代替公主和親
正文我出身青樓塌衰，卻偏偏與公主長(zhǎng)得像诉稍，于是被迫代替她去往敵國(guó)和親。傳聞我的和親對(duì)象是個(gè)殘疾皇子最疆，可洞房花燭夜當(dāng)晚...
茶點(diǎn)故事閱讀 44,843評(píng)論 2贊 354

Material Design風(fēng)格神框架vuetify 學(xué)習(xí)筆記(三) 基礎(chǔ)組件1 按鈕 圖標(biāo) 列表

一. 按鈕 (V-BTN)

1. 按鈕的顏色

2. 按鈕樣式

(1). 扁平化按鈕 (depressed )

(2). 透明背景按鈕 (plain )

(3). 輪廓線按鈕 (outlined)

(4). 圓角按鈕 (rounded )

(5). 圓形浮動(dòng)按鈕 (fab)

(6). 文本按鈕 (text)

(7). 凸起的按鈕 raised

(8). 瓷磚按鈕(無圓角按鈕) tile

3 . 圖標(biāo)按鈕

4. 按鈕的尺寸

5. 按鈕加載中和失效

6. 按鈕點(diǎn)擊事件

7. 超鏈接 href

二. 圖標(biāo) v-icon

1. 圖標(biāo)的顏色

2. 和按鈕結(jié)合使用

三. 列表 v-list

1. 列表相關(guān)標(biāo)簽

(1). 列表標(biāo)簽 v-list

(2). 列表組標(biāo)簽 v-list-group

重要屬性

(3). 列表項(xiàng)目組 v-list-item-group

重要屬性

(4). 列表項(xiàng)目 v-list-item

重要屬性

(5). 列表項(xiàng)目?jī)?nèi)容 v-list-item-content

(6). 列表項(xiàng)目頭像 v-list-item-avatar

重要屬性

(7). 列表項(xiàng)目圖標(biāo) v-list-item-icon

(8). 列表項(xiàng)目標(biāo)題 v-list-item-title

(9). 列表項(xiàng)目副標(biāo)題 v-list-item-subtitle

(10). 列表項(xiàng)目動(dòng)作插槽 v-list-item-action

(11). 列表項(xiàng)目動(dòng)作插槽文本 v-list-item-action-text

2. v-list-item的單行/雙行/三行

3. 列表的樣式

(1). 緊湊型列表 dense

(2). 扁平化列表 flat

(3). 圓角風(fēng)格

(4). 各種形狀風(fēng)格 shaped

4. 列表的典型的應(yīng)用

數(shù)據(jù)驅(qū)動(dòng)生成版

5. 列表的嵌套

6. 列表多選 multiple

7. 可擴(kuò)展列表插槽 v-slot:activator

8. 帶操作的列表

9. 列表禁用 disabled

10. 列表標(biāo)題 subheader

11. 列表跳轉(zhuǎn)路由

推薦閱讀更多精彩內(nèi)容

Material Design風(fēng)格神框架vuetify 學(xué)習(xí)筆記(三) 基礎(chǔ)組件1 按鈕圖標(biāo) 列表