LoginSignup
9
5

More than 3 years have passed since last update.

@rubytomato@github(渡邉 真)

Vuetify.js 2.2のSheet, Alert, Avatar, Badge, Iconコンポーネントについて

Last updated at Posted at 2020-01-24

概要

Sheet、Alert、Avatar、Badge、Iconコンポーネントの初歩的な使い方のまとめです。

環境

  • Windows 10 Professional 1909
  • Node.js 12.14.1
  • Vue.js 2.6.11
  • Vuetify.js 2.2.8 (投稿時は2.2.4)

参考

Sheets

v-sheetコンポーネントは単体で使用する他に、他のコンポーネント(たとえばv-alert, v-btn, v-cardなど)のベースになる機能を提供しています。

Props

VSheet

VSheet ---- BindsAttrs
       `--- Colorable
       `--- Elevatable
       `--- Measurable
       `--- Themeable
name type default relation src
VSheet tag string 'div' 'div'
tile boolean false
Colorable color string undefined
Elevatable elevation number or string undefined
Measurable height number or string undefined
max-height number or string undefined
max-width number or string undefined
min-height number or string undefined
min-width number or string undefined
width number or string undefined
Themeable dark boolean false null
light boolean false null

実装例

テーマ

dark

<v-sheet dark height="100" max-width="auto" class="pa-1 mx-auto">dark</v-sheet>
<v-sheet dark tile height="100" max-width="auto" class="pa-1 mx-auto">dark, tile</v-sheet>
<v-sheet dark elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">dark, elevation=10</v-sheet>
<v-sheet dark tile elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">dark, tile, elevation=10</v-sheet>

<v-sheet dark color="primary" height="80" width="80" class="pa-1 ma-2">primary</v-sheet>

sheet-dark.png

light

<v-sheet light height="100" max-width="auto" class="pa-1 mx-auto">light</v-sheet>
<v-sheet light tile height="100" max-width="auto" class="pa-1 mx-auto">light, tile</v-sheet>
<v-sheet light elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">light, elevation=10</v-sheet>
<v-sheet light tile elevation="10" height="100" max-width="auto" class="pa-1 mx-auto">light, tile, elevation=10</v-sheet>

<v-sheet light color="primary" height="80" width="80" class="pa-1 ma-2">primary</v-sheet>

sheet-light.png

カラー

<v-sheet color="red" height="80" width="80" class="pa-1 ma-2">red</v-sheet>
<v-sheet color="#EF5350" height="80" width="80" class="pa-1 ma-2">#EF5350</v-sheet>

sheet-color.png

エレベーション

elevationプロパティには0から24までの数値を指定できます。数値が大きくなるほどシートが浮き上がって見えます。

<v-sheet height="80" width="80" elevation="0" class="pa-1 ma-4">0</v-sheet>
<v-sheet height="80" width="80" elevation="24" class="pa-1 ma-4">24</v-sheet>

sheet-elevation.png

サイズ

height / width

固定サイズです。

<v-sheet height="250" width="350" class="pa-1 ma-1 d-inline-block">Phasellus tempus. </v-sheet>
<v-divider class="my-3"></v-divider>
<v-sheet height="250" width="350" class="pa-1 ma-1 d-inline-block">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-sheet>

sheet-height.png

min-height / min-width

最小サイズを指定します。

<v-sheet min-height="250" min-width="350" class="pa-1 ma-1 d-inline-block">Phasellus tempus. </v-sheet>
<v-divider class="my-3"></v-divider>
<v-sheet min-height="250" min-width="350" class="pa-1 ma-1 d-inline-block">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-sheet>

sheet-min-height.png

max-height / max-width

最大サイズを指定します。

<v-sheet max-height="250" max-width="350" class="pa-1 ma-1 d-inline-block">Phasellus tempus. </v-sheet>
<v-divider class="my-3"></v-divider>
<v-sheet max-height="250" max-width="350" class="pa-1 ma-1 d-inline-block">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. Phasellus nec sem in justo pellentesque facilisis. Phasellus magna. Cras risus ipsum, faucibus ut, ullamcorper id, varius ac, leo. In hac habitasse platea dictumst. Praesent turpis.
</v-sheet>

