Skip to content

Wbbb UI API Reference

This file is generated from component props and SFC contracts. Run npm run docs:api after a public API change.

All components support customClass and customStyle through WbbbCommonProps unless noted otherwise.

Button 按钮

Primary actions with disabled and loading feedback.

  • Category: Basic
  • Import: wbbb-ui/components/button

Props

NameDescriptionTypeRequiredDefault
blockMakes the button occupy the full available width.booleanNofalse
disabledPrevents user interaction with the component.booleanNofalse
formTypeSets the native form action performed by the button.'submit' | 'reset'Noundefined
iconSets the icon name or icon content.stringNo''
loadingShows a loading state and blocks repeated interaction when applicable.booleanNofalse
loadingTextSets the text displayed while loading.stringNo''
openTypeSets the uni-app open capability used by the button.stringNo''
plainUses the outlined or low-emphasis visual style.booleanNofalse
roundUses fully rounded corners or a pill shape.booleanNofalse
sizeSets the component size.WbbbSizeNo'medium'
typeSets the semantic type or variant of the component.WbbbTypeNo'default'

Events

  • click

Slots

  • default

Icon 图标

Controlled icons and custom sources.

  • Category: Basic
  • Import: wbbb-ui/components/icon

Props

NameDescriptionTypeRequiredDefault
codeProvides the glyph code when rendering a font icon directly.stringNo''
colorSets the primary display color.stringNo''
fontFamilySets the font family used for a direct font icon.stringNo''
fontSetSelects a registered Iconfont set.stringNo''
nameProvides the item name or identifier.stringNo''
sizeSets the component size.WbbbNumericNo32
srcSets the source URL or local path of the resource.stringNo''

Events

  • None

Slots

  • None

Text 文本

Semantic text and ellipsis handling.

  • Category: Basic
  • Import: wbbb-ui/components/text

Props

NameDescriptionTypeRequiredDefault
colorSets the primary display color.stringNo''
ellipsisTruncates overflowing text with an ellipsis.booleanNofalse
sizeSets the component size.WbbbNumericNo''
typeSets the semantic type or variant of the component.'default' | 'secondary' | 'primary' | 'success' | 'warning' | 'danger'No'default'

Events

  • None

Slots

  • default

Image 图片

Image loading and error placeholders.

  • Category: Basic
  • Import: wbbb-ui/components/image

Props

NameDescriptionTypeRequiredDefault
errorTextSets the default message shown after a loading failure.stringNo'图片加载失败'
heightSets the component height.WbbbNumericNo''
lazyLoadDefers image loading until it is needed.booleanNotrue
modeSets the display or image fitting mode.stringNo'aspectFill'
radiusSets the corner radius of the component.WbbbNumericNo0
showErrorControls whether the built-in error placeholder is shown.booleanNotrue
showLoadingControls whether the built-in loading placeholder is shown.booleanNotrue
srcSets the source URL or local path of the resource.stringNo''
loadingShows a loading state and blocks repeated interaction when applicable.booleanNofalse
loadingTextSets the text displayed while loading.stringNo'加载中'
widthSets the component width.WbbbNumericNo'100%'

Events

  • error
  • load

Slots

  • error

Badge 徽标

Numeric badges and status dots.

  • Category: Basic
  • Import: wbbb-ui/components/badge

Props

NameDescriptionTypeRequiredDefault
dotDisplays the badge as a small status dot.booleanNofalse
maxSets the maximum allowed numeric value.numberNo99
showZeroKeeps a zero value visible in a badge.booleanNofalse
typeSets the semantic type or variant of the component.WbbbTypeNo'danger'
valueProvides the displayed value or item value.number | stringNo''

Events

  • None

Slots

  • default

Tag 标签

Compact status tags.

  • Category: Basic
  • Import: wbbb-ui/components/tag

Props

NameDescriptionTypeRequiredDefault
clickableMarks the component as interactive and emits click events.booleanNofalse
closableShows a close control and allows the item to be dismissed.booleanNofalse
plainUses the outlined or low-emphasis visual style.booleanNofalse
roundUses fully rounded corners or a pill shape.booleanNofalse
sizeSets the component size.WbbbSizeNo'medium'
typeSets the semantic type or variant of the component.WbbbTypeNo'default'

Events

  • click
  • close

