当前位置: 首页 > ds >正文

【玩转全栈】—— 无敌前端究极动态组件库--Inspira UI

目录

Inspira UI 介绍

配置环境

使用示例


 

效果:

Inspira UI

学习视频:

华丽优雅 | Inspira UI快速上手_哔哩哔哩_bilibili

官网:https://inspira-ui.com/

Inspira UI 介绍

        Inspira UI 是一个设计精美、功能丰富的用户界面库,专为开发者和设计师打造,旨在加速Web应用程序的开发过程。它提供了一系列精心设计的组件,如按钮、卡片、表单元素、导航栏等,所有这些都遵循现代设计原则,并且高度可定制,使得创建独特而专业的用户体验变得轻而易举。Inspira UI 支持多种框架,包括React、Vue和Angular,确保无论使用何种技术栈都能无缝集成。其文档详尽清晰,包含大量示例和最佳实践指南,帮助新手快速上手,同时也为有经验的开发者提供了深入探索的可能性。此外,Inspira UI 强调响应式设计,保证了应用在不同设备上的完美展现,让开发者只需编写一次代码即可适配各种屏幕尺寸。无论是构建企业级应用还是个人项目,Inspira UI 都是一个值得信赖的选择。

配置环境

官网也有教如何配置的,看不懂的可以看我下面的操作:

创建一个 vue 项目:

npm create @latest 项目名称

下载依赖:

npm install

需要下载 tailwindcss 依赖(建议使用 cnpm 或者 pnpm 等打包工具, npm 下载会很慢,甚至导致下载失败):

cnpm install -D tailwindcss@3 postcss autoprefixer

初始化配置文件:

npx tailwindcss init -p

向生成的配置文件  tailwind.config.js 中指定 Tailwind CSS 的作用范围

  content: ["./index.html","./src/**/*.{js,ts,jsx,tsx}",],

在  assets / main.css 中添加注解:

@tailwind base;
@tailwind components;
@tailwind utilities;

继续添加依赖:

cnpm install -D @inspira-ui/plugins clsx tailwind-merge class-variance-authority tailwindcss-animate

添加 vue - use:

cnpm install @vueuse/core motion-v

继续手动添加配置,复制以下代码到  tailwind.config.js :

import animate from "tailwindcss-animate";
import { setupInspiraUI } from "@inspira-ui/plugins";export default {darkMode: "selector",safelist: ["dark"],prefix: "",content: ["./index.html", "./src/**/*.{vue,js,ts,jsx,tsx}"],theme: {extend: {colors: {border: "hsl(var(--border))",input: "hsl(var(--input))",ring: "hsl(var(--ring))",background: "hsl(var(--background))",foreground: "hsl(var(--foreground))",primary: {DEFAULT: "hsl(var(--primary))",foreground: "hsl(var(--primary-foreground))",},secondary: {DEFAULT: "hsl(var(--secondary))",foreground: "hsl(var(--secondary-foreground))",},destructive: {DEFAULT: "hsl(var(--destructive))",foreground: "hsl(var(--destructive-foreground))",},muted: {DEFAULT: "hsl(var(--muted))",foreground: "hsl(var(--muted-foreground))",},accent: {DEFAULT: "hsl(var(--accent))",foreground: "hsl(var(--accent-foreground))",},popover: {DEFAULT: "hsl(var(--popover))",foreground: "hsl(var(--popover-foreground))",},card: {DEFAULT: "hsl(var(--card))",foreground: "hsl(var(--card-foreground))",},},borderRadius: {xl: "calc(var(--radius) + 4px)",lg: "var(--radius)",md: "calc(var(--radius) - 2px)",sm: "calc(var(--radius) - 4px)",},},},plugins: [animate, setupInspiraUI],
};

复制官网 css 配置代码到 assets / main.css :

