I18-custom-examples.md

Simple text

Angular

<h2
  i18n="KIBANA-DISCOVER-SEARCHING"
  default-message="Searching"
></h2>

React

<h2>
  <I18n
    path="KIBANA-DISCOVER-SEARCHING"
    defaultMessage="Searching"
  />
</h2>

Translation

{
  "KIBANA-DISCOVER-SEARCHING": "Searching"
}

Attribute

Angular

<input
  type="text"
  placeholder="{{ 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER' | i18n: { defaultMessage: 'Search...' } }}"
>

React

<I18n>
  {translate => (
    <input
      type="text"
      placeholder={translate({
        path: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
        defaultMessage: 'Search...',
      })}
    />
  )}
</I18n>

Attribute with variables interpolation

Angular

<input
  type="text"
  placeholder="{{ 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER' | i18n: {
    vars: { TITLE: service.title },
    defaultMessage: '{TITLE} search',
  } }}"
>

React

<I18n>
  {translate => (
    <input
      type="text"
      placeholder={translate({
        path: 'KIBANA-MANAGEMENT-OBJECTS-SEARCH_PLACEHOLDER',
        vars: { TITLE: service.title },
        defaultMessage: '{TITLE} search',
      })}
    />
  )}
</I18n>

Text with plurals

Angular

<span
  i18n="KIBANA-DISCOVER-HITS"
  vars="{HITS: hits}"
  default-message="{HITS, plural, one {# hit} other {# hits}}"
></span>

React

<I18n
  path="KIBANA-DISCOVER-HITS"
  vars={{ HITS: hits }}
  defaultMessage="{HITS, plural, one {# hit} other {# hits}}"
/>

Translation

{
  "KIBANA-DISCOVER-HITS": "{HITS, plural, one {# hit} other {# hits}}"
}

Text with nested formatting

Angular

<span
  i18n="KIBANA-DISCOVER-REFINE_SEARCH"
  vars="{SIZE: '<b>{{opts.sampleSize}}</b>'}"
  default-message="These are the first {SIZE} documents matching your search, refine your search to see others."
></span>

React

<I18n
  path="KIBANA-DISCOVER-REFINE_SEARCH"
  vars={{ SIZE: <b>{opts.sampleSize}</b> }}
  defaultMessage="These are the first {SIZE} documents matching your search, refine your search to see others."
/>

Translation

{
  "KIBANA-DISCOVER-REFINE_SEARCH": "These are the first {SIZE} documents matching your search, refine your search to see others."
}

Date

Supported parameters are short, default, long, or full.

Angular

<span
  i18n="KIBANA-TODAY"
  vars="{ DATE: Date.now() }"
  default-message="Today is {DATE, date}"
></span>

React

<I18n
  path="KIBANA-TODAY"
  vars={{ DATE: Date.now() }}
  defaultMessage="Today is {DATE, date}"
/>

Translation

{
  "KIBANA-TODAY": "Today is {DATE, date}"
}

// 'Today is Apr 10, 2018'

Duration

Represent a duration in seconds as a string.

Angular

<span
  i18n="KIBANA-SINCE"
  vars="{ D: 123 }"
  default-message="It has been {D, duration}"
></span>

React

<I18n
  path="KIBANA-SINCE"
  vars={{ D: 123 }}
  defaultMessage="It has been {D, duration}"
/>

Translation

{
  "KIBANA-SINCE": "It has been {D, duration}"
}

// 'It has been 2:03'

Number

Supported parameters are integer, percent, or currency.

Angular

<span
  i18n="KIBANA-ALMOST"
  vars="{ N: 3.14 }"
  default-message="{N} is almost {N, number, integer}"
></span>

React

<I18n
  path="KIBANA-ALMOST"
  vars={{ N: 3.14 }}
  defaultMessage="{N} is almost {N, number, integer}"
/>

Translation

{
  "KIBANA-ALMOST": "{N} is almost {N, number, integer}"
}

// '3.14 is almost 3'

Time

Supported parameters are short, default, long, or full.

Angular

<span
  i18n="KIBANA-NOW"
  vars="{ T: Date.now() }"
  default-message="The time is now {T, time}"
></span>

React

<I18n
  path="KIBANA-NOW"
  vars={{ T: Date.now() }}
  defaultMessage="The time is now {T, time}"
/>

Translation

{
  "KIBANA-NOW": "The time is now {T, time}"
}

// 'The time is now 10:00:00 PM'