Vuetify : 카드 내 2줄

Vuetify : 카드 내 2줄

테이블 컴포넌트를 배치하기 위해 새 행을 작성하려고 했는데 전체 행이 필요했습니다.

해봤어요

<v-col cols="12">
    <Table />
</v-col>

오른쪽으로 가다

나는 카드에 두 줄을 넣으려고 한다.

• 첫 번째 줄 (아이콘) + 제목 & 자막
• 제2열 표

<template>
    <v-container fluid class="my-5">
        <v-row>
            <v-col cols="12">
                <v-card elevation="2" class="d-flex">
                    <!-- Icon -->
                    <v-col cols="1">
                        <v-card-title>
                            <v-btn text color="black">
                                <v-icon left x-large>{{ icon }}</v-icon>
                            </v-btn>
                        </v-card-title>
                    </v-col>

                    <!-- Title & Subtitle -->
                    <v-col cols="11">
                        <v-card-title>
                            {{ title }}
                        </v-card-title>
                        <v-card-subtitle style="color: #757575"> {{ subtitle }} </v-card-subtitle>

                        <Table />
                    </v-col>
                </v-card>
            </v-col>
        </v-row>
    </v-container>
</template>

vuetify 구성 요소 v-card는 다음과 같은 여러 영역을 정의합니다.

<v-card>
  <v-card-title></v-card-title>
  <v-card-subtitle></v-card-subtitle>
  <v-card-text></v-card-text> <!-- this is the body of the card, where you should insert your table -->
  <v-card-actions></v-card-actions>
</v-card>

여기 이 컨셉의 샘플이 있습니다.https://codepen.io/jssDev-/pen/YzrVZjJ

각 카드의 하위 항목 내부에 그리드를 생성하고 오프셋을 사용하거나(아래 예) v-card 내부에 그리드를 생성하여 너비가 col-11인 두 번째 열에 카드 하위 항목을 중첩해야 합니다(다른 답변에서 @jssDev가 언급한 권장 카드 및 카드 하위 항목 중첩을 벗어나므로 권장되지 않음).

<v-card elevation="2">
  <v-card-title>
    <v-row>
      <v-col class="col-1">
        <v-btn text>
          <v-icon left x-large>
            {{ icon }}
          </v-icon>
        </v-btn>
      </v-col>
      <v-col class="col-11 text-start">
        {{ title }}
      </v-col>
    </v-row>
  </v-card-title>

  <v-card-subtitle>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        {{ subtitle }}
      </v-col>
    </v-row>
  </v-card-subtitle>

  <v-card-text>
    <v-row>
      <v-col class="offset-1 col-11 text-start">
        <v-data-table :headers="[]" :items="[]" />
      </v-col>
    </v-row>
  </v-card-text>
</v-card>

여기서 가장 큰 문제는 당신이 시각적으로 그리드 시스템을 이해하는 것입니다.

좋은 방법은 항상 열 안에 콜을 넣는 것입니다.

또한 vuetify는 카드를 구성하는 독자적인 방법이 있습니다.

A v-card는 4개의 파트로 구성되어 있습니다(각 파트는 언제든지 인스턴스화할 수 있습니다).

• v-card-actions(모든 동작 버튼(저장, 종료 등)이 포함된 컴포넌트)
• v-card-subtitle(카드의 개요)
• v-card-text(카드를 작성한 텍스트)
• v-card-title(카드의 개요)

예를 들어,v-card-text식탁을 차리세요.자동으로 12콜이 포함된 행으로 간주됩니다.

여기 당신의 문제를 해결하는 방법의 예가 있습니다.

<template>
  <v-card elevation="2">
      <v-card-title>
        <!-- first row of the card --> 
        <v-row>
          <!-- first col of the row (1/12)  -->
          <v-col cols="1">
            <v-btn text color="black">
              <v-icon left x-large>mdi-link</v-icon>
            </v-btn>
          </v-col>
          <!-- second col of the row (11/12)  -->
          <v-col cols="11">
            Title of the card
          </v-col>
        </v-row>

      </v-card-title>

    <!-- Title & Subtitle -->
      <v-card-subtitle style="color: #757575">
        <!-- second row of the card  -->
        <v-row class="justify-end">
          <!--   col inside the row 11/12 located at the end of the row with the flex class justify-end -->
          <v-col cols="11">
            Subtitle of the vcard
          </v-col>
        </v-row>
      </v-card-subtitle>

      <v-card-text>
        <v-data-table
          :headers="headers"
          :items="desserts"
          :items-per-page="5"
          class="elevation-1"
        ></v-data-table>
      </v-card-text>
  </v-card>
</template>

<script>
export default {
  name: "Hello",
  data () {
    return {
      headers: [
        {
          text: 'Dessert (100g serving)',
          align: 'start',
          sortable: false,
          value: 'name',
        },
        { text: 'Calories', value: 'calories' },
        { text: 'Fat (g)', value: 'fat' },
        { text: 'Carbs (g)', value: 'carbs' },
        { text: 'Protein (g)', value: 'protein' },
        { text: 'Iron (%)', value: 'iron' },
      ],
      desserts: [
        {
          name: 'Frozen Yogurt',
          calories: 159,
          fat: 6.0,
          carbs: 24,
          protein: 4.0,
          iron: '1%',
        },
        {
          name: 'Ice cream sandwich',
          calories: 237,
          fat: 9.0,
          carbs: 37,
          protein: 4.3,
          iron: '1%',
        },
        {
          name: 'Eclair',
          calories: 262,
          fat: 16.0,
          carbs: 23,
          protein: 6.0,
          iron: '7%',
        },
        {
          name: 'Cupcake',
          calories: 305,
          fat: 3.7,
          carbs: 67,
          protein: 4.3,
          iron: '8%',
        },
        {
          name: 'Gingerbread',
          calories: 356,
          fat: 16.0,
          carbs: 49,
          protein: 3.9,
          iron: '16%',
        },
        {
          name: 'Jelly bean',
          calories: 375,
          fat: 0.0,
          carbs: 94,
          protein: 0.0,
          iron: '0%',
        },
        {
          name: 'Lollipop',
          calories: 392,
          fat: 0.2,
          carbs: 98,
          protein: 0,
          iron: '2%',
        },
        {
          name: 'Honeycomb',
          calories: 408,
          fat: 3.2,
          carbs: 87,
          protein: 6.5,
          iron: '45%',
        },
        {
          name: 'Donut',
          calories: 452,
          fat: 25.0,
          carbs: 51,
          protein: 4.9,
          iron: '22%',
        },
        {
          name: 'KitKat',
          calories: 518,
          fat: 26.0,
          carbs: 65,
          protein: 7,
          iron: '6%',
        },
      ],
    }
  },
}
</script>

언급URL : https://stackoverflow.com/questions/70384194/vuetify-2-rows-in-a-card