작업 목록(목록, 여백, 확인란)을 표시하는 아름다운 할 일 목록 앱을 Vuetify에서 작성

반응형

Vuetify.js를 사용하여 처음부터 끝까지 할 일 앱을 만드는 진행 중인 튜토리얼 시리즈에 오신 것을 환영합니다. 지난 회에서 우리는 앱의 툴바를 만드는 것으로 시작했습니다. 오늘은 데이터를 표시하고 상호 작용을 추가할 것입니다.

먼저 생성할 목록을 채울 샘플 작업을 만들어 보겠습니다. 이후 튜토리얼에서는 사용자가 직접 작업을 추가할 수 있도록 할 것이지만, 현재 샘플 데이터는 다음과 같은 작업을 수행해야 합니다.

src/App.vue
<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
  </v-app>
</template>
<script>
          export default {
  name: 'App',
      data: () => ({
            tasks: [...Array(10)].map((value, index) => ({
                    id: `task${index + 1}`,
                    title: `Task ${index + 1}`,
                    note: `Some things to note about task ${index + 1}`,
            })),
      }),
};
</script>

JavaScript 배열 맵() 방법을 사용하여 각각 고유한 ID, 제목 및 참고를 가진 10개의 샘플 작업 목록을 자동으로 생성합니다.

 

태스크 목록 표시

v-list 구성 요소 및 기타 하위 구성 요소를 사용하여 작업 목록을 표시합니다. v-list는 v-card 구성 요소로 줄바꿈됩니다.

src/App.vue
<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card>
                <v-list>
                  <v-list-item v-for="(task, index) in tasks" :key="index">
                              <v-list-item-content
            ><v-list-item-title>{ task.title }</v-list-item-title>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
...

v-for 지시문을 사용하여 작업을 반복하고 각 어레이 요소에 대한 v-list 항목을 표시합니다. 각 목록 내부의 콘텐츠를 표시하기 위해 v-list-item-content 구성 요소를 사용합니다. 그런 다음 v-list-item-title을 사용하여 목록 항목의 제목을 표시합니다. 이 경우 이 항목이 작업 제목입니다.

 

작업 노트 표시

Vuetify의 v-list-tem 구성 요소는 단일 줄, 두 줄, 세 줄의 세 가지 변형이며, 이 중 단일 줄 변형이 기본값이다. 각 작업에 대한 노트를 보여줘야 하므로 두 줄 변형을 설정합니다.

src/App.vue
<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card>
                <v-list>
                  <v-list-item v-for="(task, index) in tasks" :key="index" two-line>
                              <v-list-item-content
            ><v-list-item-title>{ task.title }</v-list-item-title>
            <v-list-item-subtitle>{ task.note }</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
...

도구 모음을 자세히 봐. 평평해! 지난번 튜토리얼에서 좀 높이지 않았나요?

 

작업 목록을 포함하는 v-카드가 바로 아래에 있기 때문에 도구 모음은 무계층으로 표시됩니다. Vuetify의 마진 클래스 중 하나를 사용하여 간격을 좀 두도록 합시다.

src/App.vue
<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Todos</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card class="mt-4">
            <v-list>
              <v-list-item v-for="(todo, index) in todos" :key="index" two-line>
                          <v-list-item-content
            ><v-list-item-title>{ todo.title }</v-list-item-title>
            <v-list-item-subtitle>{ todo.note }</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
...

mt-4는 제가 언급하고 있던 마진 클래스입니다. m은 여백을 의미하고, t는 꼭대기를 의미한다. 4는 Vuetify의 32가지 다른 마진 크기 중 하나를 나타냅니다.

v-card의 왼쪽, 오른쪽 및 아래쪽 여백도 모두 동일한 크기 4로 설정합니다.

src/App.vue
<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card class="mt-4 ml-4 mr-4 mb-4">
            <v-list>
              <v-list-item v-for="(task, index) in tasks" :key="index" two-line>
                          <v-list-item-content
            ><v-list-item-title>{ task.title }</v-list-item-title>
            <v-list-item-subtitle>{ task.note }</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
...

 

하지만 이를 위한 더 좋고 짧은 방법이 있습니다.

