Vuetify 커스터마이징 - 버튼 (v-btn)

Component Framework 중 Vuetify 커스터마이징을 소개하려 합니다.

Vuetify Document 를 보면 Slot, Props가 잘 소개되어 있는데요.

 

커스터마이징을 어떻게 해서 공용 컴포넌트로 활용할 수 있는지 소개합니다 :-)

 

제가 소개하는 커스터마이징 버튼은 다음과 같은 기능이 있습니다.

• 버튼 내 문자열과 색상, 사이즈, Weight 등 지정
• 아이콘 앞, 뒤 선택하여 삽입 및 색상, 사이즈 등 지정
• 버튼의 Background, Border 색상 지정
• 버튼의 가로, 세로 크기 지정
• 클릭 이벤트 지정
• Disabled 지정

데모로 보여드릴 샘플은 다음과 같이 표기됩니다.

커스터마이징 버튼 데모

 

코드는 두 개의 파일을 작성하였습니다.

• 데모 페이지를 표기하는 VuetifyDemoView.vue
• Vuetify 버튼을 커스터마이징한 CButton.vue

---

VuetifyDemoView 를 먼저 살펴본니다.

Template 영역입니다.

<template>
    <v-row class="pa-5" style="max-width: 500px;">
        <v-col
            v-for="item in buttonItems" :key="item.id"
            cols="4"
        >
            <c-button
                buttonWidth="120"
                buttonHeight="30"
                fontSize="12"
                :text="item.name"
                :backgroundColor="item.backgroundColor"
                :fontColor="item.fontColor"
                borderColor="#a5a7bc"
                :disabled="item.disabled"
                :isIconPre="computedIconLocation(item, 'prefix')"
                :isIconPost="computedIconLocation(item, 'postfix')"
                :icon="item.icon"
                iconSize="13"
                :iconColor="item.fontColor"
                @click="clickEvent(item)"
            />
        </v-col>
    </v-row>
</template>

 

Vuetify 의 v-row, v-col 을 이용하여 c-button 컴포넌트를 반복적으로 생성합니다.

c-button 의 각 props 는 아래에서 상세 설명 드립니다.

---

다음은 script 영역입니다.

<script>
import CButton from "@/components/common/CButton";

export default {
    name: "VuetifyDemoView",

    data: () => ({
        buttonItems : [
            { id: 1, name: "좌측 상단 버튼", backgroundColor: "f1f1f1", fontColor: "black"
                , disabled: false, icon: 'mdi-account-box', isIconPre: true },
            { id: 2, name: "중간 상단 버튼", backgroundColor: "red"
                , fontColor: "white", disabled: false, icon: 'mdi-account-details' },
            { id: 3, name: "우측 상단 버튼", backgroundColor: "blue"
                , fontColor: "white", disabled: false , icon: 'mdi-hat-fedora'},
            { id: 4, name: "좌측 하단 버튼", backgroundColor: "green"
                , fontColor: "white", disabled: false, icon: 'mdi-home-city' },
            { id: 5, name: "중간 하단 버튼", backgroundColor: "pink"
                , fontColor: "white", disabled: false, icon: 'mdi-hospital-box' },
            { id: 6, name: "우측 하단 버튼", backgroundColor: "white"
                , fontColor: "black", disabled: true, icon: 'mdi-human-greeting' }
        ]
    }),

    computed: {
        computedIconLocation() {
            return (buttonItem, location) => {
                if(location === 'prefix')
                    return (buttonItem.id % 2 === 1)
                else
                    return (buttonItem.id % 2 === 0)
            }
        }
    },

    components: {
        CButton
    },

    methods: {
        clickEvent(buttonItem) {
            alert(buttonItem.name)
        },
    }
}
</script>

• data → buttonItems : 각 버튼의 속성들
• computed → computedIconLocation : 아이콘 위치 결정
• components → CButton Import 처리
• methods → 버튼 클릭 시 버튼명 팝업 알림 처리

---

이제 C-Button 을 소개드립니다.

 

먼저 template 영역입니다.

<template>
    <v-btn
        class="c-button pa-0 ma-0"
        :color=backgroundColor
        :style="computedButtonStyle"
        :width="buttonWidth"
        :maxWidth="buttonWidth"
        :minWidth="buttonWidth"
        :height="buttonHeight"
        :maxHeight="buttonHeight"
        :minHeight="buttonHeight"
        :disabled="disabled"
        @click=click
    >
        <v-icon
            v-if="isIconPre === true"
            class="mr-1"
            :size="iconSize"
            :color="iconColor"
        >
            {{ icon }}
        </v-icon>
        <div :style="computedFontStyle">
            {{ text }}
        </div>
        <v-icon
            v-if="isIconPost === true"
            class="ml-1"
            :size="iconSize"
            :color="iconColor"
        >
            {{ icon }}
        </v-icon>
        <v-icon
            v-if="isIconOnly === true"
            :size="iconSize"
            :color="iconColor"
        >
            {{ icon }}
        </v-icon>
    </v-btn>
