Result
Used to provide feedback on the results of a series of operations or tasks.
Basic Usage
Use icon, title, and sub-title to render a standard result state.
Operation Successful
Your order has been submitted successfully, expected delivery in 3-5 business days.
Basic Usage
Different Statuses
Switch between success, warning, error, and info via the icon prop.
Success
Submitted successfully
Warning
Please note this operation
Error
Submission failed, please try again
Information
This is a prompt message
Different Statuses
Custom Content
Use slots such as icon and extra to customize the result page. The default slot is typically used for action buttons.
📄
404
Sorry, the page you visited does not exist
Please check if the URL is correct, or return to home.
Custom Content
Use in Nuxt
YhResult works well in Nuxt 3/4 as a regular feedback component and also fits global error pages such as error.vue.
404
Sorry, the page you visited does not exist
Use in Nuxt (Mock error.vue)
API
Props
| Prop | Description | Type | Default |
|---|---|---|---|
title | Title | string | undefined |
sub-title | Sub-title | string | undefined |
icon | Result icon type | 'success' | 'warning' | 'error' | 'info' | 'info' |
theme-overrides | Component-level theme variable overrides | ComponentThemeVars | undefined |
Events
This component does not expose component events.
Slots
| Slot | Description |
|---|---|
default | Actions area |
icon | Custom icon content |
title | Custom title content |
sub-title | Custom sub-title content |
extra | Extra content area between sub-title and actions |
Expose
This component does not expose public instance methods or properties.
Theme Variables
| Variable | Description | Default |
|---|---|---|
--yh-result-padding | Container padding | 40px 30px |
--yh-result-icon-size | Icon size | 72px |
--yh-result-icon-margin | Icon margin bottom | 20px |
--yh-result-title-size | Title font size | 20px |
--yh-result-title-color | Title color | var(--yh-text-color-primary, #303133) |
--yh-result-subtitle-size | Sub-title font size | 14px |
--yh-result-subtitle-color | Sub-title color | var(--yh-text-color-secondary, #909399) |
Type Exports
| Name | Description |
|---|---|
YhResultProps | Component props type |
YhResultSlots | Component slots type |
YhResultIconType | Result icon union type |
YhResultInstance | Component instance type |