日韩成人免费在线_国产成人一二_精品国产免费人成电影在线观..._日本一区二区三区久久久久久久久不

當(dāng)前位置:首頁 > 科技  > 軟件

2023年最火前端項目憑什么是它?

來源: 責(zé)編: 時間:2024-01-10 09:35:58 217觀看
導(dǎo)讀近日,JavaScript Rising Stars 正式公布 2023 年 JavaScript 明星項目榜單,其中 shadcn/ui 位列榜首,2023 年獲得了 39.5k Star。本文將深入探討 shadcn/ui 是什么、使用方式、實現(xiàn)原理,它憑什么能夠成為年度最火前端項目

EhU28資訊網(wǎng)——每日最新資訊28at.com

近日,JavaScript Rising Stars 正式公布 2023 年 JavaScript 明星項目榜單,其中 shadcn/ui 位列榜首,2023 年獲得了 39.5k Star。本文將深入探討 shadcn/ui 是什么、使用方式、實現(xiàn)原理,它憑什么能夠成為年度最火前端項目!EhU28資訊網(wǎng)——每日最新資訊28at.com

EhU28資訊網(wǎng)——每日最新資訊28at.com

概述

Shadcn UI 與其他 UI 和組件庫如 Material UI、Ant Design、Element UI 的設(shè)計理念截然不同。這些庫一般通過 npm 包提供對組件的訪問,而 Shadcn UI 允許用戶將單個 UI 組件的源代碼直接下載到項目中,提供了更大的靈活性和定制空間。EhU28資訊網(wǎng)——每日最新資訊28at.com

按照 Shadcn UI 的說法,Shadcn UI 實際上并不是一個組件庫,而是可以復(fù)制并粘貼到應(yīng)用中的可重用組件的集合。EhU28資訊網(wǎng)——每日最新資訊28at.com

不到一年的時間,Shadcn UI 在 Github 上獲得了超過 40k Star。EhU28資訊網(wǎng)——每日最新資訊28at.com

EhU28資訊網(wǎng)——每日最新資訊28at.com

Shadcn UI 相比其他組件庫提供了幾個顯著的優(yōu)勢,其中最突出的包括:EhU28資訊網(wǎng)——每日最新資訊28at.com

  • 簡潔且易于使用:Shadcn UI為用戶提供了直觀且易于理解的文檔,可以輕松地開始使用。它不需要復(fù)雜的配置步驟,只需簡單的復(fù)制粘貼或使用CLI安裝即可快速集成到項目中。與其他組件庫相比,Shadcn UI簡化了開發(fā)流程,降低了學(xué)習(xí)曲線,可以專注于構(gòu)建應(yīng)用的核心功能。
  • 卓越的可訪問性:Shadcn UI 在設(shè)計之初就充分考慮到了可訪問性,確保其組件符合Web內(nèi)容可訪問性指南(WCAG)標準。這意味著使用Shadcn UI構(gòu)建的應(yīng)用程序不僅外觀美觀,而且能夠適應(yīng)各種用戶需求,無論是使用屏幕閱讀器、鍵盤導(dǎo)航還是其他輔助技術(shù)的用戶都能順利使用。
  • 精細控制與高度可定制:與其他UI庫不同,Shadcn UI允許直接訪問每個組件的源代碼。這意味著可以根據(jù)項目的具體需求輕松調(diào)整代碼,而無需受限于預(yù)定義的模板或樣式。這種高度的定制性提供了更大的靈活性,可以輕松地調(diào)整組件的外觀、行為和功能,以滿足項目的獨特要求。此外,這種可定制性還簡化了應(yīng)用 的擴展和維護工作,使得長期開發(fā)變得更加高效。