Slots

  • default

Avatar 头像

Avatars and fallback placeholders.

  • Category: Basic
  • Import: wbbb-ui/components/avatar

Props

NameDescriptionTypeRequiredDefault
altProvides alternative text for an image resource.stringNo''
roundUses fully rounded corners or a pill shape.booleanNotrue
sizeSets the component size.WbbbNumericNo80
srcSets the source URL or local path of the resource.stringNo''

Events

  • error

Slots

  • default

Divider 分割线

Content separators and labels.

  • Category: Basic
  • Import: wbbb-ui/components/divider

Props

NameDescriptionTypeRequiredDefault
dashedUses a dashed divider line instead of a solid one.booleanNofalse
directionSets the layout or divider direction.WbbbDirectionNo'horizontal'
textPositionSets the position of text relative to the divider.'left' | 'center' | 'right'No'center'

Events

  • None

Slots

  • default

Loading 加载

Progress feedback while loading.

  • Category: Basic
  • Import: wbbb-ui/components/loading

Props

NameDescriptionTypeRequiredDefault
colorSets the primary display color.stringNo''
sizeSets the component size.WbbbNumericNo32
textProvides the primary display text.stringNo''
verticalUses a vertical layout direction.booleanNofalse

Events

  • None

Slots

  • None

Cell 单元格

Information rows and grouped containers.

  • Category: Layout
  • Import: wbbb-ui/components/cell

Props

NameDescriptionTypeRequiredDefault
borderControls whether a separator or border is displayed.booleanNotrue
clickableMarks the component as interactive and emits click events.booleanNofalse
iconSets the icon name or icon content.stringNo''
labelSets the visible field or item label.stringNo''
requiredMarks the field as required for validation or display.booleanNofalse
titleSets the component title text.stringNo''
valueProvides the displayed value or item value.stringNo''

Events

  • click

Slots

  • title
  • default

Grid 宫格

Grid layouts and grid items.

  • Category: Layout
  • Import: wbbb-ui/components/grid

Props

NameDescriptionTypeRequiredDefault
borderedControls whether the container renders an outer border.booleanNofalse
columnsSets the number of columns in the grid.numberNo4
gapSets the spacing between repeated items.numberNo16

Events

  • None

Slots

  • default

List 列表

Selectable business lists.

  • Category: Layout
  • Import: wbbb-ui/components/list

Props

NameDescriptionTypeRequiredDefault
borderControls whether a separator or border is displayed.booleanNotrue
itemsProvides the data items rendered by the component.WbbbListItem[]No() => []

Events

  • select

Slots

  • default

Card 卡片

Content cards and layered containers.

  • Category: Layout
  • Import: wbbb-ui/components/card

Props

NameDescriptionTypeRequiredDefault
borderedControls whether the container renders an outer border.booleanNotrue
extraProvides supplementary content in the component header.stringNo''
shadowAdds an elevated shadow to the component.booleanNofalse
titleSets the component title text.stringNo''

Events

  • None

Slots

  • header
  • default
  • footer

Sticky 吸顶

Sticky content areas.

  • Category: Layout
  • Import: wbbb-ui/components/sticky

Props

NameDescriptionTypeRequiredDefault
offsetTopSets the distance from the top before sticky positioning starts.WbbbNumericNo0
zIndexSets the stacking order of the component.numberNo700

Events

  • None

Slots

  • default

SafeArea 安全区

Device safe-area adaptation.

  • Category: Layout
  • Import: wbbb-ui/components/safe-area

Props

NameDescriptionTypeRequiredDefault
bottomEnables the bottom safe-area inset.booleanNotrue
topEnables the top safe-area inset.booleanNofalse

Events

  • None

Slots

  • default

Page navigation bars.

  • Category: Layout
  • Import: wbbb-ui/components/navbar

Props

NameDescriptionTypeRequiredDefault
borderControls whether a separator or border is displayed.booleanNotrue
fixedFixes the component to its viewport position.booleanNofalse
leftArrowShows a back arrow on the left side.booleanNofalse
leftTextSets the text shown on the left side.stringNo''
placeholderSets placeholder text when no value is present.booleanNofalse
rightTextSets the text shown on the right side.stringNo''
safeAreaTopAdds padding for the device top safe area.booleanNotrue
titleSets the component title text.stringNo''

