DataState

Switches between loading, empty, error, offline and ready content by the state prop.

Import

Vue

import { UiDataState } from '@ziyarago/ui/vue'

Loading hotels

Vue

<UiDataState state="loading" title="Loading hotels" />

No trips yetPlan your first journey.

Vue

<UiDataState
  state="empty"
  title="No trips yet"
  description="Plan your first journey."
 />

Could not loadCheck your connection.

Vue

<UiDataState
  state="error"
  title="Could not load"
  description="Check your connection."
 />

No internetSaved guides still work.

Vue

<UiDataState state="offline" />

Switches between loading, empty, error, offline and the real content based on one state value; wrap any data-driven block with it.

PropType and valuesDefaultDescription

statereadyloadingemptyerroroffline'ready'Which view to show. "ready" renders the children.

titlestring—Overrides the default heading of the non-ready views ("Loading…", "Nothing here yet", "Something went wrong", "No internet").

descriptionstring—Supporting text for empty, error and offline views (offline defaults to "Saved guides still work.").

retryLabelstring—Retry button label for error ("Retry") and offline ("Try again").

Vue: named slots. React: a prop with the same name; default is children.

defaultContent shown when state is "ready".

Vue: @name. React: onName.

retryCalled when the retry button of the error or offline view is clicked.