sheet-max-height.png

タグ

<v-sheet tag="main" max-width="350" elevation="3" class="pa-2 mx-auto">
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo.
</v-sheet>

tagプロパティで指定した要素で描画されます。

<main class="pa-2 mx-auto v-sheet theme--light elevation-3" style="max-width: 350px;"> Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo. Pellentesque posuere. Curabitur ligula sapien, tincidunt non, euismod vitae, posuere imperdiet, leo. </main>

Alerts

Props

VAlert

VAlert ---- VSheet ---- BindsAttrs
       |           `--- Colorable
       |           `--- Elevatable
       |           `--- Measurable
       |           `--- Themeable
       |
       `--- Toggleable
       `--- Transitionable
name type default relation src
VAlert border string undefined 'top', 'right', 'bottom', 'left'
close-label string '$vuetify.close' dismissible '$vuetify.close'
colored-border boolean false color
dense boolean false
dismissible boolean false close slot
icon boolean or string undefined ''
outlined boolean false
prominent boolean false
text boolean false color
type string undefined 'success', 'info', 'warning', 'error'
value boolean true true
VSheet tag string 'div' 'div'
tile boolean false
Colorable color string undefined
Elevatable elevation number or string undefined
Measurable height number or string undefined
max-height number or string undefined
max-width number or string undefined
min-height number or string undefined
min-width number or string undefined
width number or string undefined
Themeable dark boolean false null
light boolean false null
Toggleable value boolean -
Transitionable mode string undefined
origin string undefined
transition string undefined

実装例

テーマ

dark

<v-alert dark>dark</v-alert>
<v-alert dark elevation="10">dark, elevation=10</v-alert>
<v-alert dark color="success">dark, success</v-alert>
<v-alert dark color="info">dark, info</v-alert>
<v-alert dark color="warning">dark, warning</v-alert>
<v-alert dark color="error">dark, error</v-alert>

alert-dark.png

light

<v-alert light>light</v-alert>
<v-alert light elevation="10">light, elevation=10</v-alert>
<v-alert light color="success">light, success</v-alert>
<v-alert light color="info">light, info</v-alert>
<v-alert light color="warning">light, warning</v-alert>
<v-alert light color="error">light, error</v-alert>

alert-light.png

カラー

<v-alert color="red" icon="mdi-vuetify">red</v-alert>

alert-color.png

エレベーション

<v-alert icon="mdi-vuetify" elevation="0">0</v-alert>
<v-alert icon="mdi-vuetify" elevation="24">24</v-alert>

alert-elevation.png

タイプ

typeプロパティに指定できる値はsuccess、info、warning、errorの4つです。指定するとタイプに応じてアイコンも表示されます。

<v-alert type="success" prominent>success</v-alert>
<v-alert type="info" prominent>info</v-alert>
<v-alert type="warning" prominent>warning</v-alert>
<v-alert type="error" prominent>error</v-alert>

outlined

<v-alert type="success" outlined prominent>success</v-alert>
<v-alert type="info" outlined prominent>info</v-alert>
<v-alert type="warning" outlined prominent>warning</v-alert>
<v-alert type="error" outlined prominent>error</v-alert>

alert-type.png

ボーダー

borderプロパティに指定できる値はtop、left、bottom、rightの4つです。同時にcolored-borderプロパティを指定するとボーダーに色が付きます。

<v-alert border="top">top</v-alert>
<v-alert border="left">left</v-alert>
<v-alert border="bottom">bottom</v-alert>
<v-alert border="right">right</v-alert>

alert-border.png

colored-border

<v-alert color="red" border="top" colored-border>top, red</v-alert>
<v-alert color="green" border="left" colored-border>left, green</v-alert>
<v-alert color="blue" border="bottom" colored-border>bottom, blue</v-alert>
<v-alert color="black" border="right" colored-border>right, black</v-alert>

alert-colored-border.png

形状