</template>

• v-btn → Vuetify 의 버튼 컴포넌트입니다. v-btn 을 커스터마이징 하는 것이 목표입니다.
• v-icon → Veutify 의 아이콘 컴포넌트입니다. 아이콘 표기 props 에 따라 삽입되는 html 입니다.
• div → {{ text }} 가 포함된 div 태그가 버튼 내 문자열일 표기합니다.

---

다음은 script 영역입니다.

<script>
export default {
    name: "CButton",

    props: {
        backgroundColor: {type: String},
        text: {type: String},
        fontColor: {type: String},
        fontWeight: {type: String, default: 'normal'},
        borderColor: {type: String},
        icon: {type: String},
        isIconPre: {type: Boolean, default: false},
        isIconPost: {type: Boolean, default: false},
        isIconOnly: {type: Boolean, default: false},
        iconSize: {type: String},
        iconColor: {type: String},
        buttonWidth: {type: String},
        buttonHeight: {type: String},
        fontSize: {type: String},
        disabled: {type: Boolean, default: false},
    },

    computed: {
        computedFontStyle() {
            let fontColor = this.fontColor
            if(this.disabled) {
                fontColor = '#aaa'
            }
            return {
                "color": fontColor,
                "font-size": this.fontSize + 'px',
                "letter-spacing": '-0.05em',
                "font-weight": this.fontWeight
            }
        },
        computedButtonStyle() {
            let borderColor = this.borderColor
            if(this.disabled) {
                borderColor = '#aaa'
            }
            return {
                border: "1px solid " + borderColor + " !important",
            }
        },
    },

    methods: {
        click() {
            this.$emit('click')
        }
    }
}
</script>

• props :
  backgroundColor → 버튼의 배경 색상
  text → 버튼 내 문자열
  fontColor → 버튼 내 문자열 색상
  fontWeight → 버튼 내 문자열 두께
  borderColor → 버튼 테두리 색상
  icon → 아이콘 값 (mdi, fas 등 v-icon 에 입력 가능한 문자열 값)
  isIconPre → 버튼 내부 안쪽에 아이콘 삽입
  isIconPost → 버튼 내부 뒤쪽에 아이콘 삽입
  isIconOnly → 아이콘만 표기할 경우 true 처리
  iconSize → 아이콘 크기
  buttonWidth → 버튼 너비 값
  buttonHeight → 버튼 높이 값
  fontSize → 문자열 폰트 크기
  disabled → 문자열 Disabled 처리
• computed :
  computedFontStyle → 문자열 스타일 처리
  computedButtonStyle → 버튼 스타일 처리
• methods :
  click → 버튼 클릭 시 이벤트 emit 처리

---

그리고 마지막으로 style 영역이 있습니다.

<style scoped>
.c-button {
    box-shadow: none !important;
    border-radius: 3px !important;
}
</style>

버튼의 그림자를 제거하고, 모서리를 약간 둥글게 처리하였습니다.

---

여기까지 Vuetify 의 v-btn 의 커스터마이징 처리를 소개드렸습니다.

Vuetify 컴포넌트 커스터마이징 소개 항목은 다음과 같이 많은데 ...

포스팅 작성이 완료되는데로 링크를 연결드리도록 하겠습니다.

 

---

Vuetify 커스터마이징 - Popup Dialog (v-dialog)

Vuetify 커스터마이징 - Check Box
Vuetify 커스터마이징 - Radio Button Group

Vuetify 커스터마이징 - Snack Bar (v-snackbar)
Vuetify 커스터마이징 - Switch (Toggle) (v-switch)

Vuetify 커스터마이징 - Text Field (v-text-field)
Vuetify 커스터마이징 - Data Table (v-data-table)

Vuetify 커스터마이징 - Tree Table (v-data-table)

Vuetify 커스터마이징 - Month Picker (v-date-picker)

Vuetify 커스터마이징 - Circular Progressbar (v-progress-circular)

Vuetify 커스터마이징 - Multi Selector (v-selector)

Vuetify 커스터마이징 - Single Selector (v-selector)
Vuetify 커스터마이징 - File Input (v-file-input)

---