在決定是否在未來的項目中采用Shadcn UI之前,有幾個關(guān)鍵因素值得考慮:EhU28資訊網(wǎng)——每日最新資訊28at.com

  • 安裝與配置:使用Shadcn UI可能需要一些手動工作。由于您需要單獨安裝或復(fù)制每個所需的組件,對于那些習(xí)慣于自動化的現(xiàn)代開發(fā)環(huán)境的人來說,這可能意味著額外的步驟和潛在的混亂。對于那些希望快速集成UI庫的人來說,這可能是一個挑戰(zhàn)。
  • 代碼庫大小與可維護性:Shadcn UI的直接源代碼訪問意味著您的項目代碼庫可能會增加,因為您需要包含每個組件的完整代碼。這可能會導(dǎo)致代碼行數(shù)增加,從而影響項目的可維護性和性能。對于大型項目或長期開發(fā)來說,這可能是一個重要的考慮因素。
  • 定制與擴展性:雖然Shadcn UI的直接源代碼訪問提供了高度定制化的機會,但這也意味著你可能需要更多的時間和資源來調(diào)整和擴展組件。對于需要高度定制化和靈活性的項目,這是一個優(yōu)點;但對于需要快速集成的簡單應(yīng)用程序,這可能不是最佳選擇。
  • 社區(qū)與支持:隨著時間的推移,一個活躍的社區(qū)和良好的支持是確保庫持續(xù)發(fā)展和更新的關(guān)鍵因素。Shadcn UI的社區(qū)規(guī)模和活躍度可能與更成熟的庫相比較少。因此,評估其社區(qū)的成熟度和可用資源是決定是否采用Shadcn UI的重要考慮因素。

功能

Shadcn UI 提供了很多功能,以增強用戶體驗。下面就來看看 Shadcn UI 中的幾個主要的功能:主題和主題編輯器暗黑模式CLI組件EhU28資訊網(wǎng)——每日最新資訊28at.com

主題和主題編輯器

Shadcn UI 提供了精選的主題,可以輕松地將其復(fù)制并粘貼到應(yīng)用程序中。可以選擇通過代碼庫手動添加主題標記,或者使用 Shadcn UI 的主題編輯器進行更方便的操作。EhU28資訊網(wǎng)——每日最新資訊28at.com

主題編輯器允許配置各種屬性,如顏色、邊框半徑和模式(明亮或暗黑)。此外,還可以選擇兩種樣式:默認樣式和紐約樣式。每種樣式都具有獨特的組件、動畫和圖標。默認樣式具有較大的輸入字段、lucide-react圖標和用于動畫效果的tailwindcss-animate。而紐約樣式則包括較小的按鈕、帶陰影的卡片和Radix圖標。EhU28資訊網(wǎng)——每日最新資訊28at.com

使用Shadcn UI的圖形界面,創(chuàng)建自定義主題也非常簡單。編輯器會生成包含自定義樣式定義的代碼片段,只需將其復(fù)制粘貼到應(yīng)用中即可。EhU28資訊網(wǎng)——每日最新資訊28at.com

EhU28資訊網(wǎng)——每日最新資訊28at.com

shadcn-ui-theme-editor.gif下面是主題編輯器的代碼輸出示例,提供了淺色模式和深色模式的樣式標記:EhU28資訊網(wǎng)——每日最新資訊28at.com

@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.3rem;  }  .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%;  }}

暗黑模式

Shadcn UI 支持 Next.js 和 Vite 應(yīng)用的暗黑模式。對于 Next.js 應(yīng)用,Shadcn UI 使用next-themes來實現(xiàn)暗黑模式切換功能。當(dāng)用戶在明亮模式和暗黑模式之間切換時,應(yīng)用會在明亮和暗黑主題標記之間進行切換。EhU28資訊網(wǎng)——每日最新資訊28at.com

CLI

Shadcn UI 的 CLI 可以將庫與應(yīng)用集成,并添加依賴項以及應(yīng)用相關(guān)的tailwind.config.js配置。使用CLI還可以輕松地向應(yīng)用程序添加UI組件。EhU28資訊網(wǎng)——每日最新資訊28at.com

可以選擇手動從文檔中復(fù)制和粘貼每個組件的代碼,或者使用CLI進行添加。CLI提供了優(yōu)秀的開發(fā)者體驗,是使Shadcn UI更易于使用的一個功能。EhU28資訊網(wǎng)——每日最新資訊28at.com

組件

