Ripple 涟漪 ​

<template>
  <f-ripple v-for="(item, i) in typeList" :key="i" :type="item">
    <div class="list">
      <f-text :type="item">{{ item }} 涟漪</f-text>
    </div>
  </f-ripple>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import type { FightingType } from 'fighting-design'

  const typeList = ref<FightingType[]>([
    'default',
    'primary',
    'success',
    'danger',
    'warning'
  ])
</script>

<style scoped>
  .list {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<template>
  <f-ripple ripples-color="orange">
    <div class="list">
      <f-text color="orange">自定义涟漪颜色</f-text>
    </div>
  </f-ripple>

  <f-ripple ripples-color="blue">
    <div class="list">
      <f-text color="blue">自定义涟漪颜色</f-text>
    </div>
  </f-ripple>

  <f-ripple ripples-color="purple">
    <div class="list">
      <f-text color="purple">自定义涟漪颜色</f-text>
    </div>
  </f-ripple>
</template>

<style scoped>
  .list {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<template>
  <f-ripple type="primary" disabled>
    <div class="list">
      <f-text type="primary">禁止使用</f-text>
    </div>
  </f-ripple>

  <f-ripple type="primary">
    <div class="list">
      <f-text type="primary">可以使用</f-text>
    </div>
  </f-ripple>
</template>

<style scoped>
  .list {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>

<template>
  <f-ripple type="primary" :start-opacity="0.7" :end-opacity="0.3">
    <div class="list">
      <f-text type="primary">自定义涟漪透明度</f-text>
    </div>
  </f-ripple>
</template>

<style scoped>
  .list {
    height: 60px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>