Cherry Component
[the experimental project] UnoCSS UI components build for Vue.js.
Overview
The cherry-component project aims to provide a simple and minimalistic approach to component implementation. It emphasizes the use of only one Vue file per component and avoids introducing excessive dependencies. This allows for easy and straightforward component development without the need for a component library.
Features
- Button: Customizable buttons to use in your application.
- Tag: Add tags to your content for organization and categorization.
- Modal: Create pop-up windows to display additional information or interact with the user.
- Progress: Display a progress bar to indicate the status of an ongoing process.
- Drawer: Implement a sliding side panel for additional content or options.
- Checkbox: Create checkboxes to allow users to select multiple options.
- Switch: Implement toggle switches for binary options.
- Alert: Display important or critical information to the user.
- Input: Create input fields to allow users to enter data.
- Select: Create dropdown menus to choose from a list of options.
- Radio: Implement radio buttons for single-option selection.
- Badge: Display numerical or status indicators for elements.
- Dropdown: Create menus that expand when clicked.
- Popover: Add custom tooltips or additional context to elements.
- Loading: Display a loading indicator to inform the user of ongoing processes.
- FileInput: Allow users to select and upload files.
- RadioCollapse: Implement collapsible sections that can be expanded or collapsed.
- Toast: Display brief notifications to the user.
- Skeleton: Create placeholder components to represent content that is loading.
- Table: Implement tables to display data in a structured manner.
- Tabs: Create tabs to organize content within a single page or section.
- Tree: Display hierarchical data in a tree-like structure.
- DynamicTags: Allow users to add and remove custom tags dynamically.
Summary
The cherry-component project focuses on simplicity and minimalism in component development. With its wide range of components, it offers flexibility and customization options while maintaining a lightweight and dependency-conscious approach. By following the installation guide, you can easily incorporate cherry-component into your Vue project and enhance your application with a variety of functional and visually appealing components.
- Vite
Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects
- Vue
Vue.js is a lightweight and flexible JavaScript framework that allows developers to easily build dynamic and reactive user interfaces. Its intuitive syntax, modular architecture, and focus on performance make it a popular choice for modern web development.
- SCSS
SCSS is a preprocessor scripting language that extends the capabilities of CSS by adding features such as variables, nesting, and mixins. It allows developers to write more efficient and maintainable CSS code, and helps to streamline the development process by reducing repetition and increasing reusability.
- UnoCSS
UnoCSS is an instant, on-demand atomic CSS engine that generates utility classes at build time. It's highly customizable, extremely fast, and compatible with Tailwind CSS utilities while offering additional features like attributify mode and pure CSS icons.
- Eslint
ESLint is a linter for JavaScript that analyzes code to detect and report on potential problems and errors, as well as enforce consistent code style and best practices, helping developers to write cleaner, more maintainable code.
- Typescript
TypeScript is a superset of JavaScript, providing optional static typing, classes, interfaces, and other features that help developers write more maintainable and scalable code. TypeScript's static typing system can catch errors at compile-time, making it easier to build and maintain large applications.