ph-progress-bar v0.1.0-beta.0

vue-template

Project setup

npm install ph-progress-bar

intro

interface PhProgressBar{
    type:{type:String,default:"primary"}, //primary|success|danger|warning|info
    value:{type:Number,default:0},
    max:{type:Number,required:true},
    animate:{type:Boolean,default:false},
    striped:{type:Boolean,default:false},
    height:{type:Number,default:8},
    format:{type:String,default:"v/m"/* % */}
}

##code

<template>
  <div class="home">
    <ph-progress-bar
      :value="0"
      :max="100"
      format="当前进度：v/m"
    ></ph-progress-bar>
    <p> demo1 </p>
    <ph-progress-bar
      :value="10"
      :max="100"
      format="进度：%"
    ></ph-progress-bar>
    <p> demo2 </p>
    <ph-progress-bar
      :value="20"
      :max="100"
      format="v/m"
      type="success"
    ></ph-progress-bar>
    <p> demo3 </p>
    <ph-progress-bar
      :value="30"
      :max="100"
      :height="15"
      type="info"
      format="v/m"
      :animate="true"
    ></ph-progress-bar>
    <p> demo4 </p>
    <ph-progress-bar
      :value="40"
      :max="100"
      type="warning"
      format="v/m"
      :animate="true"
    ></ph-progress-bar>
    <p> demo5 </p>
    <ph-progress-bar
      :value="60"
      :max="100"
      :height="15"
      type="info"
      format="v/m"
    ></ph-progress-bar>
    <p> demo6 </p>
    <ph-progress-bar
      :value="70"
      :max="100"
      type="danger"
      format="v/m"
      :animate="true"
      :striped="true"
    ></ph-progress-bar>
    <p> demo7 </p>
    <ph-progress-bar
      :value="100"
      :max="100"
      type="danger"
      format="v/m"
    ></ph-progress-bar>
    <p> demo8 </p>
    <ph-progress-bar
      :value="90"
      :max="100"
      :height="16"
      :animate="true"
      format="v/m"
    ></ph-progress-bar>
    <p> demo9 </p>
    <ph-progress-bar
      :value="3"
      :max="10"
      :height="15"
      type="info"
      format="v/m"
    ></ph-progress-bar>
  </div>
</template>

<script lang="ts" setup>
import PhProgressBar from 'ph-progress-bar'
</script>

在线案例

See phoeon.