Skip to content
On this page

Strengthbar

Component for displaying measurment.

Usage

Simple Usage

preview
vue
<template>
  <p-strengthbar value="0" />
  <p-strengthbar value="1" />
  <p-strengthbar value="2" />
  <p-strengthbar value="3" />
  <p-strengthbar value="4" />
  <p-strengthbar value="5" />
  <p-strengthbar value="6" />
</template>

For Measuring Password

preview
vue
<template>
  <p-input-password v-model="input" placeholder="Input your password" />
  <p-strengthbar :value="score" />
</template>

<script setup>
  import { ref } from 'vue-demi'
  import { usePasswordStrength } from '@privyid/persona/core'

  const input = ref('')
  const score = usePasswordStrength(input)
</script>

Min and Max

You can set lowest value and highest value for the value with prop min and max. It usefull when you combine it with Input Range. Default is 0 and 6

preview
vue
<template>
  <p-input-range v-model="range" min="0" max="100" />
  <p-strengthbar :value="range" min="0" max="100"  />
</template>

Number of Bar

You can set number of bar with prop length.

preview
vue
<template>
  <p-input-range v-model="length" min="1" max="12" />
  <p-input-range v-model="value" min="0" max="6" />
  <p-strengthbar :value="value" :length="length" />
</template>

API

Props

PropsTypeDefaultDescription
minNumber0Lowest value in range
maxNumber6Highest value in range
valueNumber-Active bar value
lengthNumber6Number of bar

Slots

NameDescription
There no slots here

Events

NameArgumentsDescription
There no props here

See Also

Released under the MIT License.