<v-alert tile>tile</v-alert>
<v-alert dense>dense</v-alert>
<v-alert outlined>outlined</v-alert>
<v-alert text>text</v-alert>
<v-alert dismissible>dismissible</v-alert>
<v-alert icon="mdi-vuetify">icon</v-alert>

alert-shape.png

組み合わせ

プロパティの組み合わせの一例です。

<v-alert color="pink accent-3" icon="mdi-vuetify" border="bottom" outlined dismissible elevation="3">icon, border, outlined, dismissible, elevation</v-alert>
<v-alert color="orange accent-3" icon="mdi-vuetify" border="bottom" tile text dismissible elevation="3">icon, border, tile, text dismissible, elevation</v-alert>
<v-alert color="cyan accent-3" icon="mdi-vuetify" border="bottom" dismissible elevation="3">icon, border, dismissible, elevation</v-alert>
<v-alert color="lime accent-3" icon="mdi-vuetify" border="bottom" tile dismissible>icon, border, tile, dismissible</v-alert>

alert-conbi.png

プロミネント

iconプロパティで指定したアイコンを大きくかつ中央に表示します。

<v-alert icon="mdi-vuetify" outlined prominent min-height="300" width="auto">
Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
</v-alert>

左側がprominentプロパティを指定したアラートで、右側は指定なしのアラートです。
alert-prominent.png

トランジション

transitionプロパティを明示的に指定しなくてもデフォルトでトランジションは有効です。
transitionプロパティにscale-transition、fade-transition、slide-x-transition、slide-y-transition、scroll-x-transition、scroll-y-transitionなどがあります。

<v-alert color="pink" dark border="top" icon="mdi-home" transition="scale-transition" prominent dismissible>
<v-subheader>scale-transition</v-subheader>
Phasellus tempus. Fusce ac felis sit amet ligula pharetra condimentum. In dui magna, posuere eget, vestibulum et, tempor auctor, justo.
</v-alert>

下記のgifアニメーションはfade-transitionのものです。
alert-fade.gif

Slots

prepend
アラート開始位置に表示するアイコンのスロット。

append
アラート終了位置に表示するアイコンのスロット。

close
アラートを閉じるアイコンのスロット。

<v-alert ref="alert" outlined transition="fade-transition" @input="inputEvent">
    <template v-slot:prepend>
        <v-icon size="32" color="green" left>mdi-arrow-left-bold</v-icon>
    </template>
    <template v-slot:append>
        <v-icon size="32" color="green" right>mdi-arrow-right-bold</v-icon>
    </template>
    <template v-slot:close>
        <v-btn icon @click="toggle">
            <v-icon size="32" color="red">mdi-close-box</v-icon>
        </v-btn>
    </template>
    Maecenas ullamcorper, dui et placerat feugiat, eros pede varius nisi, condimentum viverra felis nunc et lorem. Duis vel nibh at velit scelerisque suscipit. Praesent blandit laoreet nibh. Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc, eu sollicitudin urna dolor sagittis lacus. Etiam sollicitudin, ipsum eu pulvinar rutrum, tellus ipsum laoreet sapien, quis venenatis ante odio sit amet eros.
</v-alert>
<v-btn @click="toggle">toggle</v-btn>

alert-slot.png

Functions

toggle
アラートのアクティブ状態を切り替えます。 閉じるスロットで使用でき、非表示のクリックアクションとして使用されます。

methods: {
  toggle() {
    this.$refs.alert.toggle();
  },
  inputEvent(val) {
    // eslint-disable-next-line no-console
    console.log('input', val);
  }
}

クリックイベントに直接記述する方法もあります。

<v-btn icon @click="$refs.alert.toggle()">
    <v-icon size="32" color="red">mdi-close-box</v-icon>
</v-btn>

Avatars

Props

VAvatar

