DOCSEARCHbyAlgolia
Submit Docs

Play UI

website·Indexed 29 days ago

https://playui.netlify.app/

A Vue.js prebuilt component library based on Preline design drafts for creating websites. It features a variety of UI components including Modal, Pagination, VirtualList, Scrollbar, and Breadcrumb, with support for on-demand loading.

Tokens
10.4K
Snippets
47
Records
96
Agent score
70%

What's inside Play UI

  1. Overview of Play UI component library

    Play UI is a prebuilt component library for Vue.js based on the Preline design draft. It is designed to help developers create aesthetically pleasing websites with the following key features:

    • On-demand imports: Includes a resolver to automatically import only the components actually used in the project.
    • TypeScript Support: Full support for TypeScript, including type checking and type inference.
    • Themed Styles: Provides a variety of prefabricated theme styles.
    • Modern Browser Support: Compatible with the last two versions of Chrome, Firefox, Safari, Opera, Edge, and Electron.

  2. Overview of Play UI component library

    Play UI is a pre-built component library for Vue 3 based on Preline UI designs. It is designed to help developers create visually appealing websites with the following key features:

    • Clean UI Components: Professionally crafted and aesthetically pleasing components.
    • On-demand Import: Includes a resolver to automatically import only the components actually used in the project.
    • TypeScript Support: Full support for TypeScript, including type checking and type inference.
    • Multi-theme Support: Provides various pre-made theme styles (currently Work In Progress).

    Browser Compatibility: Supports the last two to three versions of all modern browsers, including Chrome, Firefox, Safari, Edge, Opera, and Electron.

  4. Implement a progressive navigation bar using the Steps component

    The Steps component provides a step-by-step navigation interface to guide users through a specific workflow or process. It supports both horizontal (default) and vertical orientations.

  5. Implement a custom Scrollbar component

    The Scrollbar component is used to replace the browser's native scrollbar with a custom-styled alternative. It allows control over the track height, the minimum size of the draggable thumb, and the scrolling animation behavior.

  6. Implement a step-by-step navigation bar using the Steps component

    The Steps component provides a visual navigation bar to guide users through a sequence of tasks. It accepts a list of step items and can be toggled between horizontal and vertical layouts.

  8. Create a custom Tooltip using the headless slot

    To implement a fully custom popover for the Tooltip, use the headless slot. This allows you to override the default tooltip UI while maintaining the component's trigger and positioning logic.

  10. Configure on-demand component imports for Play UI

    To enable on-demand importing of Play UI components, install unplugin-vue-components and unplugin-auto-import. Then, configure the PlayResolver in your Vite configuration to automatically resolve and import components.
    npm install -D unplugin-vue-components unplugin-auto-import
    // vite.config.ts
import { defineConfig } from 'vite'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'
import { PlayResolver } from 'play-ui/dist/lib/components/resolver'

export default defineConfig({
  plugins: [
    Components({
      resolvers: [PlayResolver()],
    }),
    AutoImport({
      resolvers: [PlayResolver()],
    }),
  ],
})

  11. Install Play UI package

    Install the play-ui package using your preferred package manager to start using Play UI components in your project.
    # npm
npm i play-ui

# yarn
yarn add play-ui

# pnpm
pnpm add play-ui

  12. Implement a VirtualList for large datasets

    The VirtualList component is used to maintain high performance when rendering a large amount of data by utilizing virtualization techniques. To implement it, you must provide the total height of the list container, the total number of items, and an estimated height for each item to allow the component to calculate the scrollable area.