JGuang / JGuang UI
Components组件Base UIBase UI 组件

轻提示

在页面边缘展示短暂的操作反馈通知。

中文模式已适配导航、标题、简介、目录与常用章节名称。翻译状态:部分完成;技术正文目前仍为英文。
Loading JGuang UI example…

About

Sonner is built and maintained by emilkowalski.

安装

Command

Manual

Run the following command:

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Add the Toaster component.

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <main>{children}</main>
        <Toaster />
      </body>
    </html>
  )
}

安装以下依赖:

npm install sonner next-themes

将以下代码复制到你的项目中。

View complete source: components/ui/sonner.tsx

Add the Toaster component.

import { Toaster } from "@/components/ui/sonner"

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head />
      <body>
        <Toaster />
        <main>{children}</main>
      </body>
    </html>
  )
}

用法

import { toast } from "sonner"
toast("Event has been created.")

Types

Loading JGuang UI example…

Description

Loading JGuang UI example…

Position

Use the position prop to change the position of the toast.

Loading JGuang UI example…

API 参考

See the Sonner API Reference for more information.

来源: components/base/sonner.mdx

JGuang UI 技术文档。

On this page