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 theme
colors: {
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
延迟更换主题防止水合错误
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 UI
useEffect(() => {
setMounted(true)
}, [])
if (!mounted) {
return null
}
return (
)
}
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 (
{children}
)
}
切换主题下拉菜单
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 null
const handleClick = (key: string) => {
setTheme(key)
}
return (
handleClick(key as string)}
>
Light Mode
Dark Mode
purple-dark Mode
)
};
突然报错则删除本地存储的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 (
);
}
常用组件
Listbox侧边栏
Button
Autocomplete(输入框加选项结合的组件)
外加搜索功能
Badge图标小提示
Breadcrumbs当前路径提示
Card文章卡片
运行与父组件等宽
Navbar导航栏
改变大小
其他参数
Modal对话框
onOpenChange()可以打开/关闭模态
Image图片
Pagination页码
tabs选项卡（可做表单）
偶尔分享web开发知识
小破站
blog