OfflineState
A state view shown when the network is unavailable.
Usage
Basic
Loading demo...
Best Practices
- Use it for recoverable network or offline states; use
TxErrorStateor a product-specific error for server failures unrelated to connectivity. - Tell users whether local drafts, queued actions, or cached data are still safe.
- Keep the primary action on retry; leave destructive actions out.
- Use
surface="card"in panels so the state shares the container of the loaded content.
API Reference
Takes every TxEmptyState prop, event, and slot except variant, which is fixed to offline.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
title | string | preset title | Overrides the preset title. |
description | string | preset description | The network problem, and whether current work is safe. |
icon | TxIconSource | string | null | preset illustration | Replaces the illustration; null hides the icon area. |
iconSize | number | size preset | Icon size in px. |
layout | 'vertical' | 'horizontal' | 'vertical' | Layout direction. |
align | 'start' | 'center' | 'end' | 'center' | Content alignment. |
size | 'small' | 'medium' | 'large' | 'medium' | Spacing and illustration size. |
surface | 'plain' | 'card' | 'plain' | card adds a card border. |
primaryAction | EmptyStateAction | - | Generated primary action. |
secondaryAction | EmptyStateAction | - | Generated secondary action. |
actionSize | TxButtonProps['size'] | 'sm' | Default size of the generated buttons. |
loading | boolean | false | Shows a spinner when no custom icon is given. |
Events
| Event | Params | Description |
|---|---|---|
primary | - | Fires when the generated primary action is clicked. |
secondary | - | Fires when the generated secondary action is clicked. |
Slots
| Slot | Props | Description |
|---|---|---|
icon | - | Replaces the illustration or icon. |
title | - | Replaces the title. |
description | - | Replaces the description. |
actions | - | Replaces the generated primary and secondary buttons. |
Technologies
- Source:
packages/tuffex/packages/components/src/offline-state/.
查看源码
packages/tuffex/packages/components/src/offline-state/index.ts