[vue]Vuetify기초 Button / Icons 정리 (2)

 

 

<PREclass="brush:js;">삽입코드

<template>

	<div class="home">

		<h1>HomePage</h1>

        <!-- 일반 버튼-->

        <v-btn>click me</v-btn>

        <!-- 색상 핑크- 글씨 하얀색 버튼-->

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

        <!-- 색상 핑크- 글씨 기본 버튼-->

        <v-btn class="pink">click me</v-btn>

        <!-- 클릭 할 때 누르는 이펙트 없는 버튼-->

        <v-btn depressed color="pink">click me</v-btn>

        <!-- 뒷배경 날리는 심플 버튼 -->

        <v-btn flat color="pink">click me</v-btn>

        <!-- 아이콘을 넣은 클릭 버튼-->

        <v-btn depressed color="pink white--text">

        <v-icon>email</v-icon>

        <!-- 아이콘 옆 문언 추가-->

        <spen>EMAIL ME</spen>

        </v-btn>



        <!-- 아이콘을 넣은 클릭 버튼　스몰 사이즈-->

        <v-btn depressed small color="pink white--text">

        <!-- 아이콘 위치 -->

        <v-icon left small>email</v-icon>

        <!-- 아이콘 옆 문언 추가-->

        <spen>EMAIL ME</spen>

        </v-btn>



        <!-- 아이콘을 넣은 클릭 버튼　라지 사이즈-->

        <v-btn depressed large color="pink white--text">

        <!-- 아이콘 위치 -->

        <v-icon right large>email</v-icon>

        <spen>EMAIL ME</spen>

        </v-btn>



        <!-- 아이콘을 넣은 클릭 버튼　라지 사이즈-->

        <v-btn depressed small dark color="purple">

        <!-- 아이콘 위치 -->

        <v-icon>favorite</v-icon>

        </v-btn>

	</div>

</template>



<script>

export default {};

</script>

 

https://vuetifyjs.com/en/components/buttons#button

Button Component — Vuetify.js

 

 

*Vuetify color 태그 정리

https://blog-han.tistory.com/43

[vue] Vuetify 기초 color / font 태그 정리 (1)