Dial Pad
Dial Pad allows users to enter or dial phone numbers.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad aria-label="Dial a telephone number" /></template><vwc-dial-pad aria-label="Dial a telephone number"></vwc-dial-pad>To support international numbers, you can use the pattern like ^\+?[0-9#*]*$ which allows an optional + at the beginning. Users can long press the 0 button or long press the Space key on the keyboard (when the input field is active) to insert a + symbol (commonly used for international numbers).
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad pattern="^\+?[0-9#*]*$" /></template><vwc-dial-pad pattern="^\+?[0-9#*]*$"></vwc-dial-pad>The helper-text attribute allows you give extra context to the number that is being displayed. The helper text is displayed under the phone number input element.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad helper-text="58 Meeting Room - Extension" value="1158" /></template><vwc-dial-pad helper-text="58 Meeting Room - Extension" value="1158"></vwc-dial-pad>Use the call-button-label attribute to change the call button label.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad call-button-label="Dial" /></template><vwc-dial-pad call-button-label="Dial"></vwc-dial-pad>Use the end-call-button-label attribute to change the end call button label.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad end-call-button-label="End" call-active /></template><vwc-dial-pad end-call-button-label="End" call-active></vwc-dial-pad>To give a hint to the user of what to enter in the input, use the placeholder attribute to set the text displayed in the input.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad placeholder="Enter number" /></template><vwc-dial-pad placeholder="Enter number"></vwc-dial-pad>The call-active attribute enables the “end call button” and hides the “dial button”.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad call-active value="01146869483" /></template><vwc-dial-pad call-active value="01146869483"></vwc-dial-pad>The pending attribute disables the call button and displays a processing indicator.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad pending /></template><vwc-dial-pad pending></vwc-dial-pad>The disabled attribute controls the disabled state of the keypad, input and Call/End call buttons.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad disabled /></template><vwc-dial-pad disabled></vwc-dial-pad>When vertical space is limited, set the size attribute to condensed.
This reduces the overall height of the Dial Pad by decreasing spacing between controls, making it more suitable for compact layouts without changing functionality.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad size="condensed" /></template><vwc-dial-pad size="condensed"></vwc-dial-pad>The no-call attribute removes call/end call functionality and hides the call/end call button.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad no-call /></template><vwc-dial-pad no-call></vwc-dial-pad>The no-input attribute removes the input field.
<script setup lang="ts">import { VDialPad } from '@vonage/vivid-api-vue';</script>
<template> <VDialPad no-input /></template><vwc-dial-pad no-input></vwc-dial-pad>