Overview
The KOptionalText component is a wrapper for KEmptyPlaceholder used in situations where a text can be missing. If the text exists and is not empty, the text will be rendered, if not, a wide, light-gray dash will be rendered, like this: —
Using the KOptionalText component is preferred to leaving a empty or blank space because it communicates to the user that a value could possibly exist there, and aids with visual scanning in tables, grids, and lists of data.
Example using props
In the example below, an average score cannot be calculated until the user has attempted at least one exercise:
| Username | Number of exercises | Average score |
|---|---|---|
| user_1 | 11 | 9% |
| user_2 | 0 | — |
| user_3 | 5 | 100% |
For this example, `text` prop is used to pass in the text to be displayed. If the text is empty or undefined, the placeholder will be displayed:
<KOptionalText text="9%" :appearanceOverrides="{ color: 'red' }" />
<KOptionalText text="" /> <!-- empty string, show placeholder -->
Example using slot
In the example below, it displays user information, highlighting the user's last name, but first and last names are optional:
- Id: 1
- Name: — ...
An example of a user that has a first and last name:
- Id: 2
- Name: Peter Jhonson ...
For this example, component slot is used to pass in some spans to be displayed. Slots can be used when there is a more complex structure to be displayed.
<KOptionalText>
<span> {{ user.name }} </span>
<span class="highlight"> {{ user.lastname }} </span>
</KOptionalText>
Props
| Name | Description | Type | Default | Required |
|---|---|---|---|---|
text | Text to display. If the text is missing or empty, then KEmptyPlaceholder will be rendered | string |
null
| — |
appearanceOverrides | If provided, sets the styles of the text | object|string |
null
| — |
Slots
| Name | Description |
|---|---|
default | Pass sub-components to render, if none of the nodes in the entire node hierarchy contain text, then the KEmptyPlaceholder component will be rendered |