Light Dark System

Translation Group

<zn-translation-group> | ZnTranslationGroup
Since ?

A container that provides a shared language toggle for multiple zn-translations children.

The Translation Group component wraps multiple zn-translations components and provides a single, shared language navbar. Instead of each translation input having its own language toggle, the group controls all of them simultaneously. 

<zn-translation-group
  label="Product Content"
  languages='{"en":"English","fr":"French","de":"German"}'>
  <zn-translations
    label="Name"
    name="name"
    values='{"en":"Wireless Headphones","fr":"Écouteurs sans fil","de":"Kabellose Kopfhörer"}'
  ></zn-translations>
  <zn-translations
    label="Description"
    name="description"
    values='{"en":"Premium noise-cancelling headphones","fr":"Écouteurs antibruit premium","de":"Premium-Kopfhörer mit Geräuschunterdrückung"}'
  ></zn-translations>
</zn-translation-group>

Examples

Basic Usage

A translation group with two translation inputs sharing one language toggle.

<zn-translation-group languages='{"en":"English","fr":"French"}'>
  <zn-translations label="Title" name="title"></zn-translations>
  <zn-translations label="Subtitle" name="subtitle"></zn-translations>
</zn-translation-group>

With Label

Use the label attribute to add a descriptive label above the shared navbar.

<zn-translation-group
  label="Page Translations"
  languages='{"en":"English","fr":"French","es":"Spanish"}'>
  <zn-translations label="Heading" name="heading"></zn-translations>
  <zn-translations label="Body" name="body"></zn-translations>
</zn-translation-group>

Pre-filled Values

Set initial translations on each child. The group automatically collects all language codes from children and displays them as tabs. 

<zn-translation-group
  label="Notification Templates"
  languages='{"en":"English","fr":"French","de":"German","es":"Spanish"}'>
  <zn-translations
    label="Subject"
    name="subject"
    values='{"en":"Welcome aboard!","fr":"Bienvenue !","de":"Willkommen!","es":"Bienvenido!"}'
  ></zn-translations>
  <zn-translations
    label="Preview Text"
    name="preview"
    values='{"en":"Get started with your account","fr":"Commencez avec votre compte","de":"Starten Sie mit Ihrem Konto","es":"Comience con su cuenta"}'
  ></zn-translations>
</zn-translation-group>

Many Fields

The group scales well with multiple translation inputs under a single toggle.

<zn-translation-group
  label="SEO Metadata"
  languages='{"en":"English","fr":"French","de":"German"}'>
  <zn-translations label="Page Title" name="seo-title"></zn-translations>
  <zn-translations label="Meta Description" name="seo-description"></zn-translations>
  <zn-translations label="Open Graph Title" name="og-title"></zn-translations>
  <zn-translations label="Open Graph Description" name="og-description"></zn-translations>
</zn-translation-group>

Flush Layout

Remove padding for a more compact appearance using the flush attribute.

<zn-translation-group
  flush
  label="Compact Translations"
  languages='{"en":"English","fr":"French"}'>
  <zn-translations label="Label" name="label"></zn-translations>
  <zn-translations label="Placeholder" name="placeholder"></zn-translations>
</zn-translation-group>

Listening to Language Changes

The group emits a zn-language-change event when the active language changes.

Active Language: en 
<zn-translation-group
  id="group-events"
  label="Event Demo"
  languages='{"en":"English","fr":"French","de":"German"}'>
  <zn-translations label="Title" name="title"></zn-translations>
  <zn-translations label="Description" name="description"></zn-translations>
</zn-translation-group>

<div style="margin-top: 1rem; padding: 1rem; background: var(--zn-color-neutral-50); border-radius: 4px;">
  <strong>Active Language:</strong>
  <span id="active-lang" style="font-family: monospace;">en</span>
</div>

<script type="module">
  const group = document.getElementById('group-events');
  const display = document.getElementById('active-lang');

  group.addEventListener('zn-language-change', (event) => {
    display.textContent = event.detail.language;
  });
</script>

Real-World Use Case: Product Content Management

A complete example showing how the translation group simplifies a product editing form.

Cancel Save Product 
<div style="max-width: 800px;">
  <zn-panel caption="Product Details" icon="inventory_2">
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      <zn-input
        label="Product SKU"
        value="PROD-12345"
        readonly
      ></zn-input>

      <zn-translation-group
        label="Translatable Content"
        languages='{"en":"English","fr":"French","de":"German","es":"Spanish"}'>
        <zn-translations
          name="name"
          label="Product Name"
          values='{"en":"Premium Wireless Headphones","fr":"Écouteurs sans fil premium","de":"Premium kabellose Kopfhörer","es":"Auriculares inalámbricos premium"}'
        ></zn-translations>
        <zn-translations
          name="short-description"
          label="Short Description"
          values='{"en":"High-quality wireless audio","fr":"Audio sans fil haute qualité","de":"Hochwertiges kabelloses Audio","es":"Audio inalámbrico de alta calidad"}'
        ></zn-translations>
        <zn-translations
          name="description"
          label="Full Description"
          values='{"en":"Experience premium sound with active noise cancellation","fr":"Découvrez un son premium avec suppression active du bruit","de":"Erleben Sie Premium-Sound mit aktiver Geräuschunterdrückung","es":"Experimente sonido premium con cancelación activa de ruido"}'
        ></zn-translations>
      </zn-translation-group>

      <zn-input
        label="Price"
        type="currency"
        value="299.99"
      ></zn-input>
    </div>

    <div slot="footer" style="display: flex; gap: 0.5rem; justify-content: flex-end;">
      <zn-button color="secondary">Cancel</zn-button>
      <zn-button color="success">Save Product</zn-button>
    </div>
  </zn-panel>
</div>

Properties

Property Type Default Description
label string '' Label displayed above the language navbar
languages Record<string, string> {en: "EN"} Object mapping language codes to display names
flush boolean false Removes padding for compact layout

Events

Event Description Event Detail
zn-language-change Emitted when the active language changes { language: string }

Slots

Slot Description
(default) Place <zn-translations> elements here
label Alternative to the label attribute for rich HTML content

CSS Parts

Part Description
form-control The outer form control wrapper
form-control-label The label wrapper
navbar The shared language navigation bar
translations The container wrapping the slotted children

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

To import this component from the CDN using a script tag: 

<script type="module" src="https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.69/dist/components/translation-group/translation-group.js"></script>

To import this component from the CDN using a JavaScript import: 

import 'https://cdn.jsdelivr.net/npm/@kubex/zinc@1.0.69/dist/components/translation-group/translation-group.js';

To import this component using a bundler:

import '@kubex/zinc/dist/components/translation-group/translation-group.js';

Slots

Name Description
(default) Default slot for <zn-translations> elements.
label The group label. Alternatively, use the label attribute.

Learn more about using slots.

Properties

Name Description Reflects Type Default
label The group label displayed above the language navbar. string ''
languages The available languages for the group. Record { 'en': 'EN' }
flush When true, applies flush styling to the navbar. boolean false
updateComplete A read-only promise that resolves when the component has finished updating.

Learn more about attributes and properties.

Events

Name React Event Description Event Detail
zn-language-change Emitted when the active language changes. Detail: { language: string }. -

Learn more about events.

Dependencies

This component automatically imports the following dependencies.

  • <zn-dropdown>
  • <zn-example>
  • <zn-navbar>