組件豐富,功能強大,方案齊全,優秀的Vue組件+前端解決方案

2020-02-08     最美分享Coder

介紹

HeyUI 是一套基於 Vue2.0 的開源 UI 組件庫,主要服務於一些中後台產品。HeyUI提供的是一整套解決方案,所有的組件提供全局的可配置模式。集成主流的國際化方案以及更加人性化的還支持VSCode擴展。

  • 真正的數據驅動
  • 全局的配置模式
  • 數據字典化

  • 官網

    文檔:https://www.heyui.top/
    Gitee:https://gitee.com/heyui/heyui
    Github:https://github.com/heyui/heyui

    安裝

    推薦使用 npm 的方式安裝。

    npm install heyui

    示例

    通過引用HeyUI,我們可以簡單的寫出一個應用介面。



    支持環境

    現代瀏覽器和 IE9 及以上。HeyUI支持 Vue.js 2.x版本

    組件預覽



    以下組件預覽不是所有都進行了截圖,只是大致將一些組件展示出來:

  • Grid 柵格


  • Layout 布局


  • Color 色彩


  • Icon 圖標


  • Extend 擴展


  • Button 按鈕



  • Form
  • Input 輸入框



    Radio 單選



    Checkbox 多選



    Select 下拉選擇



    AutoComplete 模糊匹配



    NumberInput 數字輸入



    TagInput 標籤輸入框



    HSwitch 開關



    Slider 滑塊



    Rate 評分



    SwitchList 選項切換



    Form 表單



  • Date
  • DatePicker 日期選擇



    TimePicker 時間選擇



    DatetimePicker 日期時間選擇



    DateRangePicker 日期範圍選擇



    DateFullRangePicker 超級日期



  • Data Plugin
  • Search 搜索框



    Uploader 上傳



    Tree 樹



    TreePicker 樹選擇



    Category 分類選擇



    CategoryPicker 選擇



    Transfer 穿梭框



    ColorPicker 顏色選擇器



  • Navigation
  • Breadcrumb 麵包屑



    Menu 菜單



    Pagination 分頁



    Tabs 標籤頁



    Steps 步驟條



    DropdownMenu 下拉菜單



    DropdownCustom 自定義下拉



  • Data View
  • Table 表格



    Avatar 頭像信息



    Badge 微標數



    Carousel 走馬燈



    Collapse 摺疊面板



    Circle 進度環



    Progress 進度條



    Loading 加載中



    LoadingBar 加載進度條



    Skeleton 加載占位圖



    Timeline 時間軸



    ImagePreview 圖片預覽



    TextEllipsis 超出文本省略



  • Message
  • Message 提示



    Notice 通知



    Modal 彈出框



    Tooltip 氣泡提示



    Poptip 確定提示



  • Plugin
  • Clipboard 複製剪切板



    Affix 圖釘



    BackTop 返回頂部



  • View
  • Panel 面板



    Tag 標籤


    集成解決發難Heyui-admin

    https://admin.heyui.top/








    在線運行


    總結

    Heyui是一個高質量的組件一點也不為過,不僅如此,其還集成了一套適用於大多數中後台的完整集成解決方案,上手很快,而且組件非常豐富,大多數業務場景都能覆蓋,非常值得嘗試,enjoy it!

    文章來源: https://twgreatdaily.com/l7YZLHAB3uTiws8KPaBM.html