VAvatar  ---- Colorable
         `--- Measurable
name type default relation src
VAvatar left boolean false
right boolean false
size number or string 48 48
tile boolean false
Colorable color string undefined
Measurable height number or string undefined
max-height number or string undefined
max-width number or string undefined
min-height number or string undefined
min-width number or string undefined
width number or string undefined

実装例

スロット

icon

<v-avatar color="teal" class="ma-2">
  <v-icon class="white--text">mdi-alert</v-icon>
</v-avatar>

<v-avatar tile color="teal" class="ma-2">
  <v-icon class="white--text">mdi-alert</v-icon>
</v-avatar>

tag

<v-avatar color="cyan" class="ma-2">
  <span class="white--text headline">Aa</span>
</v-avatar>

<v-avatar tile color="cyan" class="ma-2">
  <span class="white--text headline">Aa</span>
</v-avatar>

image

<v-avatar color="indigo" class="ma-2">
  <v-img :src="require('@/assets/logo.png')" alt="vuetify.js"></v-img>
</v-avatar>

<v-avatar tile color="indigo" class="ma-2">
  <v-img :src="require('@/assets/logo.png')" alt="vuetify.js"></v-img>
</v-avatar>

avatar-slot.png

カラー

<v-avatar color="red" class="ma-2">
  <v-icon>mdi-star</v-icon>
</v-avatar>

avatar-color.png

サイズ

サイズ指定はsizeかheightとwidthプロパティで行います。

<v-avatar size="32" color="teal" class="ma-2">
  <span class="white--text headline">32</span>
</v-avatar>

height / width

<v-avatar height="32" width="64" color="teal" class="ma-2">
  <span class="white--text headline">32</span>
</v-avatar>

左側の4つがsizeプロパティを使ったもの、右側の4つがheight、widthプロパティを使ったものです。
avatar-size.png

v-chipとの組み合わせ

leftおよびrightプロパティでv-chip内のアバターの位置を調整できます。

left

<v-chip class="ma-2">
  <v-avatar left color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>

<!-- left無し -->
<v-chip class="ma-2">
  <v-avatar color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>

right

<!-- rightなし -->
<v-chip class="ma-2">
  Alarm
  <v-avatar color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>

<v-chip class="ma-2">
  Alarm
  <v-avatar right color="green accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>

avatar-chip.png

pill

v-chipの`pillプロパティを指定するとアバター周りのマージンが無くなります。

left

<v-chip pill class="ma-2">
  <v-avatar left color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>

<v-chip pill class="ma-2">
  <v-avatar color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
  Alarm
</v-chip>

right

<v-chip pill class="ma-2">
  Alarm
  <v-avatar color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>

<v-chip pill class="ma-2">
  Alarm
  <v-avatar right color="blue accent-2">
    <v-icon>mdi-alarm</v-icon>
  </v-avatar>
</v-chip>

avatar-chip-pill.png

v-btnとの組み合わせ

<v-btn class="ma-2">
  <v-avatar size="32" class="mr-2">
    <v-icon>mdi-folder-search-outline</v-icon>
  </v-avatar>
  Search
</v-btn>

<v-btn class="ma-2">
  <v-avatar size="32" class="mr-2">
    <span class="grey--text">(56)</span>
  </v-avatar>
  Search
</v-btn>

avatar-botton.png

※APIドキュメントにはv-btnでもleft、rightプロパティが使えると書かれていますが、動作確認ではCSSがあたっていないようで期待通りの動作にはなりませんでした。

Designates that the avatar is on the left side of a component. This is hooked into by components such as v-chip and v-btn.

Badges

Props

VBadge

VBadge  ---- Colorable
        `--- Themeable
        `--- Toggleable
        `--- Transitionable
        `--- Positionable
name type default relation src
VBadge avatar boolean false
bordered boolean false dot
color string 'primary' 'primary'
content any undefined
dot boolean false
label string '$vuetify.badge' '$vuetify.badge'
icon string undefined
inline boolean false left
offset-x number or string undefined
offset-y number or string undefined
overlap boolean false
tile boolean false
transition string 'scale-rotate-transition' 'scale-rotate-transition'
value any true true
Colorable color string -
Themeable dark boolean false null
light boolean false null
Toggleable value boolean -
Transitionable mode string undefined
origin string undefined
transition string -
Positionable bottom boolean false
left boolean false

