toolbar에 app을 쓰면 같이 내려가지 않고 위에 고정된다. v-app은 최상위 컴포넌트.

class명으로 바탕 색깔이나 text의 색깔들을 설정해줄 수 있다. v-btn을 쓰면 버튼 생성. 여기에 class=”pink white–text”를 바탕이 핑크이면서 텍스트는 하얀색임. v-btn에다가 v-icon을 써서 써줄 수 있다. class없이 left로 위치를 설정해줄 수 있고 btn 안에 span으로 글을 써줄 수도 있다. fab을 써주면 동그라미로 된다.

화면 크기가 커질 때 버튼이 생기게 하려면 v-btn의 속성에다가 hidden-md-and-up같이 써주면 된다. only로 이때만 써도 되고…

Todo 중간에 공백을 둬서 공간을 없애려면 spacer를 이용하면 된다. ```vue

text

``` script에도 data의 return값에 drawer: false를 해주면 v-toolbar-side-icon @click="drawer = !drawer" theme은 primary, success, info, error등의 색깔을 vuetify.js에서 설정해줄 수 있다. v-navigation 안에 v-list, v-list-tile, v-list-tile-content를 통해서 예쁘게 만들 수 있다. v-icon에 dashboard라는 아이콘도 잇다. v-list-tile 안에 v-list-tile-action에 연결시켜줄 수 있다. script의 links에 route를 지정해주면 list의 설정에 따라 바꿔줄 수 있다. ## margin & padding `m-x-2` ## grid system container에 class="my-5"를 써줘도 된다. 여러 조건이 있다. ## dummy project data <v-card flat class="pa-3" v-for="project in projects" :key="project.title"> <v-layout row wrap :class="pa-3 project ${project.status}" style태그에 .project.complete{ border-left:4px solid ; } 로 주게 된다면 그 사람의 상태에 따라 색깔을 다르게 줄 수 있다. ## chips `<v-chip small :class="\`$\` white--text"> </v-chip> ## Sorting Projects <v-btn small flat color="grey" @click="sortBy('title')"> methods에다가 sortBy(prop){ this.projects.sort((a, b) => a[prop] < b[prop] ? -1 : 1) } <v-btn slot ~~하고 해당하는 btn의 위에 v-tooltip top이라고 적는다. ## Cards data에 team이 있어야 함. name, role, avatar 등등... avatar: /avatar/avatar_1.png의 형식으로 적는다. <v-flex xs12 sm6 md4 lg3 v-for-"person in team" :key="person.name"
</v-layout> ## Avatar <img :src="person.avatar"> navigation-drawer app v-model 안에 v-layout column align-center를 해주면 가운데로 정렬이 된다. 그 전에 v-flex로 mt-5정도로 해준다. ## expansion panels ```vue <v-expansion-panel-content v-for="project in projects" :key="project.title">
due by /* 자기 것만 나오도록 */ computed: { myProjects(){ return this.projects.filter(project => { return project.person === 'The Net Ninja' }) } } ``` ## Menus expand-more <v-list-tile v-for="link in links" :key="link.text" router :to="link.route"> </v-list-tile-title> </v-list> </v-menu> ## Popups Popup.vue를 component에 만든다. 그리고나서 똑같이 template에다 Add new project</v0btn> </v-dialog> 그리고나서 navbar에 component를 추가하고 import함. ## Form Basics data(){ return{ title: '' content '' } }, methods: { submit(){ console.log(this.title, this.content); } } ## datepicker <v-text-field :value="due" slot="activator" label="Due date" prepend-icon="date_range">