uni-ui x Documentation

The uni-rate component is used for star rating scenarios, such as evaluating products after purchase. It supports two modes controlled by the full property:

1. High-performance mode (full={false}): Uses a single layer that only displays bright stars. It does not show gray background stars, does not support decimal values, and is non-clickable. This is ideal for displaying ratings within long lists.
2. Standard mode (full={true}): Uses overlapping layers of gray background stars and bright foreground stars. This mode supports decimal values and is clickable (interactive).

The component supports v-model for two-way data binding with reactive data.

The uni-fab-button is a floating action button (FAB) component, typically used as a circular button with a plus (+) icon positioned in the bottom-right corner of a page.

Visual Characteristics:

• The root view is a circle with a default blue background (#007AFF) and a shadow.
• The plus icon is composed of two intersecting views (one vertical, one horizontal).
• The default icon style is white with a 2px thickness and 40% size.

Implementation Note: When using this component, ensure the parent container has enough padding or margin to accommodate the component's shadow. If the parent container is too tight, the shadow may be clipped.

The uni-badge-view component is used to display notification badges, such as red dots, circled numbers, or text indicators. It can be used in two primary modes:

1. Independent Display: When no slot content is provided, the component acts as a standalone badge (a red dot or a circled number). This is useful for displaying counts next to buttons or list items.
2. Container Mode: When wrapping a target view using a slot, the badge is positioned at the top-right corner of that view.

Important Layout Note: In Container Mode, the badge is positioned using transform so that its center aligns with the top-right vertex of the target view. Because the badge may extend beyond the boundaries of the container, ensure the parent element has sufficient top and right margins/padding to prevent the badge from being clipped.

The component supports two ways to enter the dragging state:

1. Long Press Dragging (Default)

• Triggered by long-pressing an item for 350ms.
• The item scales up by 1.12x and follows the finger/mouse.
• Includes collision detection for real-time visual reordering.
• Best for: Tag sorting, grid layouts, and image sorting.

2. Handle Dragging

• Enabled by setting handle-mode="true" and providing a #handle slot.
• Dragging starts only when the user interacts with the handle.
• The content area remains interactive (clickable/scrollable) without triggering a drag.
• Best for: Settings lists, form item sorting, or lists where the content itself has click actions.

The component automatically matches the display language based on uni.getAppBaseInfo().appLanguage. Supported locales include:

• Simplified Chinese (zh)
• Traditional Chinese (zh-hant, zh-tw, zh-hk, zh-mo)
• English (Default)
• French (fr)
• Latin (la)

Note: French and Latin use shorter text strings to prevent long text from occupying too much space in the UI.

The component moves through several internal states during the pull-to-refresh lifecycle:

• 0: Pulling (has not reached the threshold)
• 1: Release to refresh (threshold reached)
• 2: Refreshing
• 3: Refresh complete
• 4: Returning to position (text is hidden)

Components placed inside uni-tab-content do not trigger standard lifecycle hooks (like onShow) when switching tabs.

Behavior:

• Lazy Rendering: A uni-tab-content instance is only created when it is first activated.
• Persistence: When switching away from a tab, the component is hidden but NOT destroyed. This preserves the internal state of the tab.

How to detect tab visibility: Since lifecycle hooks aren't triggered, you should use the provide/inject pattern. Pass the reactive activeIndex from the parent uni-tab down to the child components, and have the child components watch that activeIndex to react to visibility changes.

The uni-drag-cell component uses a two-stage design to ensure smooth performance and minimize unnecessary re-renders:

1. Drag Preview Stage: During dragging, the component uses transform to dynamically adjust the visual order and performs collision detection to animate other items. The external v-model array is not modified during this stage.
2. Drag Submission Stage: Only after the user releases the item is the internal array order officially updated. The component then emits the final result via the update:modelValue (for v-model) and the change event.

This approach prevents frequent reactive updates in the parent component and maintains item identity for smoother animations.

When format="relative" is used, the component calculates time based on natural days using these rules:

• Within today:
  • < 1 minute: Displays "刚刚" (Just now)
  • < 60 minutes: Displays "n分钟前" (n minutes ago)
  • >= 60 minutes: Displays "n小时前" (n hours ago)
• Yesterday: Displays "昨天 HH:mm"
• Older than yesterday: Displays "YYYY-MM-DD HH:mm"
• Future time: Displays "YYYY-MM-DD HH:mm"

You can override the default content of the uni-nav-bar zones using named slots:

• <template #left>: Replace the default back arrow with custom content.
• <template #mid>: Replace the title text with custom components or complex layouts.
• <template #right>: Add custom content (like buttons or icons) to the right side of the bar.