src/App.vue
<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card class="ma-4">
            <v-list>
              <v-list-item v-for="(task, index) in tasks" :key="index" two-line>
                          <v-list-item-content
            ><v-list-item-title>{ task.title }</v-list-item-title>
            <v-list-item-subtitle>{ task.note }</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
...

당신이 정확하게 추측했듯이, ma-4 클래스는 모든 방향에서 v-card에 사이즈 4의 여백을 설정할 것입니다.

현재 당사의 앱은 다음과 같습니다.

 

툴바 상승이 돌아왔고, 리스트를 포함한 카드는 여백이 더 선명하게 나타납니다.

확인란이 있는 작업 완료 표시

작업 생성의 핵심은 작업을 실제로 수행하는 것이므로 완료 상태를 나타내는 각 작업의 목록에 체크박스를 표시해 보겠습니다. 이 작업은 v-checkbox 구성 요소를 사용하여 수행하겠습니다.

<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card class="ma-4">
            <v-list>
              <v-list-item v-for="(task, index) in tasks" :key="index" two-line>
                          <v-checkbox hide-details v-model="task.isCompleted"></v-checkbox>
          <v-list-item-content>
                                        <v-list-item-title>{ task.title }</v-list-item-title>
            <v-list-item-subtitle>{ task.note }</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
<script>
                            export default {
  name: 'App',
      data: () => ({
            tasks: [...Array(10)].map((value, index) => ({
                    id: `task${index + 1}`,
                    title: `Task ${index + 1}`,
                    note: `Some things to note about task ${index + 1}`,
                    isCompleted: false,
            })),
      }),
};
</script>

각 작업에 대해 새 isCompleted 속성을 만들었으며 기본적으로 false로 설정됩니다. v-model을 사용하여 확인란과 isCompleted 사이에 양방향 바인딩을 만들었습니다.

 

저희 체크박스에 지금 나오는데 위치가 좀 안 맞네요. 앞에서 사용한 몇 가지 마진 클래스로 이 문제를 해결하겠습니다.

<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card class="ma-4">
            <v-list>
              <v-list-item v-for="(task, index) in tasks" :key="index" two-line>
                          <v-checkbox hide-details v-model="task.isCompleted" class="mt-0 mr-2"></v-checkbox>
          <v-list-item-content>
                                        <v-list-item-title>{ task.title }</v-list-item-title>
            <v-list-item-subtitle>{ task.note }</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
...

Vuetify에서는 맨 위 여백(0으로 설정)을 없애고 오른쪽 여백을 2 사이즈로 설정했기 때문에 훨씬 좋아 보입니다.

 

색상을 사용하여 작업 완료 표시

작업이 완료되었음을 표시하기 위해 체크 표시를 사용하는 것 외에도 Vue의 조건부 클래스 바인딩 구문을 사용하여 완료됨을 나타내도록 목록 항목의 배경색 및 불투명도를 변경하겠습니다.

<template>
    <v-app>
      <v-card>
        <v-toolbar color="primary" elevation="3" dark rounded="0">
                  <v-toolbar-title>Tasks</v-toolbar-title>
      </v-toolbar>
    </v-card>
    <v-card class="ma-4">
            <v-list>
              <v-list-item
          v-for="(task, index) in tasks"
          :key="index"
          v-bind:class="{ 'task-completed': task.isCompleted }"
          two-line
        >
                      <v-checkbox
            hide-details
            v-model="task.isCompleted"
            class="mt-0 mr-2"
          ></v-checkbox>
          <v-list-item-content>
                          <v-list-item-title>{ task.title }</v-list-item-title>
            <v-list-item-subtitle>{ task.note }</v-list-item-subtitle>
          </v-list-item-content>
        </v-list-item>
      </v-list>
    </v-card>
  </v-app>
</template>
<script>
              ...
            </script>
<style scoped>
  .task-completed {
      background-color: #d8d8d8;
      opacity: 0.6;
  }
</style>

계속 이어지겠습니다.

 

오늘은 Vuetify에서 목록이 작동하는 방법을 배웠고 앱에서 작업의 샘플 목록을 표시할 수 있었습니다. 우리는 또한 요소의 여백을 설정하기 위한 몇 가지 기성 Vuetify 클래스를 활용했다. 다음 회를 시청해 주십시오. 이 환상적인 재료 설계 프레임워크를 사용하여 처음부터 끝까지 해야 할 일 목록 앱을 함께 제작합니다.