Ripple 물결 효과 지시자

클릭 뒤에 물결 효과가 퍼지는 애니메이션을 만들어 주는 ripple 지시자예요.

출처: 문서

본문

물결 효과 지시자예요. 클릭한 뒤 물결이 퍼지는 동효과를 만들어 줘요.

언제 사용하나요?

v-ripple 지시자는 클릭 뒤에 물결 효과가 퍼지는 동효과를 만들고, 모든 블록 레벨 요소에 적용할 수 있어요.

주의: 블록 레벨 요소에만 적용할 수 있어요

기본 사용법

:::demo 사용자는 컴포넌트나 HTML 요소 어디에서든 v-ripple 지시자를 사용할 수 있어요. 기본적인 v-ripple 지시자 사용 예시로, v-ripple은 객체 하나를 받아요

<template>
  <d-row :gutter="50">
    <d-col :span="12">
      <div class="ripple-button">
        <div class="ripple-html-element" v-ripple="{ color: '#5e7ce0',duration: 300, delay: 300 }">HTML元素 中使用 v-ripple</div>
      </div>
    </d-col>
    <d-col :span="12">
      <div class="ripple-button">
        <div class="ripple-html-element" v-ripple="{ duration: 800 }">HTML元素 中使用 v-ripple</div>
      </div>
    </d-col>
  </d-row>
</template>
<style scoped>
.ripple-button {
  display: flex;
}
</style>

:::

색상 커스터마이즈

:::demo

<template>
  <ul class="demo-ripple">
    <li
      v-for="item in [
        { color: '#409EFF', text: '这是一条 Primary 涟漪' },
        { color: '#67C23A', text: '这是一条 Success 涟漪' },
        { color: '#E6A23C', text: '这是一条 Warning 涟漪' },
        { color: '#F56C6C', text: '这是一条 Danger 涟漪' },
        { color: '#909399', text: '这是一条 Info 涟漪' }
      ]"
      :style="{ color: item.color }"
    >
      <div class="ripple-change-text-color" v-ripple="{ duration: 300 }">
        {{ item.text }}
      </div>
    </li>
  </ul>
</template>
<style>
  .demo-ripple {
    list-style: none;
    padding-left: 0;
  }
</style>

:::

다른 컴포넌트에 적용하기

Button 컴포넌트

:::demo

<template>
  <div class="demo-spacing">
    <d-button variant="solid" v-ripple="{ duration: 300 }">Solid button</d-button>
    <d-button v-ripple="{ duration: 300 }">Secondary button</d-button>
    <d-button icon="add" title="Add" v-ripple="{ duration: 300 }"></d-button>
  </div>
</template>

:::

Card 컴포넌트

:::demo

<template>
  <d-card v-ripple="{ duration: 300 }" class="demo-card" :src="'https://devui.design/components/assets/image1.png'">
    <template #avatar>
      <d-avatar name="DevUI"></d-avatar>
    </template>
    <template #title>
      DEVUI Course
    </template>
    <template #subtitle class="icon">
      <d-icon name="company-member"></d-icon><span>DevUI</span>
    </template>
    <template #content>
      DEVUI is a free open-source and common solution for the front end of enterprise mid- and back-end products. Its design values are basedon...
    </template>
    <template #actions>
      <div class="card-block">
        <d-icon name="like"></d-icon ><span>12</span>
      </div>
      <div class="card-block">
        <d-icon name="star-o"></d-icon ><span>8</span>
      </div>
      <div class="card-block">
        <d-icon name="message"></d-icon ><span>8</span>
      </div>
    </template>
  </d-card>
</template>
<style lang="scss">
  .demo-card {
    width: 350px;
    cursor: pointer;
    transition:
      box-shadow .3s cubic-bezier(.645,.045,.355,1),
      transform .3s cubic-bezier(.645,.045,.355,1);
    
    &:hover {
      box-shadow: 0 4px 16px 0 rgba(0,0,0,.1);
      transform: translateY(-5px);
    }

    .card-block {
      margin-right: 16px;

      i {
        cursor: pointer;
        font-size: 16px;
        margin-right: 8px;
        vertical-align: middle;
      }

      i + span {
        vertical-align: middle;
      }
    }

    img {
      max-width: none;
    }

    .action-text {
      color: #8a8e99;
    }
  }
</style>

:::

Ripple 파라미터

더 알아보기 (Learn more)

v-ripple은 컴포넌트를 새로 만들지 않고도 클릭 피드백을 얹을 수 있는 가벼운 지시자예요. 버튼·카드 같은 블록 레벨 요소에 duration과 color만 조정해서 붙이면 사용성이 한층 살아 있어 보여요.