# UI: Helpers

> cx und die Texte, die die Komponenten selbst zeigen.

Source: https://pithyx.org/de/docs/reference/sdk/ui/helpers/
Markdown: https://pithyx.org/de/docs/reference/sdk/ui/helpers.md

cx und die Texte, die die Komponenten selbst zeigen. Importiere die Token-Datei einmal (`@pithyx/ui/tokens.css`) und umschließe die App mit `UiProvider`; siehe [@pithyx/ui](https://pithyx.org/de/docs/sdk/ui/).

Beim Build aus den TSDoc-Kommentaren von @pithyx/ui 1.0.0-rc.9 erzeugt; der Text unter den Überschriften ist der Kommentar im Quelltext und bleibt Englisch.

## Schnittstellen

### UiTexts

The texts the components show or announce on their own. They live with every other translation, in
`i18n/<lang>/ui.json` of the repository, and the build bundles them, so the package needs no i18n library.

#### Eigenschaften

##### password

```ts
password: object;
```

The reveal button of `PasswordField`.

###### show

```ts
show: string;
```

Label while the password is hidden.

###### hide

```ts
hide: string;
```

Label while the password is shown.

##### search

```ts
search: object;
```

The clear button of `SearchField`.

###### clear

```ts
clear: string;
```

Label of the clear button.

## Funktionen

### cx()

```ts
function cx(...names): string;
```

Joins class names, skipping empty values.

#### Parameter

| Parameter  | Typ                                              | Beschreibung                                                              |
| ---------- | ------------------------------------------------ | ------------------------------------------------------------------------- |
| ...`names` | (`string` \| `false` \| `null` \| `undefined`)[] | Class names; `false`, `null`, `undefined` and empty strings are left out. |

#### Rückgabewert

`string`

The names joined by spaces.

#### Beispiel

```ts
cx(styles.item, isActive && styles.active); // "item active" or "item"
```

---

### uiTexts()

```ts
function uiTexts(locale): UiTexts;
```

The texts for a locale such as `de-AT`, by its language; English for a language without texts.

#### Parameter

| Parameter | Typ      | Beschreibung  |
| --------- | -------- | ------------- |
| `locale`  | `string` | A BCP 47 tag. |

#### Rückgabewert

[`UiTexts`](#uitexts)

The texts in that language, or in English.