@tailwind base;
@tailwind components;
@tailwind utilities;@layer base {:root {--background: 0 0% 100%;--foreground: 222.2 84% 4.9%;--card: 0 0% 100%;--card-foreground: 222.2 84% 4.9%;--popover: 0 0% 100%;--popover-foreground: 222.2 84% 4.9%;--primary: 221.2 83.2% 53.3%;--primary-foreground: 210 40% 98%;--secondary: 210 40% 96.1%;--secondary-foreground: 222.2 47.4% 11.2%;--muted: 210 40% 96.1%;--muted-foreground: 215.4 16.3% 46.9%;--accent: 210 40% 96.1%;--accent-foreground: 222.2 47.4% 11.2%;--destructive: 0 84.2% 60.2%;--destructive-foreground: 210 40% 98%;--border: 214.3 31.8% 91.4%;--input: 214.3 31.8% 91.4%;--ring: 221.2 83.2% 53.3%;--radius: 0.5rem;}.dark {--background: 222.2 84% 4.9%;--foreground: 210 40% 98%;--card: 222.2 84% 4.9%;--card-foreground: 210 40% 98%;--popover: 222.2 84% 4.9%;--popover-foreground: 210 40% 98%;--primary: 217.2 91.2% 59.8%;--primary-foreground: 222.2 47.4% 11.2%;--secondary: 217.2 32.6% 17.5%;--secondary-foreground: 210 40% 98%;--muted: 217.2 32.6% 17.5%;--muted-foreground: 215 20.2% 65.1%;--accent: 217.2 32.6% 17.5%;--accent-foreground: 210 40% 98%;--destructive: 0 62.8% 30.6%;--destructive-foreground: 210 40% 98%;--border: 217.2 32.6% 17.5%;--input: 217.2 32.6% 17.5%;--ring: 224.3 76.3% 48%;}
}

src 下创建 lib 文件夹,文件夹中创建 utils.ts 文件,这个文件用于提供工具函数,复制官网代码进去:

import { type ClassValue, clsx } from "clsx";
import { twMerge } from "tailwind-merge";export function cn(...inputs: ClassValue[]) {return twMerge(clsx(inputs));
}export type ObjectValues<T> = T[keyof T];

使用示例

这里使用 Vortex :

直接复制代码即可实现炫酷界面,需要注意的是,有的样式背可能会需要下载其他依赖,比如这里就让我下载  simplex-noise  ,跟着官网做就行了,官网也会给出下载命令:

npm install simplex-noise

   然后要做 web 主页面,背景模板和文字是分开的,创建 Vortex 文件,并复制代码进去,这里的 Slot 就是插槽,其他组件调用此组件,可以将文字传入此插槽,就能实现在背景上展现图片。

然后复制上面 code 到主组件

注意,这里需要引入刚才创建的 Vortex.vue :

<script setup lang="ts">
import Vortex from '@/components/inspirs/Vortex.vue';
import { Motion } from "motion-v";
</script>

这也是官方的一个漏洞,没有给出引入的代码,当然,上面是背景和文字分开的代码,也可以把背景和文字融合到一个 vue 文件中,也就不需要 引入了,但是这样不利于维护和扩展。

代码部署完后的效果(我这里还融合了其他样式,跟官网的示例会不大一样):

Inspira UI

感谢您的观看!!!

http://www.xdnf.cn/news/1715.html

相关文章:

  • 乡村治理数字化平台:信息技术赋能乡村振兴的深度探索
  • 数据结构-选择排序(Python)
  • QT创建软件登录界面(14)
  • JavaScript 的“世界模型”:深入理解对象 (Objects)
  • 理解欧拉公式
  • 弄清C语言中的链表
  • 济南国网数字化培训班学习笔记-第二组-1节-输电线路工程
  • DRF凭什么更高效?Django原生API与DRF框架开发对比解析
  • 如何创建和使用 Hive 视图
  • 【低配置电脑预训练minimind的实践】
  • 【网络安全】社会工程学策略
  • H3C Magic路由器安全警报来啦![特殊字符][特殊字符]
  • Spark-Streaming核心编程(2)
  • 三国杀专业分析面板,立志成为桌游界的stockfish
  • AI与智能能源管理:如何通过AI优化能源分配和消耗?
  • 矩阵运营的限流问题本质上是平台与创作者之间的流量博弈
  • 【25软考网工】第三章(3)虚拟局域网VLAN
  • Nginx 反向代理,啥是“反向代理“啊,为啥叫“反向“代理?而不叫“正向”代理?它能干哈?
  • Qt5.15.2+OpenCV4.9.0开发环境搭建详细图文教程(OpenCV使用Qt自带MinGW编译的全过程,包教包会)
  • 低代码平台开发串口调试助手
  • 【Java面试笔记:进阶】17.一个线程两次调用start()方法会出现什么情况?
  • 单体OJ项目
  • Java语言的进化:JDK的未来版本
  • vue-study(1)
  • Vue3项目中 npm 依赖安装 --save 与 --save-dev 的区别解析
  • 面试篇:Spring Boot
  • leetcode 69和367
  • 一道MySQL索引题
  • 如何下载适用于语音识别功能增强的Google Chrome浏览器
  • JavaScript 页面刷新:从传统到现代的全面解析