截至目前,Shadcn UI 擁有 40 個組件,包括 Accordion(手風(fēng)琴)、Skeleton(骨架屏)、Table(表格)和Popover(彈出框)等。通過利用 Shadcn UI 預(yù)構(gòu)建的組件,可以節(jié)省時間,而不必從頭開始構(gòu)建組件。EhU28資訊網(wǎng)——每日最新資訊28at.com

使用

下面來看看如何將 Shadcn UI 與 Next.js 集成。EhU28資訊網(wǎng)——每日最新資訊28at.com

初始化

首先,通過運行以下命令創(chuàng)建一個新的 Next.js 應(yīng)用:EhU28資訊網(wǎng)——每日最新資訊28at.com

npx create-next-app@latest my-app --typescript --tailwind --eslint

接下來,運行 init 命令來初始化新項目的依賴項:EhU28資訊網(wǎng)——每日最新資訊28at.com

npx shadcn-ui@latest init

CLI 將提示進行一些配置。以下是配置問題的示例:EhU28資訊網(wǎng)——每日最新資訊28at.com

Would you like to use TypeScript (recommended)? no / yesWhich style would you like to use? ? DefaultWhich color would you like to use as base color? ? SlateWhere is your global CSS file? ? ? app/globals.cssDo you want to use CSS variables for colors? ? no / yesWhere is your tailwind.config.js located? ? tailwind.config.jsConfigure the import alias for components: ? @/componentsConfigure the import alias for utils: ? @/lib/utilsAre you using React Server Components? ? no / yes

現(xiàn)在就可以在應(yīng)用中添加組件了,下面就來添加一個按鈕組件。EhU28資訊網(wǎng)——每日最新資訊28at.com

添加按鈕

可以運行以下命令以使用 CLI 添加一個按鈕:EhU28資訊網(wǎng)——每日最新資訊28at.com

npx shadcn-ui@latest add button

CLI 會自動創(chuàng)建一個組件文件夾,只需要從文件夾中導(dǎo)出它:EhU28資訊網(wǎng)——每日最新資訊28at.com

import { Button } from "@/components/ui/button"<Button variant="outline">Button</Button>

按鈕組件的 variant 屬性有六種值:default、destructive、outline、secondary、ghost、link。EhU28資訊網(wǎng)——每日最新資訊28at.com

創(chuàng)建表單

Shadcn UI 在表單方面不僅提供了 Input、Textarea、Checkbox 和 RadioGroup 等表單組件,還提供了一個Form組件,該組件是 react-hook-form 的包裝器。下面來用 shadcn/ui 創(chuàng)建一個登錄表單。EhU28資訊網(wǎng)——每日最新資訊28at.com

Form 組件提供了一些功能:EhU28資訊網(wǎng)——每日最新資訊28at.com

  • <FormField /> 組件,用于構(gòu)建受控表單字段
  • 支持使用表單驗證庫(如Valibot、Yup和Zod)進行驗證
  • 錯誤消息處理

可以運行以下命令來使用表單組件:EhU28資訊網(wǎng)——每日最新資訊28at.com

npx shadcn-ui@latest add form input

接下來,添加表單組件:EhU28資訊網(wǎng)——每日最新資訊28at.com

// use client    import { zodResolver } from "@hookform/resolvers/zod";  import { useForm } from "react-hook-form";  import * as z from "zod";    import { Button } from "@/components/ui/button";  import {    Form,    FormControl,    FormDescription,    FormField,    FormItem,    FormLabel,    FormMessage,  } from "@/components/ui/form";  import { Input } from "@/components/ui/input";    const FormSchema = z.object({    username: z.string().min(2, { message: "用戶名至少兩個字" }),  });    export function InputForm() {    const form = useForm({ resolver: zodResolver(FormSchema) });      function onSubmit(data) {      return (        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">          {JSON.stringify(data, null, 2)}        </pre>      );    }      return (      <Form {...form}>        <form onSubmit={form.handleSubmit(onSubmit)} className="w-2/3 space-y-6">          <FormField control={form.control} name="username" render={({ field }) => (            <FormItem>              <FormLabel>Username</FormLabel>              <FormControl>                <Input placeholder="Input username" {...field} />              </FormControl>              <FormMessage />            </FormItem>          )} />          <Button type="submit">Submit</Button>        </form>      </Form>    );  }

