v-chip-group, v-chip 상단 메뉴바, v-bottom-navigation, v-overlay, v-hover, v-radio-group

v-chip-group

v-chip-group은 아래와 같이 여러개의 메뉴 버튼 들을 보여주는 것이다 각 하나하나는 v-chip이다.

여기서 v-chip-group에 옵션을 줄 수 있다.

 

기본적으로 제일 오른쪽 것을 누르면 전체적으로 왼쪽으로 위치해야하는데 ,

center-active옵션을 주어야지 이렇게 된다.

multiple옵션을 주면 여러개를 선택할 수 있다.

mandatory옵션을 주면 무조건 하나는 선택해야한다. 기본적으로 맨 앞에 위치한 것이 디폴트값이다.

active-class는 눌렸을 때 바뀌는 옵션이다. primary--text라고 하면 글자색이 프라이머리 색으로 바뀜

 

v-chip

v-chip-group안에 v-chip 반복문을 사용해서 여러개를 생성해준다.

 

v-bottom-navigation

바텀 네비게이션 이다.

옵션으로 fixed를주면 화면 하단에 고정이되고,

grow를 주면 내용물들이 옆으로 늘어난다.

그리고 value라는 props를전달해주는데 0,1,2에 따라서 각 버튼이 활성화 된다.

 

안에는 v-btn이 들어오는 것 같다.

v-btn에는 v-ripple="false"를 주면 뒷 잔상?이 없어진다.

 

v-overlay

뒤가 가려지고 앞쪽에 콘텐츠들이 들어온다.

 

 

v-hover

호버를 사용하려면 v-hover로 사용하려는 부분을 감싸고 v-expand-transition으로 애니메이션등을 줄 수 있다. 이 때 v-if="hover"가 중요한 것 같다.

 

사용하려는 곳 for the perfect meal < 이 div에 올리면 발동한다.  사용하려는 곳 안에 애니메이션을 넣어야하고. 전체를 hover로 감싸준다.

      <v-hover v-slot="{ hover }">
        <div class="font-weight-light grey--text text-h6 mb-2">
          For the perfect meal
          <v-expand-transition>
            <div
              v-if="hover"
              class="d-flex transition-fast-in-fast-out orange darken-2 v-card--reveal text-h2 white--text"
              style="height: 100%;"
            >
              $14.99
            </div>
          </v-expand-transition>
        </div>
      </v-hover>

v-radio-group

v-radio-group은 말그대로 라디오 버튼 그룹이다.

그룹을 하나 만들고 그 밑에 v-raio를 둔다. value에는 실제 값이 들어온다.

여기서 중요한 점이 데이터하나를 radio-group과 v-model로 연동한다. 

연동하게 되면 버튼을 클릭할 때마다, (여기선radioGroup) v-model과 연결된 값에 value의 값이 들어가게 된다.

데이터에 기본값을 value값으로 넣어두면 처음에 2번입니다 라디오버튼이 클릭되어 있다.