Events

  • clickLeft
  • clickRight

Slots

  • left
  • title
  • right

Tabbar 底部导航栏

Bottom application navigation.

  • Category: Layout
  • Import: wbbb-ui/components/tabbar

Props

NameDescriptionTypeRequiredDefault
activeColorSets the color used by the active state.stringNo'var(--wbbb-color-primary)'
fixedFixes the component to its viewport position.booleanNotrue
inactiveColorSets the color used by the inactive state.stringNo'var(--wbbb-color-text-secondary)'
itemsProvides the data items rendered by the component.WbbbTabbarItem[]No() => []
modelValueProvides the current value used by v-model.string | numberNo''
safeAreaInsetBottomAdds padding for the device bottom safe area.booleanNotrue
zIndexSets the stacking order of the component.numberNo800

Events

  • update:modelValue
  • change

Slots

  • default

Tabs 标签页

Content tab switching.

  • Category: Layout
  • Import: wbbb-ui/components/tabs

Props

NameDescriptionTypeRequiredDefault
activeColorSets the color used by the active state.stringNo''
itemsProvides the data items rendered by the component.WbbbTabItem[]No() => []
modelValueProvides the current value used by v-model.string | numberNo''
scrollableAllows tab items to scroll horizontally when needed.booleanNofalse

Events

  • update:modelValue
  • change

Slots

  • default

Input 输入框

Single-line text input.

  • Category: Form
  • Import: wbbb-ui/components/input

Props

NameDescriptionTypeRequiredDefault
clearableShows a control for clearing the current input value.booleanNofalse
disabledPrevents user interaction with the component.booleanNofalse
errorShows the component in its error visual state.booleanNofalse
maxlengthLimits the number of characters that can be entered.numberNo140
modelValueProvides the current value used by v-model.string | numberNo''
placeholderSets placeholder text when no value is present.stringNo''
readonlyPrevents editing while keeping the value readable.booleanNofalse
typeSets the semantic type or variant of the component.'text' | 'number' | 'idcard' | 'digit' | 'safe-password' | 'nickname'No'text'

Events

  • update:modelValue
  • blur
  • change
  • clear
  • confirm
  • focus

Slots

  • None

Textarea 文本域

Multi-line text with character counting.

  • Category: Form
  • Import: wbbb-ui/components/textarea

Props

NameDescriptionTypeRequiredDefault
autoHeightMakes the textarea grow with its content.booleanNofalse
disabledPrevents user interaction with the component.booleanNofalse
errorShows the component in its error visual state.booleanNofalse
maxlengthLimits the number of characters that can be entered.numberNo200
modelValueProvides the current value used by v-model.stringNo''
placeholderSets placeholder text when no value is present.stringNo''
readonlyPrevents editing while keeping the value readable.booleanNofalse
showCountShows the current character count.booleanNofalse

Events

  • update:modelValue
  • blur
  • change
  • focus

Slots

  • None

Checkbox 复选框

Multiple option selection.

  • Category: Form
  • Import: wbbb-ui/components/checkbox

Props

NameDescriptionTypeRequiredDefault
disabledPrevents user interaction with the component.booleanNofalse
modelValueProvides the current value used by v-model.Array<string | number>No() => []
optionsProvides selectable option data.WbbbCheckboxOption[]No() => []

Events

  • update:modelValue
  • change

Slots

  • None

Radio 单选框

Single option selection.

  • Category: Form
  • Import: wbbb-ui/components/radio

Props

NameDescriptionTypeRequiredDefault
disabledPrevents user interaction with the component.booleanNofalse
modelValueProvides the current value used by v-model.string | numberNo''
optionsProvides selectable option data.WbbbRadioOption[]No() => []

Events

  • update:modelValue
  • change

Slots

  • None

Switch 开关

Boolean switches.

  • Category: Form
  • Import: wbbb-ui/components/switch

Props

NameDescriptionTypeRequiredDefault
activeColorSets the color used by the active state.stringNo''
disabledPrevents user interaction with the component.booleanNofalse
modelValueProvides the current value used by v-model.booleanNofalse

Events

  • update:modelValue
  • change

Slots

  • None

Picker 选择器

Basic option picker.

  • Category: Form
  • Import: wbbb-ui/components/picker