原理

Shadcn UI 組件的通用架構(gòu)如下:EhU28資訊網(wǎng)——每日最新資訊28at.com

EhU28資訊網(wǎng)——每日最新資訊28at.com

shadcn/ui基于核心原則構(gòu)建,即組件的設(shè)計應(yīng)與其實現(xiàn)分開。因此,shadcn/ui中的每個組件都具有兩層架構(gòu)。即:EhU28資訊網(wǎng)——每日最新資訊28at.com

  • 結(jié)構(gòu)和行為層
  • 樣式層

結(jié)構(gòu)和行為層

在結(jié)構(gòu)和行為層,組件以無頭形式實現(xiàn),這意味著它們的結(jié)構(gòu)組成和核心行為都被封裝在相應(yīng)的表示中,這意味著組件的結(jié)構(gòu)、布局和核心功能都在這一層進行定義和實現(xiàn)。此外,對于一些復(fù)雜的交互,如鍵盤導(dǎo)航和WAI-ARIA標準兼容性,也在這個層面進行考慮和實現(xiàn)。EhU28資訊網(wǎng)——每日最新資訊28at.com

為了支持這些復(fù)雜的功能和交互,shadcn/ui借助了一些成熟的、無頭(無界面)的UI庫。Radix UI 就是其中的一個關(guān)鍵庫,它在shadcn/ui的代碼庫中占有重要地位。許多常見的組件,如折疊面板(Accordion)、彈出框(Popover)、選項卡(Tabs)等,都是基于 Radix UI 的實現(xiàn)構(gòu)建的。EhU28資訊網(wǎng)——每日最新資訊28at.com

EhU28資訊網(wǎng)——每日最新資訊28at.com

對于滿足大多數(shù)組件需求,原生瀏覽器元素和Radix UI組件已經(jīng)足夠了。但在某些情況下,需要使用更專業(yè)的無頭UI庫來滿足特定需求。EhU28資訊網(wǎng)——每日最新資訊28at.com

其中一種情況是表單處理。為了處理表單,shadcn/ui提供了一個基于React Hook Form無頭表單庫的Form組件。這個組件負責(zé)管理表單的狀態(tài),而shadcn/ui則通過組合的方式,利用React Hook Form提供的基元進行了進一步的封裝。EhU28資訊網(wǎng)——每日最新資訊28at.com

對于表格視圖的處理,shadcn/ui 選擇了 Tanstack React Table 這個無頭表格庫。它的TableDataTable組件都是基于這個庫構(gòu)建的。Tanstack React Table 提供了豐富的 API,用于處理表格視圖的各種交互,如過濾、排序和虛擬化。EhU28資訊網(wǎng)——每日最新資訊28at.com

另外,對于一些復(fù)雜的日期選擇組件,如日歷視圖、DateTime選擇器和DateRange選擇器,shadcn/ui 選擇了 React Day Picker 這個庫作為基礎(chǔ)組件,以實現(xiàn)這些組件的無頭層。這些組件往往難以正確實現(xiàn),但通過使用 React Day Picker, shadcn/ui 確保了它們的正確性和易用性。EhU28資訊網(wǎng)——每日最新資訊28at.com

樣式層

TailwindCSS 是 shadcn/ui 樣式層的核心。顏色、邊框半徑等屬性值作為CSS變量存放在global.css文件中,以便于全局管理。這些變量可以跨設(shè)計系統(tǒng)共享,使用 Figma 等設(shè)計工具時,可以追蹤并同步Figma的變量。EhU28資訊網(wǎng)——每日最新資訊28at.com

為了區(qū)分組件的樣式,shadcn/ui引入了Class Variance Authority(CVA)。CVA提供了一個強大的API,允許我們?yōu)槊總€組件定制其樣式。EhU28資訊網(wǎng)——每日最新資訊28at.com

shadcn/ui Badge

