Vuetify主题介绍
一、Vuetify 主题特点
- 遵循 Material Design 规范,外观简洁直观现代,提供熟悉交互体验,体现平面化设计等原则。
- 高度可定制,有丰富主题定制选项,可调整颜色、字体等元素,通过主题变量和 Mixins 深度定制。
- 响应式设计出色,自动适应不同屏幕尺寸和设备类型,利用网格系统和响应式组件构建布局。
- 丰富组件库,遵循统一主题风格,涵盖常见 UI 元素,方便定制和扩展。
- 易于使用和集成,有简洁 API 和文档,可与 Vue.js 无缝集成。
二、应用场景
- 企业级应用:适合打造专业高效界面,传达可靠形象,满足品牌需求,响应式设计方便员工工作。
- 移动应用:响应式设计和丰富组件库适用于移动开发,可优化适应小屏幕操作。
- 数据可视化平台:简洁设计和图表组件利于理解分析数据,定制主题突出重点,响应式确保清晰展示。
- 电子商务平台:带来现代时尚外观,定制颜色图标突出商品特色,丰富组件库构建高效购物流程。
三、组件目录
Vuexy组件
- UI Elements
- Accordion 手风琴 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-accordion.html
- Alerts 警报 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-alerts.html
- App Brand App品牌 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-app-brand.html
- Badges 徽标 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-badges.html
- Buttons 按钮 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-buttons.html
- Cards 卡 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-cards-basic.html
- Cards Actions 卡片动作 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-cards-actions.html
- Carousel 转盘 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-carousel.html
- Collapse 折叠 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-collapse.html
- Dropdown 下拉列表 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-dropdowns.html
- Footer 页脚 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-footer.html
- List Groups 列表组 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-list-groups.html
- Modal 模态 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-modals.html
- Menu 菜单 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-menu.html
- Navbar 导航栏 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-navbar.html
- Offcanvas 画外画 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-offcanvas.html
- Pagination&Breadcrumbs 分页&面包屑 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-pagination-breadcrumbs.html
- Popovers 弹出框 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-popovers.html
- Progress 进展 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-progress.html
- Spinners 微调器 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-spinners.html
- Navs 导航 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-navs.html
- Tabs & Pills 标签和药丸 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-tabs-pills.html
- Toasts 提示词 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-toasts.html
- Tooltip 工具提示 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/ui-tooltips.html
- Extended UI
- Avatar 头像 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-avatar.html
- Block UI 阻止UI https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-blockui.html
- Drag & Drop 拖放 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-drag-and-drop.html
- Media Player 媒体播放器 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-media-player.html
- Perfect Scrollbar 完美滚动条 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-perfect-scrollbar.html
- Star Ratings 星星评级 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-star-ratings.html
- Sweet Alerts 2 警报2 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-sweetalert2.html
- Text Divider 文本分隔符 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-text-divider.html
- Timeline 时间轴 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-timeline.html
- Tour 旅游 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-tour.html
- Treeview 树视图 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-treeview.html
- Miscellaneous 杂项 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/extended-ui-misc.html
- Forms
- Basic inputs 基本投入 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-basic-inputs.html
- Input group 输入组 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-input-groups.html
- Custom Options 自定义选项 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-custom-options.html
- Editor 编辑器 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-editors.html
- File Upload 文件上传 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-file-upload.html
- Picker 选取器 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-pickers.html
- Select & Tags 选择标签 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-selects.html
- Slider 滑块 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-sliders.html
- Switches 开关 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-switches.html
- Extras 额外 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-extras.html
- Validation 验证 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-validation.html
- Wizard 向导 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-wizard.html
- Sticky Actions 粘性动作 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/forms-layouts-sticky.html
- Tables 表格 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/tables-basic.html
- DataTables 数据表 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/tables-datatables.html
- Utilities 公共事业 https://demos.pixinvent.com/vuexy-html-admin-template/documentation/utilities.html
Tailwind CSS组件
- Marketing
- Page Section 页面部分
- Hero Sections 英雄板块 https://tailwindui.com/components/marketing/sections/heroes
- Feature Sections 特色板块 https://tailwindui.com/components/marketing/sections/feature-sections
- CTA Sections CTA板块 https://tailwindui.com/components/marketing/sections/cta-sections
- Bento Grids 便当网格 https://tailwindui.com/components/marketing/sections/bento-grids
- Pricing Sections 价格板块 https://tailwindui.com/components/marketing/sections/pricing
- Header Sections 头部板块 https://tailwindui.com/components/marketing/sections/header
- Newsletter Sections 新闻通讯板块 https://tailwindui.com/components/marketing/sections/newsletter-sections
- Stats 统计数据 https://tailwindui.com/components/marketing/sections/stats-sections
- Testimonials 客户评价 https://tailwindui.com/components/marketing/sections/testimonials
- Blog Sections 博客板块 https://tailwindui.com/components/marketing/sections/blog-sections
- Contact Sections 接触板块 https://tailwindui.com/components/marketing/sections/contact-sections
- Team Sections 团队板块 https://tailwindui.com/components/marketing/sections/team-sections
- Content Sections 内容板块 https://tailwindui.com/components/marketing/sections/content-sections
- Logo Clouds 标志云 https://tailwindui.com/components/marketing/sections/logo-clouds
- FAQs 常见问题解答 https://tailwindui.com/components/marketing/sections/faq-sections
- Footers 页脚 https://tailwindui.com/components/marketing/sections/footers
- Elements 元件
- Headers 页眉 https://tailwindui.com/components/marketing/elements/headers
- Flyout Menus 弹出菜单 https://tailwindui.com/components/marketing/elements/flyout-menus
- Banners 横幅广告 https://tailwindui.com/components/marketing/elements/banners
- Feedback 反馈
- 404 Pages 404页面 https://tailwindui.com/components/marketing/feedback/404-pages
- Page Examples 页面示例
- Landing Pages 登录页面 https://tailwindui.com/components/marketing/page-examples/landing-pages
- Pricing Pages 定价页面 https://tailwindui.com/components/marketing/page-examples/pricing-pages
- About Pages 关于页面 https://tailwindui.com/components/marketing/page-examples/about-pages
- Application UI
- Application Shells 应用程序外观
- Stacked Layouts 堆叠布局 https://tailwindui.com/components/application-ui/application-shells/stacked
- Sidebar Layouts 提要字段版面配置 https://tailwindui.com/components/application-ui/application-shells/sidebar
- Multi-Column Layouts 多栏布局 https://tailwindui.com/components/application-ui/application-shells/multi-column
- Headings 标题
- Page Headings 页面标题 https://tailwindui.com/components/application-ui/headings/page-headings
- Card Headings 卡片标题 https://tailwindui.com/components/application-ui/headings/card-headings
- Section Headings 章节标题 https://tailwindui.com/components/application-ui/headings/section-headings
- Data Display 数据显示
- Description Lists 描述列表 https://tailwindui.com/components/application-ui/data-display/description-lists
- Stats 统计数据 https://tailwindui.com/components/application-ui/data-display/stats
- Calendars 日历 https://tailwindui.com/components/application-ui/data-display/calendars
- Lists 列出
- Stacked Lists 堆叠列表 https://tailwindui.com/components/application-ui/lists/stacked-lists
- Tables 表 https://tailwindui.com/components/application-ui/lists/tables
- Grid Lists 网格列出 https://tailwindui.com/components/application-ui/lists/grid-lists
- Feeds 提要 https://tailwindui.com/components/application-ui/lists/feeds
- Forms 形式
- Form Layouts 表单布局 https://tailwindui.com/components/application-ui/forms/form-layouts
- Input Groups 输入组 https://tailwindui.com/components/application-ui/forms/input-groups
- Select Menus 选择菜单 https://tailwindui.com/components/application-ui/forms/select-menus
- Sign-in and Registration 登录和注册 https://tailwindui.com/components/application-ui/forms/sign-in-forms
- Text areas 文本区域 https://tailwindui.com/components/application-ui/forms/textareas
- Radio Groups 无线电群组 https://tailwindui.com/components/application-ui/forms/radio-groups
- Checkboxes 复选框 https://tailwindui.com/components/application-ui/forms/checkboxes
- Toggles 切换 https://tailwindui.com/components/application-ui/forms/toggles
- Action Panels 行动小组 https://tailwindui.com/components/application-ui/forms/action-panels
- Comboboxes 组合框 https://tailwindui.com/components/application-ui/forms/comboboxes
- Feedback 反馈
- Alerts 警报 https://tailwindui.com/components/application-ui/feedback/alerts
- Empty States 空态 https://tailwindui.com/components/application-ui/feedback/empty-states
- Navigation 导航
- Navbars 导航栏组件 https://tailwindui.com/components/application-ui/navigation/navbars
- Pagination 分页 https://tailwindui.com/components/application-ui/navigation/pagination
- Tabs 选项卡 https://tailwindui.com/components/application-ui/navigation/tabs
- Vertical Navigation 垂直导航 https://tailwindui.com/components/application-ui/navigation/vertical-navigation
- Sidebar Navigation 侧边栏导航 https://tailwindui.com/components/application-ui/navigation/sidebar-navigation
- Breadcrumbs 面包屑 https://tailwindui.com/components/application-ui/navigation/breadcrumbs
- Progress Bars 进度条 https://tailwindui.com/components/application-ui/navigation/progress-bars
- Command Palettes 命令选项板 https://tailwindui.com/components/application-ui/navigation/command-palettes
- Overlays 覆盖
- Modal Dialogs 模态对话框 https://tailwindui.com/components/application-ui/overlays/modal-dialogs
- Drawers 抽屉 https://tailwindui.com/components/application-ui/overlays/drawers
- Notifications 通知 https://tailwindui.com/components/application-ui/overlays/notifications
- Elements 元件
- Avatars 头像 https://tailwindui.com/components/application-ui/elements/avatars
- Badges 徽章 https://tailwindui.com/components/application-ui/elements/badges
- Dropdowns 下拉菜单 https://tailwindui.com/components/application-ui/elements/dropdowns
- Buttons 按钮 https://tailwindui.com/components/application-ui/elements/buttons
- Button Groups 按钮组 https://tailwindui.com/components/application-ui/elements/button-groups
- Layout 布局
- Containers 容器 https://tailwindui.com/components/application-ui/layout/containers
- Cards 卡 https://tailwindui.com/components/application-ui/layout/cards
- List containers 列表容器 https://tailwindui.com/components/application-ui/layout/list-containers
- Media Objects 媒体对象 https://tailwindui.com/components/application-ui/layout/media-objects
- Dividers 分隔器 https://tailwindui.com/components/application-ui/layout/dividers
- Page Examples 页面示例
- Home Screens 主屏幕 https://tailwindui.com/components/application-ui/page-examples/home-screens
- Detail Screens 细节屏幕 https://tailwindui.com/components/application-ui/page-examples/detail-screens
- Settings Screens 设置屏面 https://tailwindui.com/components/application-ui/page-examples/settings-screens
- Ecommerce
- Components 组件
- Product Overviews 产品概述 https://tailwindui.com/components/ecommerce/components/product-overviews
- Product Lists 产品清单 https://tailwindui.com/components/ecommerce/components/product-lists
- Category Previews 类别预览 https://tailwindui.com/components/ecommerce/components/category-previews
- Shopping Carts 购物车 https://tailwindui.com/components/ecommerce/components/shopping-carts
- Category Filters 类别过滤器 https://tailwindui.com/components/ecommerce/components/category-filters
- Product Quickviews 产品快速浏览 https://tailwindui.com/components/ecommerce/components/product-quickviews
- Product Features 产品功能 https://tailwindui.com/components/ecommerce/components/product-features
- Store Navigation 存储导航 https://tailwindui.com/components/ecommerce/components/store-navigation
- Promo Sections 促销部分 https://tailwindui.com/components/ecommerce/components/promo-sections
- Checkout Forms 结账表格 https://tailwindui.com/components/ecommerce/components/checkout-forms
- Reviews 评论 https://tailwindui.com/components/ecommerce/components/reviews
- Order Summaries 订单汇总 https://tailwindui.com/components/ecommerce/components/order-summaries
- Order History 订单历史 https://tailwindui.com/components/ecommerce/components/order-history
- Incentives 激励 https://tailwindui.com/components/ecommerce/components/incentives
- Page Examples 页面示例
- Storefront Pages 店面页面 https://tailwindui.com/components/ecommerce/page-examples/storefront-pages
- Product Pages 产品页面 https://tailwindui.com/components/ecommerce/page-examples/product-pages
- Category Pages 类别页面 https://tailwindui.com/components/ecommerce/page-examples/category-pages
- Shopping Cart Pages 购物车页面 https://tailwindui.com/components/ecommerce/page-examples/shopping-cart-pages
- Checkout Pages 结账页面 https://tailwindui.com/components/ecommerce/page-examples/checkout-pages
- Order Detail Pages 订单详细信息页面 https://tailwindui.com/components/ecommerce/page-examples/order-detail-pages
- Order History Pages 订单历史页面 https://tailwindui.com/components/ecommerce/page-examples/order-history-pages
ScriptEcho整理组件集合
- 2D/3D/XR组件
- @egjs/view3d组件 https://naver.github.io/egjs-view3d/docs
- 3Dmol.js https://3dmol.org/doc/
- potree组件 https://github.com/potree/potree/
- three.js组件 https://threejs.org/docs/index.html#manual/en/introduction/Creating-a-scene
- pixijs https://pixijs.com/8.x/tutorials/getting-started#1
- two.js https://two.js.org/examples/#official-examples
- Matter.js https://github.com/liabru/matter-js/tree/master/examples
- PlayCanvasEngine https://developer.playcanvas.com/user-manual/
- vue-3d-model组件 https://gitee.com/happinessllw/vue-3d-model
- AntV组件
- antvs2组件 https://s2.antv.antgroup.com/manual/introduction
- antvx6组件 https://x6.antv.vision/zh/docs/tutorial/about
- antvl7组件 https://www.yuque.com/antv/l7/wyb66y
- antvg6组件 https://www.yuque.com/antv/g6/intro
- antvg2组件 https://www.yuque.com/antv/g2-docs/get-started
- antvf2组件 https://www.yuque.com/antv/f2/grammar
- antv/f6组件 https://f6.antv.vision/zh/docs/manual/introduction/
- 地图组件
- 动画组件
- 企业协作组件
- @xpyjs/gantt组件 https://xpyjs.github.io/gantt/docs/root.html
- gantt-schedule-timeline-calendar组件 https://gitee.com/endfalse/gantt-schedule-timeline-calendar#install
- 音视频组件
- jessibuca.js组件 https://jessibuca.com/document.html
- vidstack/vue组件 https://www.vidstack.io/docs/player/getting-started/installation?styling=default-layout&provider=video
- vue-record-audio组件 https://www.npmjs.com/package/vue-record-audio
- 在线文档组件
- CodeMirror组件 https://codemirror.net/docs/guide/
- drauu组件 https://github.com/antfu/drauu
- mind-elixir组件 https://mind-elixir.com/docs/getting-started/quick-start
- tinymce组件 https://www.tiny.cloud/docs/tinymce/latest/basic-setup/
- tiptap组件 https://tiptap.dev/docs/editor/getting-started/install
- Univer组件 https://univer.ai/zh-CN/guides/sheet/getting-started/quickstart
- vue-office组件 https://501351981.github.io/vue-office/examples/docs/config/
- WangEditor组件 https://www.wangeditor.com/v5/getting-started.html
- vue-markdown-it https://freedomevenden.com/projects/vue-markdown-it#usage
- 拓扑图
- 图形组件
- BPMN.js https://bpmn.io/toolkit/bpmn-js/walkthrough/
- JSXGraph https://jsxgraph.org/wp/docs/index.html
- LiteGraph.js https://github.com/jagenjo/litegraph.js
- Rough.js https://roughjs.com/
- 图形处理
- OpenCV.js https://docs.opencv.org/3.4/d5/d10/tutorial_js_root.html
- WASM-ImageMagick https://github.com/ImageMagick/ImageMagick
- 其他
- uiverse卡片 https://uiverse.io/elements
- WebSight1 https://docs.websight.io/cms/quick-start/
- WebSight2 https://docs.websight.io/cms/quick-start/
- 人工智能组件 https://www.llama.com/docs/how-to-guides/
- ECharts图表 https://echarts.apache.org/zh/option.html#title