SubmitBar
Used at the bottom of e-commerce checkout pages or shopping carts to display total amounts, selected items, and a submit button. It supports safe area insets and "select all" features.
Basic Usage
Displays the total amount and handle the checkout button click. Requires height: 56px or a wrapping container to take up normal document flow space, not needed if sticking to bottom.
Shopping Cart Mode (with Checkbox)
Includes a "select all" checkbox, suitable for shopping cart pages. By configuring the cent-unit property, you can directly pass backend amounts calculated in "cents".
Disabled and Loading State
The component has built-in disabled and loading states, and supports displaying prominent warning/tip banners using the tip property (e.g. out of delivery range).
Advanced Slot Customization
You can use the #tip, #left, #button, and #right slots to implement an extremely customized shopping checkout bar layout.
Use in Nuxt
This component is fully compatible with Nuxt 3/4 SSR rendering.
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@yh-ui/nuxt'],
yhUI: {
// 默认已自动按需引入，无需特殊配置
// options...
}
})2
3
4
5
6
7
8
API
Props
| Parameter | Description | Type | Default |
|---|---|---|---|
| price | Amount | number | 0 |
| currency | Currency symbol | string | ¥ |
| cent-unit | Whether price is in cent unit | boolean | false |
| decimal-length | Decimal length to keep | number | 2 |
| label | Prefix label for the total text | string | 'Total:' |
| button-text | Submit button text | string | — |
| button-type | Button type (primary danger etc) | SubmitBarButtonType | 'primary' |
| show-checkbox | Whether to display the select-all checkbox | boolean | false |
| checked | Check state, supports v-model:checked | boolean | false |
| indeterminate | Indeterminate half-checked state | boolean | false |
| selected-count | Number of items selected | number | 0 |
| tip | Top tip text | string | — |
| disabled | Whether the button is disabled | boolean | false |
| loading | Whether to show loading state | boolean | false |
| safe-area-inset-bottom | Whether to enable bottom safe area inset | boolean | true |
| theme-overrides | Custom theme overriding object | Record<string, string> | {} |
Events
| Event Name | Description | Callback Parameters |
|---|---|---|
| submit | Triggered when submit button clicked | (e: MouseEvent) |
| update:checked | Triggered when checkbox state bidirectional changes | (val: boolean) |
| check-change | Triggered when checkbox actively toggled | (val: boolean) |
Slots
| Slot Name | Description | Parameters |
|---|---|---|
| default | Default slot | - |
| tip | Custom top tip banner content | - |
| left | Custom content next to select-all checkbox | - |
| right | Custom content next to submit button | - |
| price | Completely override the middle price display area | - |
| button | Override the submit button style and structure | - |
Expose
This component does not expose public instance methods or properties.
Theme Variables
Easily customize visually by passing theme-overrides prop.
| Variable Name | Description | Default Value |
|---|---|---|
--yh-submit-bar-bg | Component background color | var(--yh-bg-color) |
--yh-submit-bar-border | Top border color | var(--yh-border-color-lighter) |
--yh-submit-bar-height | Component height | 56px |
--yh-submit-bar-price-color | Reddish main price color | var(--yh-color-danger) |
--yh-submit-bar-price-size | Number size of exact integer portion | 22px |
--yh-submit-bar-label-color | "Total:" label color | var(--yh-text-color-regular) |
--yh-submit-bar-btn-radius | Button radius | var(--yh-radius-large) |
--yh-submit-bar-btn-min-width | Button container min width | 108px |
--yh-submit-bar-tip-bg | Tip banner background | var(--yh-color-warning-light-9) |
--yh-submit-bar-tip-color | Tip banner text color | var(--yh-color-warning) |
--yh-submit-bar-shadow | Bottom fixed shadow | 0 -2px 12px var(--yh-shadow-color) |
--yh-submit-bar-z-index | Submitting z-index fixing layer | 200 |
Type Exports
| Name | Description |
|---|---|
YhSubmitBarProps | Component props type |
YhSubmitBarEmits | Component emits type |
YhSubmitBarSlots | Component slots type |
YhSubmitBarButtonType | Button type union |
YhSubmitBarInstance | Component instance type |