Props

NameDescriptionTypeRequiredDefault
disabledPrevents user interaction with the component.booleanNofalse
localeOverrides the locale used for built-in display copy.WbbbLocaleInputNo
modelValueProvides the current value used by v-model.string | numberNo''
optionsProvides selectable option data.WbbbPickerOption[]No() => []
placeholderSets placeholder text when no value is present.stringNo由 locale 决定

Events

  • update:modelValue
  • change

Slots

  • None

DatePicker 日期选择器

Date value selection.

  • Category: Form
  • Import: wbbb-ui/components/date-picker

Props

NameDescriptionTypeRequiredDefault
disabledPrevents user interaction with the component.booleanNofalse
endSets the latest selectable or valid value.stringNo''
fieldsRegisters the form fields managed by the component.'day' | 'month' | 'year'No'day'
localeOverrides the locale used for built-in display copy.WbbbLocaleInputNo
modelValueProvides the current value used by v-model.stringNo''
placeholderSets placeholder text when no value is present.stringNo由 locale 决定
startSets the earliest selectable or valid value.stringNo''

Events

  • update:modelValue
  • change

Slots

  • None

Stepper 步进器

Precise numeric stepping.

  • Category: Form
  • Import: wbbb-ui/components/stepper

Props

NameDescriptionTypeRequiredDefault
disabledPrevents user interaction with the component.booleanNofalse
maxSets the maximum allowed numeric value.numberNoNumber.MAX_SAFE_INTEGER
minSets the minimum allowed numeric value.numberNo0
modelValueProvides the current value used by v-model.numberNo0
stepSets the increment used when changing a numeric value.numberNo1

Events

  • update:modelValue
  • change

Slots

  • None

Slider 滑块

Range value selection.

  • Category: Form
  • Import: wbbb-ui/components/slider

Props

NameDescriptionTypeRequiredDefault
activeColorSets the color used by the active state.stringNo''
disabledPrevents user interaction with the component.booleanNofalse
maxSets the maximum allowed numeric value.numberNo100
minSets the minimum allowed numeric value.numberNo0
modelValueProvides the current value used by v-model.numberNo0
showValueControls whether the current value is displayed.booleanNofalse
stepSets the increment used when changing a numeric value.numberNo1

Events

  • update:modelValue
  • change
  • changing

Slots

  • None

Upload 上传

Local selection, upload hooks, and failure feedback.

  • Category: Form
  • Import: wbbb-ui/components/upload

Props

NameDescriptionTypeRequiredDefault
beforeReadRuns before file selection is accepted and can block the read.(files: WbbbUploadFile[]) => boolean | Promise<boolean>No
countSets the number of rendered placeholder rows or items.numberNo9
disabledPrevents user interaction with the component.booleanNofalse
localeOverrides the locale used for built-in display copy.WbbbLocaleInputNo
modelValueProvides the current value used by v-model.WbbbUploadFile[]No() => []
textProvides the primary display text.stringNo由 locale 决定
uploaderProvides the business-layer upload implementation.(file: WbbbUploadFile, options?: { signal?: AbortSignal }) => WbbbUploadFile | Promise<WbbbUploadFile>No

Events

  • update:modelValue
  • afterRead
  • change
  • error
  • remove

Slots

  • None

Form 表单

Form rules and validation.

  • Category: Form
  • Import: wbbb-ui/components/form

Props

NameDescriptionTypeRequiredDefault
disabledPrevents user interaction with the component.booleanNofalse
labelWidthSets the width reserved for field labels.WbbbNumericNo160
modelProvides the data model used by the component.Record<string, unknown>No() => ({})
rulesProvides validation rules for the form or field.Record<string, WbbbFormRule | WbbbFormRule[]>No() => ({})

Events

  • None

Slots

  • default

Field 表单项

Field labels and error messages.

  • Category: Form
  • Import: wbbb-ui/components/field

Props

NameDescriptionTypeRequiredDefault
labelSets the visible field or item label.stringNo''
labelWidthSets the width reserved for field labels.WbbbNumericNoundefined
propAssociates the field with a key in the form model.stringNo''
requiredMarks the field as required for validation or display.booleanNofalse
rulesProvides validation rules for the form or field.WbbbFormRule | WbbbFormRule[]Noundefined
valueProvides the displayed value or item value.unknownNoundefined

