repository·master·Indexed 25 days ago
https://github.com/view-design/viewuiViewUI (formerly iView) is a high-quality UI toolkit built on Vue.js, providing a wide range of functional components for developers. It supports Vue.js 1.x and 2.x, Server-Side Rendering (SSR), Nuxt.js, TypeScript, and Electron, with browser support for IE9 and above. The library includes a comprehensive set of components such as Button, Carousel, Cascader, ColorPicker, and a programmatic Notification system.
View UI's styling system is organized into four main directories:
animation: Contains styles related to animations.common: Contains global styles used throughout the library.components: Contains specific styles for individual UI components.mixins: Contains mixins for extending or customizing styles.To add ViewUI to your project using npm, run the following command to save it as a dependency.
npm install view-design --saveFor global use without a module bundler, you can include the ViewUI JavaScript and CSS files directly in your HTML using script and link tags.
<script type="text/javascript" src="iview.min.js"></script>
<link rel="stylesheet" href="dist/styles/iview.css">If you are using a module bundler, you can import the ViewUI styles directly into your JavaScript entry point.
import 'view-design/dist/styles/iview.css';v-click-outside directive globally in your Vue application, use the install function provided by the directive module. This registers the v-click-outside directive on the Vue constructor.install method. This registers all components globally and sets up the $IVIEW prototype and utility methods like $Message, $Modal, and $Loading. You can pass an options object to configure localization and global settings.You can use ViewUI components within your Vue templates. For example, to use the Slider component with a range mode, bind it to a data property using v-model.
<template>
<Slider v-model="value" range />
</template>
<script>
export default {
data () {
return {
value: [20, 50]
}
}
}
</script>When calling Vue.use(ViewUI, opts), you can provide an opts object to configure global behaviors. These options are accessible via this.$IVIEW in your components.
Supported top-level options:
locale: The locale object for internationalization.i18n: i18n configuration.size: Global component size (e.g., 'small', 'default').transfer: The target container for transferred components (e.g., 'body').capture: Boolean determining if events are captured.Specific component configurations are nested within opts and mapped to this.$IVIEW:
select, cell, menu, tree, cascader, colorPicker: Configure arrow, customArrow, and arrowSize.datePicker, timePicker: Configure icon, customIcon, and iconSize.tabs: Configure closeIcon, customCloseIcon, and closeIconSize.modal: Configure maskClosable.ViewUI is designed to work across various environments and frameworks:
viewui Select component system is composed of three main parts: Select (the main container), Option (individual selectable items), and OptionGroup (logical groupings of options). To build a selection interface, wrap Option or OptionGroup components inside a Select component.Use the config method to set global defaults for all subsequent notices created via the API.
options object properties:
top (number): The distance from the top of the viewport in pixels.duration (number): The default duration for all notices in milliseconds. Use 0 to disable auto-close globally.The LoadingBar service provides lifecycle methods to control the progress bar state:
start(): Begins a simulated progress animation.update(percent): Sets the progress bar to a specific percentage (0-100) and ensures it is visible.finish(): Sets progress to 100%, sets status to 'success', and triggers the hide sequence.error(): Sets progress to 100%, sets status to 'error', and triggers the hide sequence.destroy(): Clears any active timers and destroys the underlying LoadingBar instance.