Sprachauswahl

Sprachauswahl in Storybook

Verwendung

Mit der Komponente LanguageSelector können Benutzer beim Navigieren in einer Anwendung ihre bevorzugte Sprache auswählen.

Allgemeine Anwendungsfälle:

• Ein anonymer (nicht authentifizierter) Digital-Endbenutzer greift auf die Microapp eines Kunden zu und möchte die am besten geeignete verfügbare Sprache finden.
• Ein Enterprise-Endbenutzer öffnet die Vorschau eines eingebetteten Micro-Frontend und möchte eine geeignete Sprache aus den vom Kunden definierten Optionen auswählen.

Aufbau

Auf Digital-Benutzeroberflächen (Verbraucheranwendung) wird die Sprachauswahl in der globalen Kopfzeile angezeigt und besteht aus den folgenden Elementen:

1. Übersetzungssymbol: Das Jutro-Übersetzungssymbol ist eine allgemeine Anzeige, anhand derer Benutzer die Sprachauswahl erkennen können.
2. Textbeschriftung (optional): Gibt die aktuell ausgewählte Sprache an. Eine Textbeschriftung ist in Tablet- und mobilen Ansichten optional.
3. Standardmäßiges Dropdown-Auswahlmenü: Das Auswahlmenü enthält eine Liste der verfügbaren Sprachen zur Auswahl für Benutzer.

In Enterprise-Benutzeroberflächen wird die Sprachauswahl im Vorschaufenster des eingebetteten Micro-Frontend angezeigt.

Best Practices

• Die Sprachauswahl sollte beim ersten Nutzungserlebnis eines Endbenutzers mit einer Verbraucheranwendung besonders hervorgehoben werden. Alle nachfolgenden Interaktionen hängen davon ab, dass ein Benutzer den Inhalt der Benutzeroberfläche versteht, sodass andere Funktionen zunächst zweitrangig sein sollten.
• Verwenden Sie das Jutro-Übersetzungssymbol zusammen mit einer Textbeschriftung, damit ein Benutzer die Sprachauswahl auch dann erkennen kann, wenn die Benutzeroberfläche anfänglich in einer Sprache angezeigt wird, die er nicht versteht.
  • Vermeiden Sie die Verwendung von Flaggen zur Darstellung von Sprachen. Dies ist problematisch, da eine Sprache in mehreren Ländern gesprochen werden kann und in einem Land mehrere Sprachen gesprochen werden können.
• Verwenden Sie das Übersetzungssymbol in Verbindung mit einer Sprachbeschriftung für die Desktop-Version. Eine Beschriftung ist in der Ansicht für Tablets und Mobiltelefone optional.
• Wenn die Sprachauswahl in der globalen Kopfzeile angezeigt wird, blenden Sie den Auswahlrahmen aus und vergrößern Sie das Übersetzungssymbol, um ein einheitliches Erscheinungsbild und Funktionsmuster zu gewährleisten.

Reaktionsfähigkeit/Anpassungsfähigkeit

Die LanguageSelector-Komponente passt sich automatisch an die jeweilige Bildschirmgröße von Desktop-Computern, Tablets und Mobiltelefonen an. In der Ansicht für Tablets und Mobiltelefone ist die Textbeschriftung optional.

Interaktion

Durch Klicken auf die Sprachauswahl wird ein standardmäßiges Dropdown-Auswahlmenü mit einer Liste der verfügbaren Sprachen angezeigt, aus der Benutzer eine Sprache auswählen können. Nach der Auswahl einer geeigneten Sprache ändert sich die Benutzeroberfläche, ohne dass der Ablauf beeinträchtigt wird.

Code

<LanguageSelector id="languageSelector" />

Importanweisung

import { LanguageSelector } 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

iderforderlich

Typ

string

Beschreibung

Unique identifier for the component.

availableLanguageValues

Typ

string[]

Beschreibung

List of available languages to select from. Uses languages from LanguageContext if this list is not provided.

className

Typ

string

Beschreibung

CSS class name for this component.

controlClassName

Typ

string

Beschreibung

CSS class passed to the control element.

hideDropdownIndicator

Typ

boolean

Beschreibung

If set to true, hides the dropdown indicator.

hideLabel

Typ

boolean

Beschreibung

If set to true, hides the selected language label.

languageValue

Typ

string

Beschreibung

Default language value. Uses the language from LanguageContext if this value is not provided.

onLanguageValueChange

Typ

function (React.ChangeEvent<HTMLInputElement>, string)

Beschreibung

The callback triggered on language value change.

renderLanguageLabel

Typ

function

Beschreibung

Method for rendering the language label based on language code.

Standardwert

( locale: LanguageKey ): string | undefined => { const languageCode = getLanguageFromLocale(locale); const countryCode = getCountryCodeFromLocale(locale); const languageMapping = languageCode !== undefined ? languages[languageCode] : undefined; const countryMapping = countryCode !== undefined ? countries[countryCode] : undefined; if (languageMapping && countryMapping) { return `${languageMapping.native} (${countryMapping.native})`; } if (languageCode !== undefined) { if (languagesListWithPseudoLocales[locale]) { return languagesListWithPseudoLocales[locale].native; } } return undefined; }

skipPropagation

Typ

boolean

Beschreibung

If set to true, prevents updating LocalizationService, just triggers onValueChange.

toggleClassName

Typ

string

Beschreibung

CSS class passed to the toggle button.

Hooks

Für language selector sind keine Hooks verfügbar.

Übersetzungsschlüssel

Es gibt keine Übersetzungen für language selector.

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 zum korrekten Design einer Sprachauswahl und den verschiedenen von Guidewire bereitgestellten Konfigurationsoptionen.

Einfaches Beispiel

Die Komponente LanguageSelector rendert eine Dropdown-Liste, in der ein Benutzer eine Sprache auswählen kann.

<LanguageSelector
  id="languageSelector
"/>

Beispiel für eine Liste

Standardmäßig füllt die LanguageSelector-Komponente ihre Liste der Sprachen automatisch basierend auf Ihrem Gebietsschemakontext auf. Sie können diese Einstellung überschreiben, indem Sie eine Liste von ISO-Codes für die Eigenschaft availableLanguageValues bereitstellen.

<LanguageSelector 
  id="languageSelector"
  availableLanguageValues={['en', 'fr-FR', 'de-DE']}
/>

Änderungsprotokoll