Sakana Element

简体中文

English

简体中文

English

主题

Indicator 指示器 ​

定位工具组件，包裹内容并将指示器（徽章、圆点、文本）放置在 9 个网格位置之一。

?
名称分类说明类型默认值
type? 风格类型'primary' | 'success' | 'info' | 'warning' | 'danger''primary'
processing? 风格像素脉冲动画booleanfalse
color? 颜色自定义十六进制颜色string—
placement? 行为指示器位置'top-start' | 'top-center' | 'top-end' | 'middle-start' | 'middle-center' | 'middle-end' | 'bottom-start' | 'bottom-center' | 'bottom-end''top-end'
offset? 行为偏移量 [x, y]（像素）[number, number]—
inline? 行为使用 inline-flex 布局booleanfalse
default? 插槽被包裹的内容—
indicator? 插槽指示器内容（为空时显示为圆点）—

基础用法 ​

包裹任意内容，默认显示为圆点指示器。使用 indicator 插槽自定义内容。

<template>
  <div class="demo-indicator">
    <px-indicator>
      <div class="demo-box">Content</div>
    </px-indicator>

    <px-indicator type="danger">
      <div class="demo-box">Alerts</div>
    </px-indicator>

    <px-indicator type="success">
      <template #indicator>
        <px-badge type="success" size="small">New</px-badge>
      </template>
      <div class="demo-box">Updates</div>
    </px-indicator>
  </div>
</template>

<style scoped>
.demo-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.demo-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--px-border-color);
  font-family: var(--px-font-family);
  font-size: var(--px-font-size-base);
}
</style>

位置 ​

使用 placement 将指示器定位在 9 个网格位置之一。

<template>
  <div class="demo-indicator-grid">
    <px-indicator
      v-for="p in placements"
      :key="p"
      :placement="p"
      type="danger"
    >
      <template #indicator>
        <px-badge type="danger" size="small">{{ p }}</px-badge>
      </template>
      <div class="demo-box" />
    </px-indicator>
  </div>
</template>

<script setup lang="ts">
const placements = [
  'top-start',
  'top-center',
  'top-end',
  'middle-start',
  'middle-center',
  'middle-end',
  'bottom-start',
  'bottom-center',
  'bottom-end',
] as const;
</script>

<style scoped>
.demo-indicator-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  max-width: 720px;
  padding: 40px;
  justify-items: center;
}
.demo-box {
  width: 80px;
  height: 80px;
  border: 2px solid var(--px-border-color);
}
</style>

类型 ​

使用 type 设置指示器的颜色主题。

<template>
  <div class="demo-indicator">
    <px-indicator v-for="t in types" :key="t" :type="t">
      <div class="demo-box">{{ t }}</div>
    </px-indicator>
  </div>
</template>

<script setup lang="ts">
const types = ['primary', 'success', 'info', 'warning', 'danger'] as const;
</script>

<style scoped>
.demo-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.demo-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--px-border-color);
  font-family: var(--px-font-family);
  font-size: 12px;
}
</style>

搭配徽章 ​

在 indicator 插槽中使用 PxBadge 显示数字计数和标签。

<template>
  <div class="demo-indicator">
    <px-indicator>
      <template #indicator>
        <px-badge type="danger" size="small">3</px-badge>
      </template>
      <px-button>Messages</px-button>
    </px-indicator>

    <px-indicator placement="top-start">
      <template #indicator>
        <px-badge type="warning" size="small">99+</px-badge>
      </template>
      <px-button type="primary">Notifications</px-button>
    </px-indicator>

    <px-indicator>
      <template #indicator>
        <px-badge type="success" size="small" icon="check" />
      </template>
      <px-button type="success" plain>Verified</px-button>
    </px-indicator>
  </div>
</template>

<style scoped>
.demo-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
</style>

处理中动画 ​

使用 processing 添加像素脉冲动画，用于显示实时状态。

<template>
  <div class="demo-indicator">
    <px-indicator processing>
      <div class="demo-box">Live</div>
    </px-indicator>

    <px-indicator processing type="danger">
      <div class="demo-box">Alert</div>
    </px-indicator>

    <px-indicator processing type="success">
      <div class="demo-box">Online</div>
    </px-indicator>
  </div>
</template>

<style scoped>
.demo-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.demo-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--px-border-color);
  font-family: var(--px-font-family);
  font-size: var(--px-font-size-base);
}
</style>

偏移 ​

使用 offset 通过 [x, y] 像素值微调指示器位置。

<template>
  <div class="demo-indicator">
    <px-indicator :offset="[0, 0]">
      <template #indicator>
        <px-badge type="danger" size="small">0,0</px-badge>
      </template>
      <div class="demo-box">Default</div>
    </px-indicator>

    <px-indicator :offset="[8, 8]">
      <template #indicator>
        <px-badge type="primary" size="small">8,8</px-badge>
      </template>
      <div class="demo-box">Outward</div>
    </px-indicator>

    <px-indicator :offset="[-8, -8]">
      <template #indicator>
        <px-badge type="success" size="small">-8,-8</px-badge>
      </template>
      <div class="demo-box">Inward</div>
    </px-indicator>
  </div>
</template>

<style scoped>
.demo-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 48px;
  align-items: center;
}
.demo-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--px-border-color);
  font-family: var(--px-font-family);
  font-size: 12px;
}
</style>

自定义颜色 ​

使用 color 设置圆点指示器的自定义十六进制颜色。

<template>
  <div class="demo-indicator">
    <px-indicator color="#ff6600">
      <div class="demo-box">Orange</div>
    </px-indicator>

    <px-indicator color="#9333ea">
      <div class="demo-box">Purple</div>
    </px-indicator>

    <px-indicator color="#06b6d4">
      <template #indicator>
        <px-badge color="#06b6d4" size="small">5</px-badge>
      </template>
      <div class="demo-box">Cyan</div>
    </px-indicator>
  </div>
</template>

<style scoped>
.demo-indicator {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  align-items: center;
}
.demo-box {
  width: 80px;
  height: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid var(--px-border-color);
  font-family: var(--px-font-family);
  font-size: var(--px-font-size-base);
}
</style>

行内模式 ​

使用 inline 切换为 inline-flex 布局，适合嵌入文本流中使用。

<template>
  <div class="demo-indicator">
    <p>
      You have
      <px-indicator inline type="danger">
        <template #indicator>
          <px-badge type="danger" size="small">3</px-badge>
        </template>
        <strong>unread messages</strong>
      </px-indicator>
      in your inbox.
    </p>
  </div>
</template>

<style scoped>
.demo-indicator {
  font-family: var(--px-font-family);
  font-size: var(--px-font-size-base);
  line-height: 2;
}
</style>