在探討了 shadcn/ui 的架構(gòu)后,下面來深入了解一些組件的具體實現(xiàn),先從最簡單的組件開始。EhU28資訊網(wǎng)——每日最新資訊28at.com

import * as React from "react";import { cva, type VariantProps } from "class-variance-authority";import { cn } from "@/lib/utils";const badgeVariants = cva(  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",  {    variants: {      variant: {        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",        outline: "text-foreground",      },    },    defaultVariants: {      variant: "default",    },  });export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}function Badge({ className, variant, ...props }: BadgeProps) {  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;}export { Badge, badgeVariants };

組件的實現(xiàn)始于對 class-variance-authority 中的 cva 函數(shù)的調(diào)用,它被用于聲明組件的不同變體。EhU28資訊網(wǎng)——每日最新資訊28at.com

const badgeVariants = cva(  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",  {    variants: {      variant: {        default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",        secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",        destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",        outline: "text-foreground",      },    },    defaultVariants: {      variant: "default",    },  });

cva函數(shù)的第一個參數(shù)為<Badge/>組件的所有變體定義了基本樣式。作為第二個參數(shù),cva接收一個配置對象,該對象規(guī)定了組件的可能變體以及應(yīng)使用的默認變體。需要注意的是,實用樣式采用了tailwind.config.js中定義的設(shè)計系統(tǒng)標記,這使得只需調(diào)整 CSS 變量,就能輕松更新整體的外觀。EhU28資訊網(wǎng)——每日最新資訊28at.com

調(diào)用cva函數(shù)后會返回另一個函數(shù),該函數(shù)可根據(jù)條件為各個變體應(yīng)用相應(yīng)的樣式。將其存儲在名為badgeVariants的變量中,以便在向組件傳遞變體名稱作為屬性時,能夠利用它應(yīng)用正確的樣式。EhU28資訊網(wǎng)——每日最新資訊28at.com

接下來,我們可以找到定義組件類型的BadgeProps接口:EhU28資訊網(wǎng)——每日最新資訊28at.com

export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {}

Badge 組件基于HTML的div元素。為了方便使用,該組件被設(shè)計為div元素的擴展。這一目標通過擴展React.HTMLAttributes<HTMLDivElement>類型來實現(xiàn)。此外,為了滿足不同需求,組件添加了一個variant屬性,允許使用者選擇并呈現(xiàn)所需的組件變體。VariantProps這一輔助類型以枚舉的形式在variant屬性上呈現(xiàn)可用的變體,進一步增強了組件的靈活性和易用性。EhU28資訊網(wǎng)——每日最新資訊28at.com

function Badge({ className, variant, ...props }: BadgeProps) {  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;}

最終,我們得到了定義 Badge 的函數(shù)組件。在此組件中,除了 className 和 variant 之外的所有 props 都被收集到一個對象中,并通過擴展語法傳遞給底層的 div 元素。這使得組件使用者能夠與 div 元素上可用的所有 props 進行交互。EhU28資訊網(wǎng)——每日最新資訊28at.com

值得注意的是,組件中處理樣式應(yīng)用的方式。variant 的值被傳遞到 badgeVariants 函數(shù)中,該函數(shù)返回一個包含渲染組件變體所需的所有實用程序類名的 class 字符串。此外,還有一個名為 cn 的函數(shù),它將前述函數(shù)的返回值和傳遞到 className 中的值合并,然后計算為 div 元素的 className 屬性。EhU28資訊網(wǎng)——每日最新資訊28at.com

cn 函數(shù)是 shadcn/ui 提供的一個特殊實用函數(shù),用于管理實用程序類。接下來,我們將深入探討它的實現(xiàn)。EhU28資訊網(wǎng)——每日最新資訊28at.com

import { type ClassValue, clsx } from "clsx";import { twMerge } from "tailwind-merge";function cn(...inputs: ClassValue[]) {  return twMerge(clsx(inputs));}

這個實用函數(shù)是兩個庫的結(jié)合體,用于管理實用程序類。第一個庫是 clsx。它提供了通過 className 連接來有條件地應(yīng)用樣式到組件的能力。EhU28資訊網(wǎng)——每日最新資訊28at.com