実装例

テーマ

dark

<v-badge dark icon="mdi-check" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark bordered icon="mdi-check" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark overlap icon="mdi-check" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark bordered content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark overlap content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark tile content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark tile overlap content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>
<v-badge dark inline content="new" color="blue">
  <v-icon dark x-large>mdi-email</v-icon>
</v-badge>

badge-dark.png

light

<v-badge light icon="mdi-check" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light bordered icon="mdi-check" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light overlap icon="mdi-check" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light bordered content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light overlap content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light tile content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light tile overlap content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>
<v-badge light inline content="new" color="blue">
  <v-icon light x-large>mdi-email</v-icon>
</v-badge>

badge-light.png

カラー

<v-badge light icon="mdi-check" color="red">
    <v-icon light x-large>mdi-email</v-icon>
</v-badge>

badge-color.png

ポジション

<v-badge left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge bottom left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge bottom color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>

overlap

<v-badge overlap left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge overlap color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge overlap bottom left color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>
<v-badge overlap bottom color="blue" icon="mdi-bell">
  <v-icon x-large>mdi-home</v-icon>
</v-badge>

左側の4つがoverlap無しのもの、右側の4つがoverlap有りのものです。
badge-position.png

オフセット

<v-badge icon="mdi-check" offset-x="30" offset-y="18" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<v-badge icon="mdi-check" bottom offset-x="30" offset-y="18" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

badge-offset.png

トランジション

<p>default</p>
<v-badge :value="trans" icon="mdi-check" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>fade</p>
<v-badge :value="trans" icon="mdi-check" transition="fade-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>scale</p>
<v-badge :value="trans" icon="mdi-check" transition="scale-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>slide-x</p>
<v-badge :value="trans" icon="mdi-check" transition="slide-x-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>slide-y</p>
<v-badge :value="trans" icon="mdi-check" transition="slide-y-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>scroll-x</p>
<v-badge :value="trans" icon="mdi-check" transition="scroll-x-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<p>scroll-y</p>
<v-badge :value="trans" icon="mdi-check" transition="scroll-y-transition" color="blue">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

badge-trans.gif

ドット、ホバー

<v-badge color="blue" icon="mdi-check" :dot="!dot">
    <v-hover v-model="dot">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>

<v-badge color="blue" content="new" :dot="!dot">
    <v-hover v-model="dot">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>

badge-dot.gif

<v-badge :value="hover" icon="mdi-check" transition="slide-x-reverse-transition">
    <v-hover v-model="hover">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>

<v-badge :value="hover" content="new" transition="slide-x-reverse-transition">
    <v-hover v-model="hover">
        <v-icon x-large>mdi-email</v-icon>
    </v-hover>
</v-badge>

badge-hover.gif

Slots

badge
バッジのコンテンツに使用されるスロット。

<v-badge color="blue" avatar>
    <template v-slot:badge>
        <v-avatar>
            <v-img src="https://cdn.vuetifyjs.com/images/logos/v.png"></v-img>
        </v-avatar>
    </template>
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

<v-badge color="blue">
    <template v-slot:badge>
        <div>{{ newMessage }}</div>
    </template>
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

上記の書き方は次のように書き直すことができます。

<v-badge color="blue" :content="newMessage">
    <v-icon x-large>mdi-email</v-icon>
</v-badge>

badge-slot.png

Icons

Props

VIcon

