devbox
凡人多烦事01
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

Nextui使用

作者：凡人多烦事01 | 2024-02-21 01:55:01

赞

踩

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",
            },
          },
        },
      },
    }),
  ],
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
 nextui({
      themes: {
        dark: {
          colors: {
            primary: {
              DEFAULT: "#BEF264",
              foreground: "#000000",
            },
            focus: "#BEF264",
          },
        },
      },

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12

调色板

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>

  • 1

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

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

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 (
    <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

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26

可以切换多个主题

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>
  )
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13

切换主题下拉菜单

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 (
        <div>
            <Dropdown>
                <DropdownTrigger>
                    <Button
                        variant="light"
                    >
                        {theme}
                    </Button>
                </DropdownTrigger>
                <DropdownMenu
                    aria-label="Single selection example"
                    variant="flat"
                    disallowEmptySelection
                    selectionMode="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>
    )
};

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50

突然报错则删除本地存储的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>
  );
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29

常用组件

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}>

  • 1

Navbar导航栏

在这里插入图片描述

改变大小

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

  • 1

其他参数

在这里插入图片描述

Modal对话框

在这里插入图片描述

在这里插入图片描述

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

Image图片

在这里插入图片描述

Pagination页码

在这里插入图片描述

tabs选项卡（可做表单）

在这里插入图片描述

在这里插入图片描述

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

声明：本文内容由网友自发贡献，转载请注明出处：【wpsshop】
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号