PersonaStrengthbar
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
| Props | Type | Default | Description |
|---|---|---|---|
min | Number | 0 | Lowest value in range |
max | Number | 6 | Highest value in range |
value | Number | - | Active bar value |
length | Number | 6 | Number of bar |
Slots
| Name | Description |
|---|---|
| There no slots here | |
Events
| Name | Arguments | Description |
|---|---|---|
| There no props here | ||