Wert für internationale Telefonnummer

Wert für internationale Telefonnummer in Storybook

Verwendung

Dies ist eine Hilfsprogrammkomponente zum Rendern und Formatieren von Daten, daher gelten keine speziellen UX-Richtlinien.

Code

<PhoneNumberValue value={{ phoneNumber: "555-123456" }} />

Importanweisung

import { PhoneNumberValue } from '@jutro/components';

Komponentenvertrag

Vergewissern Sie sich, dass Sie die API-Oberfläche der Design System-Komponenten und die damit verbundenen Auswirkungen und Kompromisse verstehen. Erfahren Sie mehr in unserer Einführung zur Komponenten-API.

Eigenschaften

className

Typ

string

Beschreibung

CSS class name for this component.

dataType

Typ

'string' | 'object'

Beschreibung

Type of returned value.

Standardwert

'object'

defaultCountry

Typ

ISOCountryCodes

Beschreibung

Default country code to be rendered. Must be an ISO country code string.

id

Typ

string

Beschreibung

Unique identifier for the component.

path

Typ

string

Beschreibung

Specifies the path to the value used to generate the output.

prefix

Typ

IntlMessageShape

Beschreibung

Optional prefix message to be attached in front of the value.

showCountryCodeForReadOnly

Typ

boolean

Beschreibung

Determines whether the country code is visible if the phone number is rendered in readOnly mode.

Standardwert

true

suffix

Typ

IntlMessageShape

Beschreibung

Optional suffix message to be attached at the end the value.

tag

Typ

string

Beschreibung

The HTML tag to use when rendering the outermost element of this component.

Standardwert

'div'

value

Typ

{ countryCode?: { code: ISOCountryCodes }, phoneNumber: string}

phoneNumbererforderlich

Typ

string

Beschreibung

Phone number in the component.

countryCode

Typ

ISOCountryCodes

Beschreibung

Optional ISO 3611-1 country codes to include with the phone number.

Beschreibung

Value to display.

Hooks

Für PhoneNumberValue sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für PhoneNumberValue.

Informationen über die Verwaltung von Übersetzungen finden Sie in unserem Abschnitt über Internationalisierung.

Escape Hatches

Weitere Informationen finden Sie in unserer Dokumentation über Escape Hatches.

Beispiele

Im Abschnitt Verwendung finden Sie Informationen über das richtige Design einer Telefonnummer und die verschiedenen Konfigurationsoptionen, die wir bereitstellen.

Beispiel für eine einfache Telefonnummer

Sie können der Eigenschaft value ein Objekt des Formulars { phoneNumber: string } zuweisen, das dann als Telefonnummer gerendert wird. Es wird ein Ländercode hinzugefügt, die von Ihrem Gebietsschema abhängt, und andere erforderliche Formatierungen angewendet.

<PhoneNumberValue value={{ phoneNumber: "555-123456" }} />

Beispiel für einen Ländercode

Sie können einen Ländercode angeben, der der Nummer hinzugefügt werden soll, indem Sie eine countryCode-Eigenschaft in das als value verwendete Objekt aufnehmen.

Diese Eigenschaft verwendet ein ähnliches Objekt wie { code: string }, bei dem die Zeichenfolge ein gültiger ISO-Ländercode ist.

<PhoneNumberValue value={{ 
  countryCode: { code: "IE" },
  phoneNumber: "01-123456" // Note this is rendered with the leading 0 removed due to the presence of an Irish country code
  }} />

Beispiel für einen Standard-Ländercode

Mit der Eigenschaft defaultCountryCode können Sie einen Standard-Ländercode angeben, der anstelle des auf Ihrem Gebietsschema basierenden verwendet werden soll.

<PhoneNumberValue 
  value={{ phoneNumber: "01-123456" }} 
  defaultCountryCode="IE"
  />

Beispiel für Ländercode ausblenden

Sie können eine Telefonnummer auch ohne Ländercode anzeigen, indem Sie die Einstellung showCountryCodeForReadOnly auf false setzen.

<PhoneNumberValue 
  value={{ phoneNumber: "555-123456" }} 
  showCountryCodeForReadOnly={ false }
  />

Beispiel für einen Zeichenfolgenwert

Sie können einen Zeichenfolgenwert verwenden, aber Sie müssen ebenfalls dataType auf false setzen.

<PhoneNumberValue 
  value="555-123456"
  dataType='string'
  />

Änderungsprotokoll