DOCSEARCHbyAlgolia
Submit Docs

wview UI Component Library

website·Indexed 29 days ago

https://wview-wiki.vercel.app

A lightweight, flexible, and customizable Vue 3 component library featuring a Chinese-inspired color palette. Built with TypeScript and Vite, it provides a variety of components including buttons, inputs, modals, tabs, and uploaders.

Tokens
5.2K
Snippets
42
Records
46
Agent score
73%

What's inside wview

  1. Overview of wview Component Library

    wview is a lightweight, flexible, and customizable Vue 3 component library designed for efficiency and fast compilation. It features a visual style based on the Chinese Academy of Sciences' 'Chinese colors' to better suit domestic visual preferences. The library is built with TypeScript and Vite, provides 20+ components, and supports Tree-shaking to ensure only used components are bundled, minimizing the final package size.

  2. Install and integrate wviewui using full import

    To quickly integrate all wviewui components without worrying about bundle size, import the library and its global styles in your main entry file and register it using app.use().
    // main.ts
import { createApp } from 'vue'
import wview from 'wviewui'
import 'wviewui/dist/styles.css'
import App from './App.vue'

const app = createApp(App)

app.use(wview)
app.mount('#app')

  3. Manage Button states (Disabled and Loading)

    Use the disabled prop (Boolean) to prevent user interaction and the loading prop (Boolean) to indicate a background process is occurring. When loading is true, it is common to also provide a loading icon via the icon prop.
    <template>
  <!-- Disabled state -->
  <Button type="primary" disabled>Disabled Button</Button>

  <!-- Loading state -->
  <Button type="primary" icon="loading" loading>Loading...</Button>
</template>

  4. Import wview via CDN for direct browser use

    You can import wview directly into your HTML via a script tag from CDN providers like unpkg or jsDelivr. Once imported, the library is available via the global variable wview.

  5. Add icons to Buttons

    Buttons can include icons using the icon prop. The position of the icon relative to the text can be controlled using the icon-position prop (e.g., left or right).
    <template>
  <!-- Icon on left (default) -->
  <Button icon="jiahao" type="primary">Add</Button>
  
  <!-- Icon on right -->
  <Button icon="xiaoxi-zhihui" icon-position="right" type="danger" round>Xiaomi</Button>
  
  <!-- Icon only button -->
  <Button icon="loading" type="warning"></Button>
</template>

  6. Install and integrate wviewui using on-demand import

    To optimize bundle size, import only the specific components you need from wviewui and register them individually. You must still import the global CSS file for styles to apply.
    // main.ts
import { createApp } from 'vue'
import { Button } from 'wviewui'
import 'wviewui/dist/styles.css'
import App from './App.vue'

const app = createApp(App)

app.use(Button)
app.mount('#app')

  7. Install wviewui using a package manager

    Install wviewui using NPM, Yarn, or pnpm to use it with build tools like Vite or webpack. For users in network-restricted environments, using mirrors such as cnpm or the China NPM mirror is recommended.
    # Using NPM
npm install wviewui --save

# Using Yarn
yarn add wviewui

# Using pnpm
pnpm install wviewui

  8. Implement basic Alert notifications in wviewui

    The Alert component is used to display warning or informational messages. Use the type attribute to define the visual style of the alert. Available types include success, info, warning, and danger. If no type is specified, a default style is applied.
    <script setup lang="ts">
import { Alert } from 'wviewui'
</script>

<template>
  <Alert>默认警告</Alert>
  <Alert type="success">成功警告</Alert>
  <Alert type="warning">严重警告</Alert>
  <Alert type="info">通知警告</Alert>
  <Alert type="danger">危险警告</Alert>
</template>

  9. Install wview icons

    Install the icon library using your preferred package manager. Note: The documentation mentions @element-plus/icons-vue in the shell example, but the registration section refers to @wview/icons.
    # NPM
npm install @element-plus/icons-vue
# Yarn
yarn add @element-plus/icons-vue
# pnpm
pnpm install @element-plus/icons-vue

  10. Customize Input focus color

    Use the focusColor attribute to define the color of the input field when it gains focus.
    <Input
  v-model="myvalue"
  type="text"
  placeholder="自定义你喜欢的选中颜色"
  focusColor="orange"
></Input>

  11. Globally register wview icons

    To use icons directly throughout your project without individual imports, import all icons from @wview/icons and register them globally in your main entry file.
    // main.ts
import * as wview from '@wview/icons'

const app = createApp(App)
for (const [key, component] of Object.entries(wview)) {
  app.component(key, component)
}

  12. Add icons to an Input field

    Use the leftIcon or rightIcon attributes to specify an icon and its position.

    Caveat: If a rightIcon is defined, the clearable functionality will be disabled and will not work.

    <template>
  <Input v-model="myvalue" leftIcon="jiahao"></Input>
  <br />
  <Input v-model="value2" rightIcon="cuowu"></Input>
</template>