# Bullets

Bullet-style indicator for paginated view containers.

# Most common usage scenario

<template>
  <SfBullets
    :total="total"
    :current="current"
    @click="(value) => (current = value)"
  />
</template>
<script>
import { SfBullets } from "@storefront-ui/vue";
export default {
  components: {
    SfBullets,
  },
  data() {
    return {
      current: 1,
      total: 3,
    };
  },
};
</script>

# Props

  • total

    • Number of bullets in total (active + inactive)
    • type: number
    • defaultValue: 0
  • current

    • Index of the currently active bullet (0-indexed)
    • type: number
    • defaultValue: 0

# Slots

  • inactive

    • custom icon for inactive bullet
    • bindings: class, index, go
  • active

    • custom icon for active bullet

# Events

  • click

# CSS modifiers

  • .sf-bullet--active

# CSS custom properties (variables)

  • --bullet-width
  • --bullet-height
  • --bullet-margin
  • --bullet-border-radius
  • --bullet-background
  • --bullet-box-shadow

# Overridden other components CSS variables

None.

You can override CSS variables values bound to this component.

# Play with this component

See all available configurations and play with this component on Storybook.