import React from "react";const Link = ({ isActive, children }: { isActive: boolean, children: React.ReactNode }) => {  return <a className={clsx("text-lg", { "text-blue-500": isActive })}>{children}</a>;};

從上述代碼中可以看到 clsx 獨立使用的情形。在默認情況下,只有 text-lg 實用類被應(yīng)用于 Link 組件。但當(dāng)將 isActive 屬性傳遞給組件并設(shè)置為 true 時,text-blue-500 實用類也會被應(yīng)用于該組件。EhU28資訊網(wǎng)——每日最新資訊28at.com

然而,在某些情況下,僅使用 clsx 無法實現(xiàn)我們的目標。EhU28資訊網(wǎng)——每日最新資訊28at.com

import React from "react";import clsx from "clsx";const Link = ({ isActive, children }: { isActive: boolean, children: React.ReactNode }) => {  return <a className={clsx("text-lg text-grey-800", { "text-blue-500": isActive })}> {children}</a>;};

在此情況下,元素默認應(yīng)用了顏色實用類 text-grey-800。我們的目標是在 isActive 變?yōu)?nbsp;true 時將文本顏色更改為 blue-500。但由于 CSS 的層疊性質(zhì),Tailwind 中的 text-grey-800 應(yīng)用的顏色樣式無法被修改。EhU28資訊網(wǎng)——每日最新資訊28at.com

此時就需要使用 tailwind-merge庫。使用 tailwind-merge 修改上述代碼:EhU28資訊網(wǎng)——每日最新資訊28at.com

import React from "react";import { twMerge } from "tailwind-merge";import clsx from "clsx";const Link = ({ isActive, children }: { isActive: boolean, children: React.ReactNode }) => {  return <a className={twMerge(clsx("text-lg text-grey-800", { "text-blue-500": isActive }))}>{children}</a>;};

clsx的輸出現(xiàn)在將通過tailwind-merge進行處理。tailwind-merge將解析類字符串并進行淺層樣式定義合并。這意味著text-grey-800被替換為text-blue-500,從而確保元素能體現(xiàn)出新的條件樣式應(yīng)用。EhU28資訊網(wǎng)——每日最新資訊28at.com

這種方法有助于確保在實現(xiàn)變體時不會發(fā)生任何樣式?jīng)_突。由于className屬性也經(jīng)過了cn工具的處理,如果需要,可以輕松覆蓋任何樣式。但這也存在一個權(quán)衡之處。使用cn開啟了組件使用者臨時覆蓋樣式的可能性。這將使一定程度的責(zé)任轉(zhuǎn)移到代碼審查步驟上,以驗證cn沒有被濫用。另一方面,如果根本不需要啟用這種行為,可以修改組件僅使用clsx。EhU28資訊網(wǎng)——每日最新資訊28at.com

在分析Badge組件的實現(xiàn)時,可以發(fā)現(xiàn)一些與 SOLID 原則相關(guān)的模式:EhU28資訊網(wǎng)——每日最新資訊28at.com

  • 單一職責(zé)原則: Badge 組件專注于一個職責(zé),即根據(jù)提供的變體渲染不同樣式的徽章,并將樣式管理委托給了 badgeVariants 對象。
  • 開放/封閉原則: 代碼符合開放/封閉原則,允許添加新的變體而無需修改現(xiàn)有代碼。可以輕松地將新的變體添加到 badgeVariants 定義中的變體對象中。但需要注意的是,由于 cn 的使用方式,組件使用者可以通過 className 屬性傳遞新的覆蓋樣式。這可能會使組件對修改開放。因此,在構(gòu)建自己的組件庫時,需要決定是否應(yīng)允許這種行為。
  • 依賴倒置原則: Badge 組件及其樣式是分別定義的。Badge 組件依賴于 badgeVariants 對象獲取樣式信息。這種分離提供了靈活性和更容易的維護,符合依賴倒置原則。
  • 一致性和可重用性: 代碼通過使用實用函數(shù) cva 來根據(jù)變體管理和應(yīng)用樣式來促進一致性。這種一致性可以使開發(fā)人員更容易理解和使用組件。此外,Badge 組件是可重用的,可以輕松地集成到應(yīng)用的不同部分中。
  • 關(guān)注點分離: 樣式和渲染的關(guān)注點被分開。badgeVariants 對象處理樣式邏輯,而 Badge 組件負責(zé)渲染和應(yīng)用樣式。

