DOCSEARCHbyAlgolia
Submit Docs

Sard Uniapp UI Component Library

repository·main·Indexed 43 days ago

https://github.com/sutras/sard-uniapp

A high-quality, multi-platform UI component library built with Uniapp and Vue3, featuring over 117 components for mobile-first applications. It supports H5, WeChat, Alipay, and App environments with full TypeScript support. Version 0.1.0.

Tokens
202.5K
Snippets
819
Records
1.2K
Agent score
52%

What's inside Sard Uniapp

  1. Overview of sard-uniapp

    main

    sard-uniapp is a multi-terminal UI component library developed using the uni-app + vue3 framework. It provides over 117 high-quality components designed to cover mainstream mobile application scenarios.

    Key Features

    • Multi-platform: Write once and deploy to H5, Mini-programs, and Apps.
    • Optimized Bundle: Supports on-demand imports and Tree Shaking to keep your project lightweight.
    • Developer Experience: Written in TypeScript with full type definitions, comprehensive documentation, and case studies.
    • Customization: Supports custom themes, internationalization (i18n), and dark mode.
    • Stability: Zero external dependencies (no third-party npm packages) and over 80% unit test coverage.
    • Web Standards: Embraces modern web technologies including full JS/TS support, CSS variables, CSS filters, CSS pseudo-classes, full Flexbox layout, and sticky positioning.

  5. Use the Slider component

    main

    The Slider component allows users to select a single value or a range of values within a specified interval. It supports features like range selection, step increments, vertical orientation, and custom styling.

    <template>
  <!-- Basic usage with v-model -->
  <Slider v-model="value" />

  <!-- Range selection -->
  <Slider v-model="rangeValue" range />
</template>

<script setup>
import { ref } from 'vue'
const value = ref(50)
const rangeValue = ref([20, 80])
</script>

  7. Browse sard-uniapp component library

    main

    The sard-uniapp component library provides a wide range of pre-built components categorized by their functional purpose. You can use these components to build mobile and web interfaces within the uniapp ecosystem.

    Components are organized into the following categories:

    • 基础组件 (Base Components): Fundamental elements like Button, Icon, Image, and Style.
    • 布局 (Layout): Structural components such as Grid, Layout, Space, Sticky, and Waterfall.
    • 表单组件 (Form Components): Input and selection elements including Calendar, Checkbox, Input, Picker, Radio, Select, Slider, Switch, and Upload.
    • 数据展示 (Data Display): Components for presenting information like Avatar, Badge, Card, List, Table, Tag, and Timeline.
    • 导航组件 (Navigation): Navigation aids such as Navbar, Pagination, Sidebar, Steps, Tabbar, and Tabs.
    • 反馈组件 (Feedback): User interaction and status indicators like Alert, Dialog, Loading, Notify, Toast, and Skeleton.
    • 活动组件 (Activity Components): Specialized components like LuckyDraw and Marquee.
    • 工具组件 (Utility Components): Tools like CropImage.
    • 其他 (Others): Security and utility features like Watermark, PuzzleVerify, RotateVerify, and SlideVerify.

  8. Use the Compact component for tight layouts

    main

    The Compact component is used to create tight layouts for form components (like buttons and inputs), allowing them to connect closely and merge borders. It supports both horizontal and vertical arrangements and can make child elements behave as block-level elements.

    import Compact from 'sard-uniapp/components/compact/compact.vue'

  9. Use SelectInput for list selection

    main

    The SelectInput component combines a list selection popout with an input field to provide a convenient selection interface. It is part of the form component suite.

    Unlike the standard Select or SelectPopout components, SelectInput requires the options property. This is because the component needs to look up the label corresponding to the current value to display it within the input field.

    import SelectInput from 'sard-uniapp/components/select-input/select-input.vue'

  10. Use the Dnd (Drag and Drop) component

    main

    The Dnd component suite provides list reordering capabilities through three main components:

    1. Dnd: Provides the drag-and-drop context for a list.
    2. DndItem: Acts as the container for each list item, handling drag-and-drop styles.
    3. DndHandle: Must be placed inside a DndItem. It defines the specific area that triggers the drag state (e.g., via a long press). Its appearance and content are customizable.

    Note: Nested dragging is supported in web/app environments but is not supported on Mini-programs.

    import Dnd from 'sard-uniapp/components/dnd/dnd.vue'
import DndItem from 'sard-uniapp/components/dnd-item/dnd-item.vue'
import DndHandle from 'sard-uniapp/components/dnd-handle/dnd-handle.vue'

  11. Configure SelectPopout options and grouping

    main

    Grouping Options

    Use the SelectOptionGroup component to group options. The label property defines the group name.

    Multiple Selection

    • Set the multiple property to enable multiple selection.
    • Use multiple-limit to restrict the maximum number of items that can be selected.
    • Use show-toolbar to display a toolbar in multiple mode, providing "Select All" and "Clear Selection" buttons, along with a count of selected items.

    Disabling Options

    Set the disabled property on an individual option to prevent it from being selected.

  12. How PullDownRefresh works with scroll containers

    main

    The PullDownRefresh component is designed to be loosely coupled with scroll containers (like a page or a scroll-view). It does not automatically detect when a container is at the top; you must manually tell it when refreshing is possible.

    Workflow

    1. Detect Top Position: Monitor the scroll position of your container (e.g., via onPageScroll for pages or the scroll event for scroll-view).
    2. Enable Refreshing: When the scroll position reaches the top (scrollTop === 0), call the exposed method enableToRefresh(true).
    3. Trigger Refresh: When the user pulls down past the threshold, the refresh event is emitted.
    4. Handle Loading: Set the loading prop to true to show the loading state and perform your data fetching.
    5. Finish Loading: Once data is fetched, set loading to false to hide the loading state.
    // Conceptual logic for enabling refresh when at top
const canRefresh = scrollTop === 0;
pullDownRefreshRef.value.enableToRefresh(canRefresh);