VIcon  ---- BindsAttrs
       `--- Colorable
       `--- Sizeable
       `--- Themeable
name type default relation src
VIcon dense boolean false
disabled boolean false
left boolean false
right boolean false
size number or string undefined
tag string 'i' 'i'
Colorable color string undefined
Sizeable large boolean false
small boolean false
x-large boolean false
x-small boolean false
Themeable dark boolean false null
light boolean false null

実装例

テーマ

dark

<v-icon dark size="48" class="ma-2">mdi-home</v-icon>
<v-icon dark size="48" class="ma-2">mdi-email</v-icon>
<v-icon dark size="48" class="ma-2">mdi-cloud</v-icon>
<v-icon dark size="48" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon dark size="48" class="ma-2">mdi-check-outline</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon dark size="48" color="info" class="ma-2">mdi-home</v-icon>
<v-icon dark size="48" color="warning" class="ma-2">mdi-email</v-icon>
<v-icon dark size="48" color="error" class="ma-2">mdi-cloud</v-icon>
<v-icon dark size="48" color="secondary" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon dark size="48" color="primary" class="ma-2">mdi-check-outline</v-icon>

icon-dark.png

light

<v-icon light size="48" class="ma-2">mdi-home</v-icon>
<v-icon light size="48" class="ma-2">mdi-email</v-icon>
<v-icon light size="48" class="ma-2">mdi-cloud</v-icon>
<v-icon light size="48" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon light size="48" class="ma-2">mdi-check-outline</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon light size="48" color="info" class="ma-2">mdi-home</v-icon>
<v-icon light size="48" color="warning" class="ma-2">mdi-email</v-icon>
<v-icon light size="48" color="error" class="ma-2">mdi-cloud</v-icon>
<v-icon light size="48" color="secondary" class="ma-2">mdi-numeric-7-box</v-icon>
<v-icon light size="48" color="primary" class="ma-2">mdi-check-outline</v-icon>

icon-light.png

カラー

<v-icon size="48" color="red" class="ma-2">mdi-monitor-dashboard</v-icon>

icon-color.png

サイズ

<v-icon color="blue" x-small class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" small class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" dense class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" large class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" x-large class="ma-2">mdi-check-circle</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon color="blue" size="12" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="16" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="20" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="24" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="36" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" size="40" class="ma-2">mdi-check-circle</v-icon>

左側の6個はx-small～x-largeプロパティを指定したアイコン、右側の6個はsizeプロパティを指定したアイコン。左右のアイコンの大きさが同じになるようにsizeを指定しています。
icon-size.png

無効化

<v-icon class="ma-2">mdi-check-circle</v-icon>
<v-icon disabled class="ma-2">mdi-check-circle</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon color="blue" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="blue" disabled class="ma-2">mdi-check-circle</v-icon>
<v-divider vertical class="mx-2"></v-divider>
<v-icon color="red" class="ma-2">mdi-check-circle</v-icon>
<v-icon color="red" disabled class="ma-2">mdi-check-circle</v-icon>

disabledプロパティを指定すると色が変わります。
icon-disabled.png

v-btnとの組み合わせ

leftおよびrightプロパティを指定するとv-btn内のアイコンの表示位置を調整できます。

left

<v-btn color="primary" class="ma-2">
  <v-icon left>mdi-check-circle</v-icon>
  Accept
</v-btn>
<!-- left無し -->
<v-btn color="primary" class="ma-2">
  <v-icon>mdi-check-circle</v-icon>
  Accept
</v-btn>

right

<v-btn color="primary" class="ma-2">
  Accept
  <v-icon right>mdi-check-circle</v-icon>
</v-btn>
<!-- right無し -->
<v-btn color="primary" class="ma-2">
  Accept
  <v-icon>mdi-check-circle</v-icon>
</v-btn>

disabled

<v-btn color="primary" class="ma-2" disabled>
  Accept
  <v-icon right disabled>mdi-check-circle</v-icon>
</v-btn>

icon-botton.png

Images

Props

VImg

VImg  ---- VResponsive ---- Measurable
name type default relation src
VImg alt string undefined
contain boolean false
eager boolean false
gradient string undefined
lazy-src string undefined
options object {} {root: undefined, rootMargin: undefined, threshold: undefined}
position string 'center center' 'center center'
sizes string undefined
src string or object undefined ''
srcset string undefined
transition boolean or string 'fade-transition' 'fade-transition'
VResponsive aspect-ratio string or number undefined
Measurable height number or string undefined
max-height number or string undefined
max-width number or string undefined
min-height number or string undefined
min-width number or string undefined
width number or string undefined

実装例

Slots

placeholder

Slot for image placeholder
画像プレースホルダーのスロット

9
5
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
9
5