在分析了 Badge 組件的實現(xiàn)之后,我們對 shadcn/ui 的一般架構(gòu)有了更詳細的了解。但這是一個純顯示級別的組件。下面來看看其他一些交互式組件。EhU28資訊網(wǎng)——每日最新資訊28at.com

shadcn/ui Switch

下面是 Switch 組件的具體實現(xiàn):EhU28資訊網(wǎng)——每日最新資訊28at.com

import * as React from "react"import * as SwitchPrimitives from "@radix-ui/react-switch"import { cn } from "@/lib/utils"const Switch = React.forwardRef<  React.ElementRef<typeof SwitchPrimitives.Root>,  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>>(({ className, ...props }, ref) => (  <SwitchPrimitives.Root    className={cn(      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",      className    )}    {...props}    ref={ref}  >    <SwitchPrimitives.Thumb      className={cn(        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"      )}    />  </SwitchPrimitives.Root>))Switch.displayName = SwitchPrimitives.Root.displayNameexport { Switch }

Switch 組件是用于在兩個選項之間進行選擇的交互式組件,與僅用于顯示的 Badge 組件不同。Switch 組件能夠響應(yīng)用戶的操作并切換其狀態(tài),為用戶提供即時的反饋。EhU28資訊網(wǎng)——每日最新資訊28at.com

用戶與開關(guān)的交互主要通過點擊實現(xiàn)。構(gòu)建一個能夠響應(yīng)指針事件的開關(guān)相對簡單,但要使其也能響應(yīng)鍵盤輸入和屏幕閱讀器,實現(xiàn)起來就更為復(fù)雜。以下是開關(guān)組件的一些預(yù)期行為:EhU28資訊網(wǎng)——每日最新資訊28at.com

  • 當(dāng)用戶使用 Tab 鍵在界面上移動時,Switch 應(yīng)該能接收焦點。
  • 一旦獲得焦點,用戶按下 Enter 鍵將觸發(fā)開關(guān)狀態(tài)的切換。
  • 在使用屏幕閱讀器的情況下,Switch 應(yīng)能向用戶清晰地傳達其當(dāng)前狀態(tài)。

在代碼中,可以看到開關(guān)的實際結(jié)構(gòu)是通過使用 <SwitchPrimitives.Root/> 和 <SwitchPrimitives.Thumb/> 復(fù)合組件構(gòu)建而成。這些組件來自 RadixUI 無頭庫,包含了開關(guān)的預(yù)期行為的所有實現(xiàn)。通過 React.forwardRef 進行構(gòu)建,使得組件能夠與傳入的 ref 綁定,這在需要跟蹤焦點狀態(tài)并與外部庫集成時非常有用。EhU28資訊網(wǎng)——每日最新資訊28at.com

值得注意的是,RadixUI 組件沒有提供任何樣式。因此,經(jīng)過 cn 實用函數(shù)處理后,樣式直接應(yīng)用于該組件的 className 屬性上。如有需要,還可以使用 cva 為組件創(chuàng)建變體。這種靈活的樣式管理方式使得開發(fā)者能夠根據(jù)項目需求進行定制化設(shè)計,提高用戶體驗。EhU28資訊網(wǎng)——每日最新資訊28at.com

小結(jié)

