<template>
  <div class="demo-badge-basic">
    <ui-badge
      v-model="value"
      :max="max">
      <ui-avatar
        type="primary"
        shape="square"></ui-avatar>
    </ui-badge>

    <ui-badge
      v-model="zero"
      :max="max"
      :show-zero="true">
      <ui-avatar
        type="primary"
        shape="square"></ui-avatar>
    </ui-badge>

    <ui-badge
      v-model="value"
      dot>
      <ui-avatar
        type="primary"
        shape="square"></ui-avatar>
    </ui-badge>

    <ui-badge
      v-model="value"
      dot
      status="default">
      <ui-avatar
        type="primary"
        shape="square"></ui-avatar>
    </ui-badge>

    <ui-badge
      v-model="value"
      dot
      status="success">
      <ui-avatar
        type="primary"
        shape="square"></ui-avatar>
    </ui-badge>

    <ui-badge
      v-model="value"
      dot
      status="warning">
      <ui-avatar
        type="primary"
        shape="square"></ui-avatar>
    </ui-badge>

    <ui-badge
      v-model="value"
      dot
      status="processing">
      <ui-avatar
        type="primary"
        shape="square"></ui-avatar>
    </ui-badge>
  </div>
</template>

<script>
import { Badge, Avatar } from "amumu-ui"
export default {
  components: {
    "ui-badge": Badge,
    "ui-avatar": Avatar,
  },
  data() {
    return {
      value: 999,
      max: 99,
      zero: 0,
    }
  },
}
</script>
<style lang="scss">
.demo-badge-basic {
  .mm-badge {
    margin-right: 30px;
  }
}
</style>
