카드형태 v-card
이미지 v-img
카드제목 v-card-title
카드내용 v-card-text
버튼공간 v-card-actions
로렘픽숨 웹사이트 임의의 이미지를 규격에 맞게표시;
로렘픽숨에서 이미지를 가지고오고싶다면
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos
<v-img src="https://picsum.photos/id/193/400/300"></v-img><v-img src="https://picsum.photos/id/193/400/300"></v-img>
https://picsum.photos/ 는 로렘픽숨의 주소 id 다음/193은 #193되어져있는것을 들고온것이다
400/300은 이미지크기이다 가로세로
카드사용시
Card component — Vuetify (vuetifyjs.com)
Card component
The v-card component is a versatile component that can be used for anything from a panel to a static image.
vuetifyjs.com
템플릿이나 스크립트가 나오는데 템플릿을 전체를 복붙하면 위의 카드형식이나온다
스크립트는 data만 사용하면된다
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
<title>Document</title>
</head>
<body>
<div id="app">
<v-app>
<!-- //카드요소사용 -->
<!-- loading:로딩값받아옴 mx:위아래마진넣음 max-width:최대크기너비지정-->
<v-card
:loading="loading"
class="mx-auto my-12"
max-width="374"
>
<!-- progress-linear 프로그래스 바 디자인
지우면프로그레스바없고 파란바가뜸
컴포넌트없지만 실행가능 템플릿슬롯으로 접근가능-->
<!-- 슬롯이름 프로그레스인템플릿접근해서 안의내용을보여줌 -->
<!--슬로사용 -->
<template slot="progress">
<v-progress-linear
color="deep-purple"
height="10"
indeterminate
></v-progress-linear>
</template>
<!-- 이미지 -->
<v-img
height="250"
src="https://cdn.vuetifyjs.com/images/cards/cooking.png"
></v-img>
<!-- 타이틀 -->
<v-card-title>Cafe Badilico</v-card-title>
<v-card-text>
<v-row
align="center"
class="mx-0"
>
<!-- 레이팅 :value:벨류값넣어주면 그안값을 별모양으로바꿔줌 -->
<v-rating
:value="4.5"
color="amber"
dense
half-increments
readonly
size="14"
></v-rating>
<!-- 위의별벨류값들을 적어줌 -->
<div class="grey--text ms-4">
4.5 (413)
</div>
</v-row>
<!-- 정보적어둠 섭타이틀로 -->
<div class="my-4 text-subtitle-1">
$ • Italian, Cafe
<!-- 부산,카페 -->
</div>
<!-- 설명 -->
<div>Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.</div>
</v-card-text>
<!-- 선 -->
<v-divider class="mx-4"></v-divider>
<!-- 정보 예약가능시간 -->
<v-card-title>
Tonight's availability</v-card-title>
<v-card-text>
<!-- chipgoup 뭔지 -->
<!-- v-modle액티브클래스속성안에다 선택시디자인넣을수있게 -->
<v-chip-group
v-model="selection"
active-class="deep-purple accent-4 white--text"
column
>
<v-chip>5:30PM</v-chip>
<v-chip>7:30PM</v-chip>
<v-chip>8:00PM</v-chip>
<v-chip>9:00PM</v-chip>
</v-chip-group>
</v-card-text>
<!-- 텍스트있는버튼 클릭시 reserve메소드실행되게 -->
<v-card-actions>
<v-btn
color="deep-purple lighten-2"
text
@click="reserve"
>
Reserve
</v-btn>
</v-card-actions>
</v-card>
</v-app>
</div>
<script>
new Vue({
el:"#app",
vuetify : new Vuetify(),
data: () => ({
loading: false,//현재로딩거짓으로
selection: 1, //셀렉션 처음1
}),
methods: {
reserve () {//로딩을 트루로만들고 셋타임아웃사용해서 2초뒤 로딩 거짓으로 바꾸기
//현재로딩상태 거짓 들어가있음 셀렉션선택했을때 처음1
//로딩은 카드자체 로딩들어가있음 v-card안 :loading="loading" 처음거짓버튼누르면 트루로바뀜 트루되면 프로그래스바디자인보임
this.loading = true
setTimeout(() => (this.loading = false), 2000)
},
},
})
</script>
</body>
</html>위처럼 코드를 복붙하면 된다
템플릿사용은 컴포넌트사용할때 여서 적어져있는것임 데이터부분과 메소드부분을 복붙하면 로딩이뜬다
아래 처럼 화면상에 똑같은카드형식이나온다
4.5 (413)
$ • Italian, Cafe
Small plates, salads & sandwiches - an intimate setting with 12 indoor seats plus patio seating.
'Vue' 카테고리의 다른 글
| 뷰티파이 그리드레이아웃 v-row v-col cols 기기별 정렬속성 (0) | 2022.03.29 |
|---|---|
| 뷰티파이로 google font 에서 icon들고오기 (0) | 2022.03.29 |
| 뷰티파이 cdn 사용법 디자인툴 material아이콘 (0) | 2022.03.28 |
| v-for (0) | 2022.03.21 |
| v-if v-else-if v-else (0) | 2022.03.21 |