More Premium Hugo Themes Premium Html Themes

Xy UI

面向未来的原生 web components UI组件库

Xy UI

面向未来的原生 web components UI组件库

Author Avatar Theme by xboxyan
Github Stars Github Stars: 1206
Last Commit Last Commit: Aug 14, 2023 -
First Commit Created: May 5, 2023 -
default image

Overview

xy-ui is a UI component library that is developed using the native Web Components specification, making it compatible with various frameworks. The library is currently undergoing an upgrade to version 2.0, and it provides a range of components such as buttons, icons, tooltips, loading indicators, popovers, switches, sliders, checkboxes, radios, ratings, pop-up confirmations, dialogs, messages, progress bars, pagination, input fields, text areas, forms, images, color pickers, date pickers, and text components.

Features

  • Buttons: Provides a range of buttons for different purposes.
  • Icons: Offers a collection of icons for use in the UI.
  • Tooltips: Enables the display of helpful tooltips on hover or click.
  • Loading: Includes loading indicators to show the progress of a task.
  • Popovers: Allows the creation of pop-up windows with additional content.
  • Switches: Provides toggle switches for on/off functionality.
  • Sliders: Enables input using a slider with a customizable range.
  • Checkboxes: Offers checkboxes for selecting multiple options.
  • Radios: Enables the selection of a single option from a list.
  • Ratings: Provides a rating system for users to rate items.
  • Pop-up Confirmation: Displays a confirmation dialog before executing an action.

Installation

To use xy-ui in your project, you can follow these steps:

  1. Install the npm package by running the following command:
npm install xy-ui
  1. Import the desired components from xy-ui in your code:
import { Button, Icon, Tooltip } from 'xy-ui';
  1. Use the imported components in your application as needed.

Summary

xy-ui is a cross-framework UI component library developed using the native Web Components specification. It offers a wide range of components for building user interfaces, including buttons, icons, tooltips, loading indicators, popovers, switches, sliders, checkboxes, radios, ratings, confirmations, dialogs, messages, progress bars, pagination, input fields, text areas, forms, images, color pickers, date pickers, and text components.