DaisyUI Dropdown 組件完整指南三種實(shí)現(xiàn)方式、定位系統(tǒng)與修飾符詳解【免費(fèi)下載鏈接】daisyui The most popular, free and open-source Tailwind CSS component library項(xiàng)目地址: https://gitcode.com/GitHub_Trending/da/daisyui本文圍繞 DaisyUI 的 Dropdown下拉菜單組件展開(kāi)系統(tǒng)講解官方文檔提供的三種實(shí)現(xiàn)方式details/summary原生元素、Popover API 與錨點(diǎn)定位、CSS 焦點(diǎn)并逐一剖析 placement 定位類(lèi)、dropdown-hover/dropdown-open/dropdown-close修飾符及它們?cè)趯?dǎo)航欄、卡片等真實(shí)場(chǎng)景中的用法。讀完本文你將掌握 Dropdown 的全部類(lèi)名體系與源碼級(jí)定位原理能夠根據(jù)瀏覽器兼容性與交互需求選擇合適的實(shí)現(xiàn)方案。Dropdown 組件概覽與類(lèi)名體系Dropdown 的作用是點(diǎn)擊按鈕時(shí)打開(kāi)一個(gè)菜單或任意其他元素。DaisyUI 官方為它定義了完整的類(lèi)名體系見(jiàn) dropdown 文檔/components/dropdown/page.md) 的 frontmatter可分為四類(lèi)類(lèi)型類(lèi)名說(shuō)明component組件容器dropdownDropdown 容器必須加在最外層part部件dropdown-content內(nèi)容部件即被展開(kāi)/收起的浮層placement定位dropdown-start水平方向上與按鈕起始端對(duì)齊默認(rèn)placement定位dropdown-center水平方向上與按鈕居中對(duì)齊placement定位dropdown-end水平方向上與按鈕末端對(duì)齊placement定位dropdown-top從按鈕上方展開(kāi)placement定位dropdown-bottom從按鈕下方展開(kāi)默認(rèn)placement定位dropdown-left從按鈕左側(cè)展開(kāi)placement定位dropdown-right從按鈕右側(cè)展開(kāi)modifier修飾符dropdown-hover懸停時(shí)也展開(kāi)modifier修飾符dropdown-open強(qiáng)制展開(kāi)modifier修飾符dropdown-close強(qiáng)制收起從默認(rèn)值可以看出不寫(xiě)任何 placement 類(lèi)時(shí)浮層默認(rèn)從按鈕下方、水平起始端展開(kāi)dropdown-bottom與dropdown-start均為默認(rèn)。組件規(guī)則同時(shí)約定修飾符可選且一個(gè)修飾符 一個(gè)定位類(lèi)組合使用即可見(jiàn) skills/daisyui/components/dropdown.md浮層內(nèi)容不限于ul可以是任意 HTML 元素例如卡片card。在官方文檔的代碼示例中你會(huì)看到$$dropdown這樣的寫(xiě)法——$$是文檔站點(diǎn)用于替換用戶自定義前綴的占位符由 actions.svelte.js 中的prefixClassNames在渲染時(shí)替換為實(shí)際前綴值當(dāng)未配置前綴時(shí)$$dropdown等價(jià)于dropdown。下文代碼為便于直接復(fù)制統(tǒng)一寫(xiě)作dropdown。方法一details 與 summary原生 HTML 方案details與summary是 HTML 原生元素天然具備點(diǎn)擊展開(kāi)/收起的能力因此是實(shí)現(xiàn) Dropdown 最樸素、零 JavaScript 依賴的方式。結(jié)構(gòu)示意details ← 按鈕 內(nèi)容的容器 summaryopen or close/summary ← 點(diǎn)擊即可切換內(nèi)容可見(jiàn)性的按鈕 Content ← 浮層內(nèi)容 /details完整示例details classdropdown summary classbtn m-1open or close/summary ul classmenu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm liaItem 1/a/li liaItem 2/a/li /ul /details其中summary使用btn類(lèi)獲得按鈕樣式浮層內(nèi)容加上dropdown-content、menu、bg-base-100、rounded-box、shadow-sm等類(lèi)即可呈現(xiàn)標(biāo)準(zhǔn)菜單樣式。w-52控制浮層寬度z-1控制層級(jí)。行為與源碼細(xì)節(jié)點(diǎn)擊summary時(shí)details的open屬性會(huì)被自動(dòng)切換通過(guò) JS 添加/移除open屬性同樣可以控制開(kāi)關(guān)適合需要程序化控制的場(chǎng)景。從 dropdown.css 的源碼可以看到容器為details時(shí)組件做了兩件特殊處理一是overflow: revert-layer撤銷(xiāo)menu對(duì)浮層overflow: hidden的影響避免浮層被裁剪二是隱藏summary默認(rèn)的::-webkit-details-markerWebKit 系瀏覽器中details默認(rèn)的三角指示器保證視覺(jué)干凈。該方式不依賴任何新 API兼容性最好但打開(kāi)/關(guān)閉僅由點(diǎn)擊觸發(fā)不支持懸停展開(kāi)如需懸停可配合dropdown-hover修飾符見(jiàn)下文。方法二Popover API 與錨點(diǎn)定位新標(biāo)準(zhǔn)方案Popover API 是 HTML 的新標(biāo)準(zhǔn)用于創(chuàng)建頂層top layer浮層錨點(diǎn)定位Anchor Positioning則是 CSS 新標(biāo)準(zhǔn)用于將元素相對(duì)某個(gè)錨點(diǎn)進(jìn)行定位。兩者組合是文檔中標(biāo)注為new的推薦新方案。核心收益浮層渲染在頂層top layer天然位于頁(yè)面最上層無(wú)需管理 z-index也沒(méi)有被父容器overflow裁剪的問(wèn)題通過(guò)anchor-name/position-anchor兩個(gè)屬性建立錨點(diǎn)關(guān)系定位由瀏覽器原生完成不再依賴絕對(duì)定位的手工偏移。結(jié)構(gòu)示意button styleanchor-name:--anchor-1 ──────────╮ 把這個(gè)按鈕聲明為錨點(diǎn) popovertargetpopover-1 ───╮ │ Button/button │ 指向浮層的唯一 ID │ │ div popover │ │ 聲明本浮層相對(duì)于該錨點(diǎn)定位 idpopover-1 ──────────────╯ │ styleposition-anchor:--anchor-1 ──────╯ Content/div關(guān)鍵點(diǎn)文檔原文提示popovertarget的值必須是 popover 內(nèi)容的唯一 IDanchor-name與position-anchor必須使用同一個(gè)唯一的錨點(diǎn)名稱如--anchor-1每個(gè) Dropdown 都要使用不同的名稱不要與其他元素重復(fù)。HTML 示例!-- 將 popover-1 和 --anchor-1 替換為每個(gè)下拉獨(dú)有的名稱 -- button classbtn popovertargetpopover-1 styleanchor-name:--anchor-1 Button /button ul classdropdown menu w-52 rounded-box bg-base-100 shadow-sm popover idpopover-1 styleposition-anchor:--anchor-1 liaItem 1/a/li liaItem 2/a/li /ul注意Popover 方案中浮層直接使用dropdown容器類(lèi)而不再使用dropdown-content部件類(lèi)這是 skills/daisyui/components/dropdown.md 中明確的使用規(guī)則。React / TSX 寫(xiě)法{/* 將 popover-1 和 --anchor-1 替換為每個(gè)下拉獨(dú)有的名稱 */} {/* 使用 TSX 時(shí)取消注釋下面的類(lèi)型標(biāo)注 */} button classNamebtn popoverTargetpopover-1 style{{ anchorName: --anchor-1 } /* as React.CSSProperties */} Button /button ul classNamedropdown menu w-52 rounded-box bg-base-100 shadow-sm popoverauto idpopover-1 style{{ positionAnchor: --anchor-1 } /* as React.CSSProperties */ } liaItem 1/a/li liaItem 2/a/li /ulReact 中對(duì)應(yīng)屬性為駝峰命名popovertarget→popoverTargetanchor-name→anchorNameposition-anchor→positionAnchorpopover 顯式寫(xiě)作popoverauto。TSX 下若類(lèi)型報(bào)錯(cuò)可將內(nèi)聯(lián)樣式對(duì)象斷言為React.CSSProperties如注釋所示。源碼中的 Popover 支持dropdown.css 為 popover 方案做了完整的降級(jí)與樣式處理[popover]被聲明為fixed且text-inherit背景透明background: #0000使浮層與普通內(nèi)容無(wú)縫銜接主流支持position-area的瀏覽器直接使用該屬性定位對(duì)于不支持position-area的瀏覽器通過(guò)supports not (position-area: bottom)分支回退到m-auto居中定位并借助::backdrop加上一層 30% 黑色遮罩color-mix(in oklab, #000 30%, #0000)避免背景穿透未打開(kāi)時(shí).dropdown-close或:not(:popover-open)浮層被hidden、opacity-0并縮放到 95%配合starting-style實(shí)現(xiàn)平滑的入場(chǎng)動(dòng)畫(huà)。方法三CSS 焦點(diǎn)focus方案第三種方式純靠 CSS 的:focus-within/:focus狀態(tài)當(dāng)按鈕獲得焦點(diǎn)時(shí)顯示浮層內(nèi)容。結(jié)構(gòu)示意div ← Dropdown 容器 div tabindex0 rolebutton ← 可獲得焦點(diǎn)的按鈕 Click to open /div div tabindex-1Content/div ← 按鈕獲得焦點(diǎn)時(shí)顯示的內(nèi)容 /div完整示例div classdropdown div tabindex0 rolebutton classbtn m-1Click/div ul tabindex-1 classmenu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm liaItem 1/a/li liaItem 2/a/li /ul /div為什么用 div 而不是 button文檔特別說(shuō)明Safari 存在一個(gè)可追溯到 2008 年的 CSS 缺陷WebKit bug導(dǎo)致button元素?zé)o法被聚焦因此組件使用div tabindex0作為替代方案同時(shí)加上rolebutton保持無(wú)障礙語(yǔ)義使其在各瀏覽器中行為一致。浮層內(nèi)容則使用tabindex-1使其可被聚焦從而維持:focus-within狀態(tài)但不會(huì)進(jìn)入 Tab 鍵順序。使用注意事項(xiàng)該方案在焦點(diǎn)丟失時(shí)自動(dòng)關(guān)閉浮層因此不要在浮層內(nèi)放置會(huì)奪走焦點(diǎn)的元素——文檔明確警告不要在里面放dialog之類(lèi)的元素否則浮層會(huì)意外關(guān)閉。若需要在點(diǎn)擊菜單項(xiàng)后關(guān)閉浮層可借助onclickdocument.activeElement.blur()主動(dòng)讓按鈕失焦從而觸發(fā)關(guān)閉。這一行為的底層邏輯在 dropdown.css 中清晰可見(jiàn)當(dāng)容器不是details、dropdown-open、dropdown-hover:hover或:focus-within時(shí).dropdown-content一律hidden、opacity-0且scale: 95%而打開(kāi)狀態(tài)下:focus或:focus-within則恢復(fù)opacity-100與 100% 縮放。此外浮層打開(kāi)時(shí)容器內(nèi)第一個(gè)[tabindex]元素會(huì)被加上pointer-events-none防止用戶再次點(diǎn)擊按鈕導(dǎo)致反復(fù)開(kāi)關(guān)。定位系統(tǒng)placement 類(lèi)詳解DaisyUI 的 Dropdown 支持八個(gè)方向的 placement 類(lèi)且水平對(duì)齊與垂直展開(kāi)方向可以自由組合。浮層內(nèi)部結(jié)構(gòu)在所有組合中保持一致變化的只是最外層容器的類(lèi)名。以下組合均已由官方文檔逐一驗(yàn)證組合場(chǎng)景容器類(lèi)名說(shuō)明水平起始對(duì)齊默認(rèn)dropdown dropdown-start浮層左邊與按鈕左邊對(duì)齊向下展開(kāi)水平末端對(duì)齊dropdown dropdown-end浮層右邊與按鈕右邊對(duì)齊向下展開(kāi)水平居中對(duì)齊dropdown dropdown-center浮層中心與按鈕中心對(duì)齊向下展開(kāi)頂部展開(kāi)默認(rèn)水平dropdown dropdown-top從按鈕上方展開(kāi)向左對(duì)齊頂部 水平居中dropdown dropdown-top dropdown-center從上方展開(kāi)且水平居中頂部 水平末端dropdown dropdown-top dropdown-end從上方展開(kāi)且右對(duì)齊底部展開(kāi)默認(rèn)dropdown dropdown-bottom默認(rèn)方向從下方展開(kāi)底部 水平居中dropdown dropdown-bottom dropdown-center從下方展開(kāi)且水平居中底部 水平末端dropdown dropdown-bottom dropdown-end從下方展開(kāi)且右對(duì)齊左側(cè)展開(kāi)dropdown dropdown-left從按鈕左側(cè)展開(kāi)垂直頂部對(duì)齊左側(cè) 垂直居中dropdown dropdown-left dropdown-center從左側(cè)展開(kāi)且垂直居中左側(cè) 垂直末端dropdown dropdown-left dropdown-end從左側(cè)展開(kāi)且垂直底部對(duì)齊右側(cè)展開(kāi)dropdown dropdown-right從按鈕右側(cè)展開(kāi)垂直頂部對(duì)齊右側(cè) 垂直末端dropdown dropdown-right dropdown-end從右側(cè)展開(kāi)且垂直底部對(duì)齊右側(cè) 垂直居中dropdown dropdown-right dropdown-center從右側(cè)展開(kāi)且垂直居中以dropdown-start為例其完整標(biāo)記如下其余組合僅替換容器類(lèi)名內(nèi)容結(jié)構(gòu)相同div classdropdown dropdown-start div tabindex0 rolebutton classbtn m-1Click ??/div ul tabindex-1 classmenu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm liaItem 1/a/li liaItem 2/a/li /ul /div定位的源碼實(shí)現(xiàn)dropdown.css 中的定位系統(tǒng)非常精巧全部建立在兩個(gè)自定義屬性之上--anchor-v垂直方向的錨點(diǎn)位置bottom/top/center/span-bottom/span-top--anchor-h水平方向的錨點(diǎn)位置span-right/span-left/center/left/right。容器.dropdown默認(rèn)聲明position-area: var(--anchor-v, bottom) var(--anchor-h, span-right)即從底部、水平起始端展開(kāi)。每個(gè) placement 類(lèi)本質(zhì)上是覆寫(xiě)這兩個(gè)變量.dropdown-start設(shè)置--anchor-h: span-right起始端對(duì)齊浮層end-auto且無(wú)位移.dropdown-center設(shè)置--anchor-h: center浮層end-1/2并translate: 50% 0實(shí)現(xiàn)居中.dropdown-end設(shè)置--anchor-h: span-left浮層end-0右對(duì)齊.dropdown-left/.dropdown-right設(shè)置水平錨點(diǎn)為left/right浮層分別end-full/start-full并調(diào)整top-0 bottom-auto與origin-right/origin-left.dropdown-bottom/.dropdown-top設(shè)置--anchor-v為bottom/top浮層分別top-full/bottom-full展開(kāi)。同時(shí)源碼中還包含 RTL從右到左適配例如.dropdown-center在[dirrtl]下位移方向反轉(zhuǎn)translate: -50% 0.dropdown-start/.dropdown-end的位移在 RTL 下保持不變確保阿拉伯語(yǔ)、希伯來(lái)語(yǔ)等場(chǎng)景下定位依然正確。組合類(lèi)如dropdown-left dropdown-center則通過(guò)嵌套選擇器進(jìn)一步覆寫(xiě)--anchor-v: center與top-auto bottom-1/2實(shí)現(xiàn)垂直居中。修飾符hover、強(qiáng)制開(kāi)與強(qiáng)制關(guān)修飾符類(lèi)用于覆蓋默認(rèn)的交互狀態(tài)全部作用于.dropdown容器dropdown-hover懸停展開(kāi)div classdropdown dropdown-hover div tabindex0 rolebutton classbtn m-1Hover/div ul tabindex-1 classmenu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm liaItem 1/a/li liaItem 2/a/li /ul /div從源碼看.dropdown-hover:hover會(huì)讓.dropdown-content恢復(fù)opacity-100與 100% 縮放dropdown.css而.dropdown-hover:not(:hover)時(shí)若首個(gè)[tabindex]元素獲得的是非可見(jiàn)焦點(diǎn):focus:not(:focus-visible)例如鼠標(biāo)點(diǎn)擊產(chǎn)生的焦點(diǎn)浮層也會(huì)保持隱藏——這是為兼容鍵盤(pán)與鼠標(biāo)混合操作而做的細(xì)節(jié)處理。dropdown-open強(qiáng)制展開(kāi)div classdropdown dropdown-open div tabindex0 rolebutton classbtn m-1Button/div ul tabindex-1 classmenu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm liaItem 1/a/li liaItem 2/a/li /ul /divdropdown-open無(wú)條件顯示浮層常用于默認(rèn)展開(kāi)的展示場(chǎng)景如文檔示例、營(yíng)銷(xiāo)頁(yè)引導(dǎo)。dropdown-close強(qiáng)制收起div classdropdown dropdown-close div tabindex0 rolebutton classbtn m-1Button/div ul tabindex-1 classmenu dropdown-content bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm liaItem 1/a/li liaItem 2/a/li /ul /divdropdown-close與dropdown-open相反無(wú)條件隱藏浮層。源碼中它的優(yōu)先級(jí)最高只要容器帶dropdown-close無(wú)論是否聚焦、懸停.dropdown-content一律hidden opacity-0 scale-95dropdown.css。打開(kāi)/隱藏的完整判定邏輯綜合 dropdown.css浮層可見(jiàn)性的核心規(guī)則可歸納為隱藏條件容器為dropdown-close或容器既不是details也不帶dropdown-open未懸停且容器內(nèi)無(wú)焦點(diǎn):not(:focus-within)。顯示條件非dropdown-close時(shí)容器帶dropdown-open或容器獲得焦點(diǎn) / 內(nèi)部有焦點(diǎn):focus、:focus-within或容器為dropdown-hover且處于懸停狀態(tài)。打開(kāi)時(shí)浮層opacity-100 scale-100%并給首個(gè)焦點(diǎn)元素加pointer-events-none防止誤觸。動(dòng)畫(huà)與動(dòng)效細(xì)節(jié)所有浮層的顯隱動(dòng)畫(huà)統(tǒng)一由組件源碼定義dropdown.css浮層z-index: 999保證覆蓋絕大多數(shù)內(nèi)容在用戶未開(kāi)啟減少動(dòng)態(tài)效果prefers-reduced-motion: no-preference時(shí)浮層播放dropdown關(guān)鍵幀動(dòng)畫(huà)0.2s內(nèi)容由透明漸變到不透明并對(duì)opacity, scale, display, overlay四個(gè)屬性做過(guò)渡且聲明transition-behavior: allow-discrete以支持離散屬性的平滑切換配合starting-style浮層在入場(chǎng)前處于scale: 95%且opacity: 0的初始狀態(tài)實(shí)現(xiàn)縮小放大 淡入的絲滑展開(kāi)效果keyframes dropdown只做一件事將opacity從 0 開(kāi)始作為入場(chǎng)動(dòng)畫(huà)的基準(zhǔn)。對(duì)無(wú)障礙敏感的用戶系統(tǒng)級(jí)減少動(dòng)態(tài)效果設(shè)置會(huì)自動(dòng)關(guān)閉這些過(guò)渡動(dòng)畫(huà)。實(shí)戰(zhàn)擴(kuò)展示例Dropdown 的內(nèi)容部件是通用的官方文檔給出了三個(gè)典型實(shí)戰(zhàn)場(chǎng)景。用卡片card作為浮層內(nèi)容任何元素都可以放進(jìn)dropdown-content——下面的示例把整張card當(dāng)作浮層div classdropdown div tabindex0 rolebutton classbtn m-1Click/div div tabindex0 classcard card-sm dropdown-content bg-base-100 z-1 w-64 shadow-md div classcard-body pThis is a card. You can use any element as a dropdown./p /div /div /div注意這里的浮層內(nèi)容也帶有tabindex0保證點(diǎn)擊卡片區(qū)域時(shí)容器仍處于:focus-within浮層不會(huì)提前關(guān)閉。在導(dǎo)航欄navbar中集成將 Dropdown 放進(jìn) navbar 是后臺(tái)系統(tǒng)最常見(jiàn)的組合配合dropdown-end讓菜單在窄屏下也不超出可視區(qū)域div classnavbar bg-base-200 div classps-4 a classtext-lg font-bolddaisyUI/a /div div classflex grow justify-end px-2 div classflex items-stretch a classbtn btn-ghost rounded-fieldButton/a div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-ghost rounded-fieldDropdown/div ul tabindex-1 classmenu dropdown-content bg-base-200 rounded-box z-1 mt-4 w-52 p-2 shadow-sm liaItem 1/a/li liaItem 2/a/li /ul /div /div /div /divmt-4讓浮層與導(dǎo)航欄之間留出間距菜單使用bg-base-200與導(dǎo)航欄同色視覺(jué)一體。行內(nèi)輔助說(shuō)明Helper下拉在正文旁放置一個(gè)問(wèn)號(hào)圖標(biāo)按鈕點(diǎn)擊彈出說(shuō)明卡片是文檔站點(diǎn)的常見(jiàn)交互div classdropdown dropdown-end div tabindex0 rolebutton classbtn btn-circle btn-ghost btn-xs text-info svg tabindex0 aria-labelMore info xmlnshttp://www.w3.org/2000/svg fillnone viewBox0 0 24 24 classh-4 w-4 stroke-currentpath stroke-linecapround stroke-linejoinround stroke-width2 dM13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z/path/svg /div div tabindex0 classcard card-sm dropdown-content bg-base-100 rounded-box z-1 w-64 shadow-sm div tabindex0 classcard-body h2 classcard-titleYou needed more info?/h2 pHere is a description!/p /div /div /divbtn-circle btn-ghost btn-xs組合出小巧的圓形幽靈按鈕SVG 圖標(biāo)加aria-labelMore info保證無(wú)障礙可讀dropdown-end確保說(shuō)明卡片右對(duì)齊于圖標(biāo)不溢出頁(yè)面。菜單內(nèi)部結(jié)構(gòu)與默認(rèn)樣式當(dāng)浮層使用menu類(lèi)時(shí)menu.css 還會(huì)對(duì).dropdown-content做增量定制額外加上mt-2 p-2頂部間距與內(nèi)邊距并隱藏子菜單的分隔線偽元素:before設(shè)display: none。菜單項(xiàng)li a自帶rounded-field圓角、懸停高亮bg-base-content/10與激活態(tài)--menu-active-bg/--menu-active-fg樣式因此浮層菜單開(kāi)箱即用無(wú)需額外編寫(xiě)菜單樣式。如何選擇實(shí)現(xiàn)方式三種方式各有適用場(chǎng)景可按以下原則取舍維度details/summaryPopover API 錨點(diǎn)CSS 焦點(diǎn)技術(shù)門(mén)檻最低純?cè)^高需理解新標(biāo)準(zhǔn)低瀏覽器要求全兼容需支持 Popover API 與錨點(diǎn)定位較新瀏覽器全兼容浮層層級(jí)普通文檔流受 z-index/overflow 影響頂層top layer無(wú)裁剪無(wú)層級(jí)問(wèn)題普通文檔流打開(kāi)方式點(diǎn)擊 summary點(diǎn)擊按鈕原生行為獲得焦點(diǎn)關(guān)閉方式再次點(diǎn)擊 / JS 移除open點(diǎn)擊外部、Esc原生行為失去焦點(diǎn)典型場(chǎng)景追求兼容性的通用菜單現(xiàn)代項(xiàng)目、內(nèi)容可能溢出容器的場(chǎng)景簡(jiǎn)單展示型下拉追求最廣兼容性優(yōu)先details/summary它零依賴且語(yǔ)義良好現(xiàn)代瀏覽器項(xiàng)目、浮層內(nèi)容較長(zhǎng)或會(huì)被overflow裁剪優(yōu)先 Popover API 方案省去 z-index 與溢出的心智負(fù)擔(dān)還能利用dropdown-open等修飾符配合 JS 做精細(xì)控制純展示型浮層CSS 焦點(diǎn)方案最簡(jiǎn)單但要注意浮層內(nèi)不放dialog等奪焦元素的約束。相關(guān)資源Dropdown 官方文檔源文件/components/dropdown/page.md)組件全部類(lèi)名、示例與說(shuō)明的第一手來(lái)源dropdown.css 組件源碼定位變量、顯隱判定、動(dòng)畫(huà)與 popover 降級(jí)的完整實(shí)現(xiàn)menu.css 菜單源碼浮層菜單項(xiàng)樣式與.dropdown-content增量定制Dropdown Skill 速查面向 Agent 的精簡(jiǎn)語(yǔ)法與使用規(guī)則actions.svelte.js文檔站$$前綴占位符的替換實(shí)現(xiàn)理解文檔示例代碼的入口【免費(fèi)下載鏈接】daisyui The most popular, free and open-source Tailwind CSS component library項(xiàng)目地址: https://gitcode.com/GitHub_Trending/da/daisyui創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考