TDesign Uniapp

The Fab (Floating Action Button) component provides a floating action button that can be customized with icons, text, and specific button properties. It supports dragging functionality and can be positioned using the style prop.

<template>
  <tdesign-fab 
    icon="add" 
    text="Add" 
    :button-props="{ type: 'primary' }"
  />
</template>

uni-sass is a set of global styles provided by uni-ui. It allows for simple page layout operations using standard class names and sass variables. You can use it to quickly apply styles for properties such as:

• Colors
• Margins (padding/margin)
• Border radius

For detailed documentation on specific class names and available variables, refer to the official uni-ui documentation.

When deciding between a Slider and a Stepper, consider the user's intent:

When using the Popup component in tdesign-uniapp, select the placement based on the functional context of the content:

• Top Placement: Use for filter conditions that are exposed at the top of a view, or as a top-down overlay.
• Right Placement: Use when the popup is triggered by a specific entry point (like a filter icon) and needs to slide in from the side.
• Bottom Placement: Use for task-oriented workflows or operations that are part of the main page flow (e.g., action sheets or task menus).
• Center Placement:
  • Use for important notifications or when the user needs to make a critical decision.
  • Use for promotional activities or high-importance operational entries (e.g., splash screens/banners).
• Left Placement: Use for collapsed navigation menus or sidebars.

Depending on your specific use case, you may want to use a different component instead of Loading:

The Divider component should be used to distinguish between groups of content or to indicate hierarchical relationships between different information blocks.

Layout Patterns

• Full-width Divider (通栏分割线): A horizontal line that spans the entire width of the page. Use this to separate highly independent content blocks to make the separation more distinct.
• Embedded Divider (内嵌分割线): A divider that typically leaves gaps on the left or right sides. Use this to separate related content within a single unified module, helping users browse large amounts of related information more efficiently.
• Combined Divider (组合分割线): A layout that uses a combination of both full-width and embedded dividers.

The Result component is used to provide feedback to users after they have completed an operation.

Common usage scenarios include:

1. Lightweight Feedback: Use a popup/dialog to carry the result feedback if the task itself was performed within a popup or if only minimal feedback is required.
2. Task Completion with Recommendations: Use a full page to display the result and recommend other content, tasks, or products to the user after a task is finished.
3. Error/Failure States: Use the component to inform users of a failure reason and provide actionable steps to resolve the issue.
4. Process Progress: Combine the Result component with a Steps component to show the remaining progress in a multi-step workflow after the current operation is complete.

TDesign provides a wide range of CSS variables for all components. You can find the specific variable names by inspecting the component's WXSS files.

Using CSS variables is recommended for multi-page reuse and theme customization. For more detailed instructions, refer to the Custom Theme guide.

When deciding between Cell and Grid, consider the layout and priority of your items:

• Use Cell when you need a vertical list of information or navigation entries.
• Use Grid when you need to display multiple functional or informational entry points that do not have a clear hierarchy or priority, typically in a multi-column layout.