Events

  • None

Slots

  • default

Toast 轻提示

Lightweight short messages.

  • Category: Feedback
  • Import: wbbb-ui/components/toast

Props

NameDescriptionTypeRequiredDefault
durationSets the display or animation duration in milliseconds.numberNo1800
iconSets the icon name or icon content.'success' | 'error' | 'loading' | 'none'No'none'
messageProvides the notification or feedback message.stringNo''
modelValueProvides the current value used by v-model.booleanNofalse
zIndexSets the stacking order of the component.numberNo1100

Events

  • update:modelValue
  • close

Slots

  • default

Dialog 对话框

Confirmation and cancellation dialogs.

  • Category: Feedback
  • Import: wbbb-ui/components/dialog

Props

NameDescriptionTypeRequiredDefault
cancelTextOverrides the cancel action label.stringNo由 locale 决定
confirmTextOverrides the confirm action label.stringNo由 locale 决定
contentProvides the main text content of the component.stringNo''
localeOverrides the locale used for built-in display copy.WbbbLocaleInputNo
modelValueProvides the current value used by v-model.booleanNofalse
showCancelControls whether the cancel action is shown.booleanNotrue
titleSets the component title text.stringNo''

Events

  • update:modelValue
  • cancel
  • close
  • confirm

Slots

  • default

Positioned popup layers.

  • Category: Feedback
  • Import: wbbb-ui/components/popup

Props

NameDescriptionTypeRequiredDefault
closeOnClickOverlayCloses the overlay when its backdrop is pressed.booleanNotrue
modelValueProvides the current value used by v-model.booleanNofalse
placementSets where the overlay or pop-up is positioned.WbbbPlacementNo'center'
roundUses fully rounded corners or a pill shape.booleanNofalse
zIndexSets the stacking order of the component.numberNo900

Events

  • update:modelValue
  • close
  • open

Slots

  • default

ActionSheet 动作面板

Action option sheets.

  • Category: Feedback
  • Import: wbbb-ui/components/action-sheet

Props

NameDescriptionTypeRequiredDefault
actionsDefines the available action items.WbbbActionSheetAction[]No() => []
cancelTextOverrides the cancel action label.stringNo由 locale 决定
localeOverrides the locale used for built-in display copy.WbbbLocaleInputNo
modelValueProvides the current value used by v-model.booleanNofalse
titleSets the component title text.stringNo''

Events

  • update:modelValue
  • cancel
  • close
  • select

Slots

  • None

Notify 消息通知

Page-top notifications.

  • Category: Feedback
  • Import: wbbb-ui/components/notify

Props

NameDescriptionTypeRequiredDefault
durationSets the display or animation duration in milliseconds.numberNo2200
messageProvides the notification or feedback message.stringNo''
modelValueProvides the current value used by v-model.booleanNofalse
typeSets the semantic type or variant of the component.Exclude<WbbbType, 'default'>No'info'
zIndexSets the stacking order of the component.numberNo1000

Events

  • update:modelValue
  • close

Slots

  • default

OverlayHost 遮罩宿主

Shared host for service overlays.

  • Category: Feedback
  • Import: wbbb-ui/components/overlay-host

Props

NameDescriptionTypeRequiredDefault
NoneNoneNoneNoneNone

Events

  • None

Slots

  • None

Skeleton 骨架屏

Content loading skeletons.

  • Category: Feedback
  • Import: wbbb-ui/components/skeleton

Props

NameDescriptionTypeRequiredDefault
animatedEnables the component transition animation.booleanNotrue
avatarSets the avatar image or avatar content source.booleanNofalse
loadingShows a loading state and blocks repeated interaction when applicable.booleanNotrue
rowsSets the number of visible text rows.numberNo3
titleSets the component title text.booleanNotrue

Events

  • None

Slots

  • default

Empty 空状态

Empty content states.

  • Category: Feedback
  • Import: wbbb-ui/components/empty

Props

NameDescriptionTypeRequiredDefault
descriptionProvides supporting descriptive text.stringNo由 locale 决定
imageSets the image resource used by the item.stringNo''
imageSizeSets the rendered size of the image.WbbbNumericNo160
localeOverrides the locale used for built-in display copy.WbbbLocaleInputNo

