Empty
Vue-based themes will soon be deprecated. Please switch to React-based themes, as all future updates and support will focus exclusively on React.
Empty condition is necessary whenever there is no data present on any part of any page, at that time empty message is displayed to give necessary information about page’s current state. It can be enabled by giving any condition. This contain a message/title and button which can be redirected to any page of the application.
Setup
To display empty screen message we need to use <fdk-empty-state> action component, which can be triggered on any condition and we can pass various props inside it to use its functionality, to use this action component we can use the following code:
theme/templates/components/empty-state.vue
<fdk-empty-state :title="'No items found'"
:button="{text: '', link: ''}">
</fdk-empty-state>
Props
We can pass following props inside the <fdk-empty-state> action component:
| Key | Type | Description |
|---|---|---|
title | string | the message which will be displayed on empty screen |
button | object | this contains button text for displaying on button and the link on which the button will redirect to |