[vuetify]sizing

https://vuetifyjs.com/en/styles/sizing/

Sizing — Vuetify

 

class="w-숫자"가 다 되는게 아니라 공식문서에 적힌 숫자들만 되는 것 같다. 다른 숫자 하면 컴포넌트가 원복 됨

<template>
    <div>
        <h1>Search Page (script setup 사용)</h1>
        <!-- <input type="text" v-model="searchQuery" name="searchInput" /> -->
        <v-text-field type="text" v-model="searchQuery" name="searchInput" placeholder="입력하세요" class="w-25 mx-auto" />
        <v-card flat class="pa-5">
            <div class="memo mx-auto w-50" v-html="highlightedText"></div>
        </v-card>
    </div>
</template>

v-text-field의 class w-25일때

v-text-field의 class w-50일때

v-text-field의 class w-40일때