Events

  • None

Slots

  • default

NoticeBar 通知栏

Important notification banners.

  • Category: Display
  • Import: wbbb-ui/components/notice-bar

Props

NameDescriptionTypeRequiredDefault
closeableAllows the overlay or notification to be closed by the user.booleanNofalse
colorSets the primary display color.stringNo''
textProvides the primary display text.stringNo''
typeSets the semantic type or variant of the component.WbbbStatus | 'primary'No'warning'

Events

  • close

Slots

  • default

Collapse 折叠面板

Expandable information panels.

  • Category: Display
  • Import: wbbb-ui/components/collapse

Props

NameDescriptionTypeRequiredDefault
accordionAllows only one collapse item to stay expanded at a time.booleanNofalse
animatedEnables the component transition animation.booleanNotrue
itemsProvides the data items rendered by the component.WbbbCollapseItem[]No() => []
modelValueProvides the current value used by v-model.Array<string | number> | string | numberNo() => []

Events

  • update:modelValue
  • change

Slots

  • default

Swiper 轮播

Carousel content.

  • Category: Display
  • Import: wbbb-ui/components/swiper

Props

NameDescriptionTypeRequiredDefault
autoplayAutomatically advances to the next slide.booleanNofalse
circularAllows the carousel to loop from the last item to the first.booleanNotrue
indicatorDotsShows pagination dots for carousel items.booleanNotrue
intervalSets the delay between automatic carousel transitions in milliseconds.numberNo3000
itemsProvides the data items rendered by the component.WbbbSwiperItem[]No() => []

Events

  • change

Slots

  • default

Steps 步骤条

Step progress.

  • Category: Display
  • Import: wbbb-ui/components/steps

Props

NameDescriptionTypeRequiredDefault
activeIdentifies the current active item or step.numberNo
directionSets the layout or divider direction.WbbbDirectionNo
itemsProvides the data items rendered by the component.WbbbStepItem[]No

Events

  • None

Slots

  • None

Timeline 时间线

Timeline events.

  • Category: Display
  • Import: wbbb-ui/components/timeline

Props

NameDescriptionTypeRequiredDefault
itemsProvides the data items rendered by the component.WbbbTimelineItem[]No() => []

Events

  • None

Slots

  • None

CountDown 倒计时

Countdown states.

  • Category: Display
  • Import: wbbb-ui/components/count-down

Props

NameDescriptionTypeRequiredDefault
autoStartStarts timing automatically after mount.booleanNotrue
formatSets the output display format.stringNo'HH:mm:ss'
timeSets the remaining time or target time value.numberNo0

Events

  • change
  • finish

Slots

  • None

Rate 评分

Rating selection.

  • Category: Display
  • Import: wbbb-ui/components/rate

Props

NameDescriptionTypeRequiredDefault
colorSets the primary display color.stringNo''
countSets the number of rendered placeholder rows or items.numberNo5
disabledPrevents user interaction with the component.booleanNofalse
modelValueProvides the current value used by v-model.numberNo0

Events

  • update:modelValue
  • change

Slots

  • None

Calendar 日历

Monthly calendar date selection.

  • Category: Display
  • Import: wbbb-ui/components/calendar

Props

NameDescriptionTypeRequiredDefault
disabledDatesLists dates that cannot be selected.string[]No() => []
firstDayOfWeekSets which weekday starts the calendar row.0 | 1No0
localeOverrides the locale used for built-in display copy.WbbbLocaleInputNo
maxDateSets the latest date that can be selected.stringNo''
minDateSets the earliest date that can be selected.stringNo''
modelValueProvides the current value used by v-model.stringNo''
monthSets the month displayed by the calendar.stringNo''

Events

  • update:modelValue
  • change
  • monthChange

Slots

  • None

Progress 进度条

Progress feedback.

  • Category: Display
  • Import: wbbb-ui/components/progress

Props

NameDescriptionTypeRequiredDefault
colorSets the primary display color.stringNo''
percentageSets the progress percentage to display.numberNo0
showTextControls whether accompanying text is displayed.booleanNotrue
statusSets the semantic status used for display.WbbbStatusNo'default'
strokeWidthSets the thickness of the progress stroke.numberNo12

Events

  • None

Slots

  • None

Wbbb UI · Built for uni-app product experiences