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:

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:

An example of a user that has a first and last name:

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

#

Slots

#