這里我們討論了 shadcn/ui 的一般架構(gòu),這種實現(xiàn)方式同樣應(yīng)用在 shadcn/ui 的其它組件中。不過,某些組件的行為和實現(xiàn)會稍微復(fù)雜一些,比如:EhU28資訊網(wǎng)——每日最新資訊28at.com

  • Calendar
  • 使用 react-day-picker 作為無頭組件。
  • 使用 date-fns 作為日期時間格式化庫。
  • Table 和 DataTable
  • 使用 @tanstack/react-table 作為無頭表格庫。
  • Form
  • 使用 react-hook-form 作為表單和表單狀態(tài)管理庫的無頭組件。
  • shadcn/ui 提供了封裝表單邏輯的實用組件,可用于組裝表單的各個部分,包括輸入和錯誤消息。
  • 表單的模式驗證庫使用 zod。zod 返回的驗證錯誤被傳遞到 <FormMessage/> 組件,在表單輸入旁邊顯示錯誤信息。

shadcn/ui 在前端開發(fā)領(lǐng)域中引入了一種創(chuàng)新的范例。它倡導(dǎo)一種新的思維方式,即開發(fā)者可以擁有組件的實現(xiàn)權(quán),而不僅僅是依賴于抽象化的第三方包。通過這種方式,開發(fā)者能夠僅暴露所需的元素,從而更好地控制組件的行為和外觀。EhU28資訊網(wǎng)——每日最新資訊28at.com

在應(yīng)用設(shè)計系統(tǒng)時,shadcn/ui 鼓勵開發(fā)者跳出預(yù)先構(gòu)建的組件庫所限制的固定 API 表面。相反,它鼓勵開發(fā)者構(gòu)建自己的設(shè)計系統(tǒng),并提供足夠良好的默認設(shè)置,以便開發(fā)者可以根據(jù)自己的需求進行自定義。這種靈活性使得開發(fā)者能夠更好地適應(yīng)不同的項目需求,并在設(shè)計過程中擁有更大的自由度。EhU28資訊網(wǎng)——每日最新資訊28at.com

總結(jié)

Shadcn UI 為開發(fā)者提供了一種全新的體驗,與現(xiàn)有的組件庫相比,它如一陣清風(fēng)般令人耳目一新。它不僅加快了開發(fā)速度,還為開發(fā)者提供了對組件的精細控制,使他們能夠創(chuàng)造出獨特且富有創(chuàng)意的用戶界面。EhU28資訊網(wǎng)——每日最新資訊28at.com

當(dāng)然,沒有任何庫能滿足所有需求,但基于當(dāng)前的行業(yè)趨勢,Shadcn UI 無疑已成為前端生態(tài)系統(tǒng)中的佼佼者。許多大型公司,如 Vercel,已經(jīng)采納了這一解決方案。例如,Vercel 的 v0 應(yīng)用利用 Shadcn UI、Tailwind CSS 等來生成 UI 代碼,這些代碼可供開發(fā)人員直接復(fù)制并粘貼到其項目中。EhU28資訊網(wǎng)——每日最新資訊28at.com

盡管 Shadcn UI 仍是一個相對較新的工具,但隨著時間的推移,期待看到其功能和組件的進一步豐富和完善。你是否會考慮在未來的項目中采用 Shadcn UI 呢?EhU28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接:http://www.www897cc.com/showinfo-26-59677-0.html2023年最火前端項目憑什么是它?

聲明:本網(wǎng)頁內(nèi)容旨在傳播知識,若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系,我們將在第一時間刪除處理。郵件:2376512515@qq.com

上一篇: Rust 拖慢開發(fā)速度,剛來實習(xí)生被折磨哭了

下一篇: 初步利用Ansible實現(xiàn)批量服務(wù)器自動化管理

標簽:
  • 熱門焦點
Top 主站蜘蛛池模板: 鹤壁市| 威远县| 西安市| 都江堰市| 进贤县| 孝昌县| 阳新县| 嘉祥县| 卢湾区| 突泉县| 安岳县| 永新县| 呼图壁县| 龙口市| 屏东市| 大安市| 略阳县| 互助| 平湖市| 河源市| 郎溪县| 荆州市| 于都县| 诏安县| 济南市| 宝清县| 青州市| 徐水县| 通道| 平阴县| 开原市| 肇东市| 六枝特区| 衡阳市| 太仆寺旗| 定边县| 兰西县| 汉川市| 阿坝县| 邯郸县| 京山县|