gi-component

Appearance

Dot 点 ​

基础用法 ​

查看代码
vue
<template>
  <div>
    <el-space size="large" style="width: 100%;">
      <gi-dot color="primary" />
      <gi-dot color="success" />
      <gi-dot color="danger" />
      <gi-dot color="warning" />
      <gi-dot color="info" />
    </el-space>

    <el-space size="large" style="width: 100%;">
      <gi-dot type="square" color="primary" />
      <gi-dot type="square" color="success" />
      <gi-dot type="square" color="danger" />
      <gi-dot type="square" color="warning" />
      <gi-dot type="square" color="info" />
    </el-space>
  </div>
</template>

动画 ​

查看代码
vue
<template>
  <div>
    <el-space size="large" style="width: 100%;">
      <gi-dot color="primary" animation />
      <gi-dot color="success" animation />
      <gi-dot color="danger" animation />
      <gi-dot color="warning" animation />
      <gi-dot color="info" animation />
    </el-space>

    <el-space size="large" style="width: 100%;">
      <gi-dot type="square" color="primary" animation />
      <gi-dot type="square" color="success" animation />
      <gi-dot type="square" color="danger" animation />
      <gi-dot type="square" color="warning" animation />
      <gi-dot type="square" color="info" animation />
    </el-space>
  </div>
</template>

自定义颜色 ​

查看代码
vue
<template>
  <div>
    <el-space size="large" style="width: 100%;">
      <gi-dot color="#7816ff" animation />
      <gi-dot color="#eb0aa4" animation />
      <gi-dot color="#00b42a" animation />
      <gi-dot color="#ff5722" animation />
      <gi-dot color="#eb0aa4" animation />
    </el-space>

    <el-space size="large" style="width: 100%;">
      <gi-dot type="square" color="#7816ff" animation />
      <gi-dot type="square" color="#eb0aa4" animation />
      <gi-dot type="square" color="#00b42a" animation />
      <gi-dot type="square" color="#ff5722" animation />
      <gi-dot type="square" color="#eb0aa4" animation />
    </el-space>
  </div>
</template>

API ​

属性说明类型默认值
type点的类型circle|squarecircle
size尺寸number6
color点的颜色string|primary|success|warning|error|info--
animation是否添加动画booleanfalse