Nextui使用

安装和使用

https://nextui.org/docs/frameworks/nextjs

自定义主题

https://nextui.org/docs/customization/customize-theme

// tailwind.config.js
const {nextui} = require("@nextui-org/react");/** @type {import('tailwindcss').Config} */
module.exports = {plugins: [nextui({themes: {"purple-dark": {extend: "dark", // <- inherit default values from dark themecolors: {background: "#0D001A",foreground: "#ffffff",primary: {50: "#3B096C",100: "#520F83",200: "#7318A2",300: "#9823C2",400: "#c031e2",500: "#DD62ED",600: "#F182F6",700: "#FCADF9",800: "#FDD5F9",900: "#FEECFE",DEFAULT: "#DD62ED",foreground: "#ffffff",},focus: "#F182F6",},layout: {disabledOpacity: "0.3",radius: {small: "4px",medium: "6px",large: "8px",},borderWidth: {small: "1px",medium: "2px",large: "3px",},},},},}),],
};
 nextui({themes: {dark: {colors: {primary: {DEFAULT: "#BEF264",foreground: "#000000",},focus: "#BEF264",},},},

调色板

For an effective palette, we recommend using color ranges from 50 to 900. You can use tools like Eva Design System, Smart Watch, Palette or Color Box to generate your palette.

切换主题

https://github.com/pacocoursey/next-themes

错误(水合)

https://github.com/pacocoursey/next-themes

<html lang="en" suppressHydrationWarning>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

延迟更换主题防止水合错误

import { useState, useEffect } from 'react'
import { useTheme } from 'next-themes'const ThemeSwitch = () => {const [mounted, setMounted] = useState(false)const { theme, setTheme } = useTheme()// useEffect only runs on the client, so now we can safely show the UIuseEffect(() => {setMounted(true)}, [])if (!mounted) {return null}return (<select value={theme} onChange={e => setTheme(e.target.value)}><option value="system">System</option><option value="dark">Dark</option><option value="light">Light</option></select>)
}export default ThemeSwitch

可以切换多个主题

E:\Nextjs\nextuiapp\providers.tsx

'use client'
import { ThemeProvider as NextThemesProvider } from "next-themes";
import { NextUIProvider } from '@nextui-org/react'export function Providers({ children }: { children: React.ReactNode }) {return (<NextUIProvider><NextThemesProvider attribute="class" defaultTheme="light" themes={['light', 'dark','purple-dark']}>{children}</NextThemesProvider></NextUIProvider>)
}

切换主题下拉菜单

E:\Nextjs\nextuiapp\components\ThemeSwitcher.tsx

"use client";
import { useTheme } from "next-themes";
import { useEffect, useState } from "react";
import React from "react";
import { Dropdown, DropdownTrigger, DropdownMenu, DropdownItem, Button } from "@nextui-org/react";export function ThemeSwitcher() {const [mounted, setMounted] = useState(false)const [selectedKeys, setSelectedKeys] = React.useState(new Set(["light"]));const { theme, setTheme } = useTheme()useEffect(() => {setSelectedKeys(new Set([localStorage.getItem("theme")||'light']))setMounted(true)}, [])if (!mounted) return nullconst handleClick = (key: string) => {setTheme(key)}return (<div><Dropdown><DropdownTrigger><Buttonvariant="light">{theme}</Button></DropdownTrigger><DropdownMenuaria-label="Single selection example"variant="flat"disallowEmptySelectionselectionMode="single"selectedKeys={selectedKeys}onSelectionChange={setSelectedKeys as any}onAction={(key) => handleClick(key as string)}><DropdownItem key="light">Light Mode</DropdownItem><DropdownItem key="dark">Dark Mode</DropdownItem><DropdownItem key="purple-dark">purple-dark Mode</DropdownItem></DropdownMenu></Dropdown></div>)
};

突然报错则删除本地存储的theme

应用主题颜色

All components that use the primary color will be affected by this change.

import {Button} from "@nextui-org/react";export default function App() {return (<div className="flex flex-wrap gap-4 items-center"><Button color="primary" variant="solid">Solid</Button><Button color="primary" variant="faded">Faded</Button><Button color="primary" variant="bordered">Bordered</Button><Button color="primary" variant="light">Light</Button><Button color="primary" variant="flat">Flat</Button><Button color="primary" variant="ghost">Ghost</Button><Button color="primary" variant="shadow">Shadow</Button></div>);
}

常用组件

Listbox侧边栏

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

Button

Autocomplete(输入框加选项结合的组件)

外加搜索功能

Badge图标小提示

在这里插入图片描述

Breadcrumbs当前路径提示

在这里插入图片描述

Card文章卡片

在这里插入图片描述

运行与父组件等宽

<Card className=" border flex flex-col  relative dark:bg-dark dark:text-white sm:p-5  text-accent    dark:border-none" fullWidth={true}>

Navbar导航栏

在这里插入图片描述

改变大小

<Navbar  shouldHideOnScroll className="w-full border" maxWidth="xl">

其他参数

在这里插入图片描述

Modal对话框

在这里插入图片描述

在这里插入图片描述

onOpenChange()可以打开/关闭模态

Image图片

在这里插入图片描述

Pagination页码

在这里插入图片描述

tabs选项卡(可做表单)

在这里插入图片描述

在这里插入图片描述

偶尔分享web开发知识
小破站
blog

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/213487.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

deepstream docker安装

介绍 deepstream为dGPU和Jetson平台提供dockers containers&#xff0c;这些镜像可以方便开发者很快地部署deepstream应用。deepstream的docker images可以在NGC web中得到。 安装Docker Docker 是一个开源的容器化平台&#xff0c;它允许你构建&#xff0c;测试&#xff0c…

29. 如何在Spring所有BeanDefinition注册完后做扩展?

如何在Spring所有BeanDefinition注册完后做扩展? 通常可以使用beanFactoryPostProcessor 对已注册的BeanDefinition进行修改或者通过它的子接口BeanDefinitionRegistryPostProcessor 再进行注册额外扩展 BeanDefinitionRegistryPostProcessor 1、概述 public interface Bea…

0基础学java-day18-( 坦克大战【2】)

课件资源放在文末 1.线程-应用到坦克大战 1.1 坦克大战 0.3 【坦克类&#xff1a;包括坦克的基本属性&#xff0c;以及坦克的移动方法】 package com.hspedu.tankgame03;/*** author 韩顺平* version 1.0*/ public class Tank {private int x;//坦克的横坐标private int y;…

XMemcached network layout exception java.nio.channels.ClosedChannelException

java.nio.channels.ClosedChannelException 表示尝试在已关闭的通道上进行 I/O 操作&#xff0c;通常发生在网络连接意外关闭后尝试在关闭的通道上执行读取或写入操作。 XMemcached network layout exception 可能是由于 XMemcached 客户端在尝试与 Memcached 服务器通信时发生…

一些AG10K FPGA 调试的建议-Douglas

PLL AGM FPGA 在配置成功时&#xff0c;PLL 已经完成锁定&#xff0c;lock 信号已经变高&#xff1b;如果原设计中用 lock 信号输出实现系统 reset 的复位功能&#xff0c;就不能正确完成上电复位&#xff1b;同时&#xff0c;为了保证 PLL 相移的稳定&#xff0c;我们需要在 P…

C++笔记之重载和重写辨别

C笔记之重载和重写辨别 code review! 文章目录 C笔记之重载和重写辨别重载&#xff08;overloading&#xff09;重写&#xff08;Overriding&#xff09; 在C中&#xff0c;重载&#xff08;overloading&#xff09;和重写&#xff08;overriding&#xff09;是面向对象编程中…

笔记69:Conv1d 和 Conv2d 之间的区别

笔记地址&#xff1a;D:\work_file\&#xff08;4&#xff09;DeepLearning_Learning\03_个人笔记\4. Transformer 网络变体 a a a a a a a a a a a

设计模式-门面模式(Facade)

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、定义二、结构 前言 在组件构建过程中&#xff0c;某些接口之间直接依赖会带来很多问题&#xff0c;甚至无法直接实现。采用一层间接接口&#xff0c;来隔离…

SpringBoot报No qualifying bean of type ‘com.lzk.mapper.UserMapper‘ available

这个异常是SpringBoot程序没有找到要Bean&#xff0c;这里提示找不到UserMapper&#xff0c;有以下三种解决方式&#xff1a; 在UserMapper上添加注解MapperMapper public interface UserMapper extends BaseMapper<User> { }在启动类上进行Mapper包扫描&#xff0c;不用…

【IC前端虚拟项目】工程目录组织说明

【IC前端虚拟项目】数据搬运指令处理模块前端实现虚拟项目说明-CSDN博客 文档目录在“MVU芯片前端设计验证虚拟项目”中&#xff0c;截至本篇文章时&#xff0c;包含了MVU_FS.md/project_req.md和mvu_vp_list.xlsx三个文件。 MVU_FS是模块的方案文档&#xff0c;除了feature和…

浅谈CompletableFuture

作者简介&#xff1a;大家好&#xff0c;我是smart哥&#xff0c;前中兴通讯、美团架构师&#xff0c;现某互联网公司CTO 联系qq&#xff1a;184480602&#xff0c;加我进群&#xff0c;大家一起学习&#xff0c;一起进步&#xff0c;一起对抗互联网寒冬 回顾FutureTask 之前我…

安全高效 江西变电站成功应用国家电网无人机巡检

随着电力需求的迅速增长&#xff0c;电网的巡检、维护与保养变得越来越重要。为迎接这一挑战&#xff0c;江西供电公司的一座变电站成功引入了复亚智能国家电网无人机巡检系统&#xff0c;在提升巡检水平、开创新型巡检模式方面做出了重要尝试&#xff0c;为电网设备的高效巡检…

EDA 数字时钟

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、数字时钟是什么&#xff1f;二、EDA里面数码管的显示1.元件模型2.参考程序3. 实验仿真波形4.实验现象5. 仿真问题 三、显示时钟1. 时钟电路模块2.参考程序3…

gRPC .net学习

学习helloworld server用.net client有.net的控制台 和 unity server端 直接使用vs2022创建(需自行看有无装asp.net哦),搜索gPRC,使用6.0吧&#xff0c;创建工程后直接F5跑起来,服务端到此完成 .net控制台client,创建新的控制台,使用NuGet,然后导入server端的Protos文件夹 学…

基于Jedis来探讨池化技术

为什么需要池化技术 系统运行时必然是需要数据库连接、线程等一些重量级对象&#xff0c;频繁的创建这种对象对性能有着不小的开销&#xff0c;所以为了减少没必要的创建和开销&#xff0c;我们就用到了池化技术。 通过创建一个资源池来保存这些资源便于后续的复用&#xff0c…

【C++初阶】七、内存管理(C/C++内存分布、C++内存管理方式、operator new / delete 函数、定位new表达式)

相关代码gitee自取&#xff1a; C语言学习日记: 加油努力 (gitee.com) 接上期&#xff1a; 【C初阶】六、类和对象&#xff08;初始化列表、static成员、友元、内部类&#xff09;-CSDN博客 目录 一 . C/C内存分布 C/C中程序内存区域划分&#xff1a; 二 . C内存管理方式 …

16.Java程序设计-基于SSM框架的android餐厅在线点单系统App设计与实现

摘要&#xff1a; 本研究旨在设计并实现一款基于SSM框架的Android餐厅在线点单系统&#xff0c;致力于提升餐厅点餐流程的效率和用户体验。通过整合Android移动应用和SSM框架的优势&#xff0c;该系统涵盖了用户管理、菜单浏览与点单、订单管理、支付与结算等多个功能模块&…

用户登录权限

文章目录 [TOC](文章目录) 前言一、 Cookie与session1.HTTP无状态2.cookie 和 session 的生命周期2.1 cookie 生命周期影响因素2.2 session 生命周期影响因素 3.cookie 和 session 的区别4.工作原理3 用户登录Node.js和Express验证session 二、JSON Web Token1. JWT 介绍2. JWT…

C#使用Matrix类对Dicom图像的放缩

C#使用Matrix类对Dicom图像的放缩&#xff0c;使用Matrix 1.同时操作水平、垂直同时放缩 // 创建一个 Matrix 对象 Matrix m_Matrix new Matrix();//放缩参数 float inputZoom1.2f; m_Matrix.Scale(inputZoom, inputZoom, MatrixOrder.Append); 2.操作水平&#xff08;X轴…

前端使用插件预览pdf、docx、xlsx、pptx格式文件

PDF预览 H5页面pdf预览 插件&#xff1a;pdfh5 版本&#xff1a;“pdfh5”: “^1.4.7” npm install pdfh5 import PdfH5 from "pdfh5"; import "pdfh5/css/pdfh5.css";// methods this.$nextTick(() > {this.pdfH5 new PdfH5("#pdf", {pd…