Paper / 纸张

基础容器。

特性

支持边框载入动画

基础用法

Paper 组件用来承载内容，提供一个基础的容器。它可以用来包裹任何内容，使得内容更加突出。

Paper

<template>
  <Paper>
    Paper
  </Paper>
</template>

边框载入动画

对于现代 Web 应用，内容的加载非常常见。为了提升用户体验，我们可以使用 Paper 组件的边框载入动画。这个动画会在 Paper 组件的边框上显示一个加载动画。

Loading Paper

<template>
  <Paper loading>
    Loading Paper
  </Paper>
</template>

边框鼠标追踪动画

Paper 组件还支持鼠标追踪动画。当鼠标移动到 Paper 组件上时，边框颜色会跟随鼠标移动。

Trace Animation

<template>
  <div class="flex flex-gap-2">
    <Paper trace-animate>
      Trace Animation
    </Paper>
    <Paper trace-animate>
      Trace Animation
    </Paper>
  </div>
</template>