Vant built-in style

Introduced

Vant contains some common styles by default that can be used directly through className.

The text is omitted

When the length of the text content exceeds the maximum width of the container, the extra text is automatically omitted.

<!-- 最多显示一行 -->
<div class="van-ellipsis">这是一段最多显示一行的文字，多余的内容会被省略</div>

<!-- 最多显示两行 -->
<div class="van-multi-ellipsis--l2">这是一段最多显示两行的文字，多余的内容会被省略</div>

<!-- 最多显示三行 -->
<div class="van-multi-ellipsis--l3">这是一段最多显示三行的文字，多余的内容会被省略</div>

1px border

Add a 1px border (i.e. hairline) under the Retina screen to the element, based on the pseudo-class transform implementation.

<!-- 上边框 -->
<div class="van-hairline--top"></div>

<!-- 下边框 -->
<div class="van-hairline--bottom"></div>

<!-- 左边框 -->
<div class="van-hairline--left"></div>

<!-- 右边框 -->
<div class="van-hairline--right"></div>

<!-- 上下边框 -->
<div class="van-hairline--top-bottom"></div>

<!-- 全边框 -->
<div class="van-hairline--surround"></div>

Animation

Built-in animations can be used through the transition component

<!-- 淡入 -->
<transition name="van-fade">
  <div v-show="visible">Fade</div>
</transition>

<!-- 上滑进入 -->
<transition name="van-slide-up">
  <div v-show="visible">Slide Up</div>
</transition>

<!-- 下滑进入 -->
<transition name="van-slide-down">
  <div v-show="visible">Slide Down</div>
</transition>

<!-- 左滑进入 -->
<transition name="van-slide-left">
  <div v-show="visible">Slide Left</div>
</transition>

<!-- 右滑进入 -->
<transition name="van-slide-right">
  <div v-show="visible">Slide Right</div>
</transition>