Dropdown下拉列表

2022-09-06 19:06:11 字數 2763 閱讀 3486

注意breadcrumb如果是dropdown的上乙份元素或下乙個元素,會影響dropdown下拉列表的出現時方向。

基本屬性:

引數說明

型別預設值

版本disabled

選單是否禁用

boolean

-getpopupcontainer

選單渲染父節點。預設渲染到 body 上,如果你遇到選單滾動定位問題,試試修改為滾動的區域,並相對其定位。示例

function(triggernode)

() => document.body

overlay

選單menu | () => menu

-overlayclassname

下拉根元素的類名稱

string

-3.11.0

overlaystyle

下拉根元素的樣式

object

-3.11.0

placement

選單彈出位置:bottomleftbottomcenterbottomrighttoplefttopcentertopright

string

bottomleft

trigger

觸發下拉的行為, 移動端不支援 hover

array<click|hover|contextmenu>

['hover']

visible

選單是否顯示

boolean

-onvisiblechange

選單顯示狀態改變時呼叫,引數為 visible

function(visible)

-

overlay:下拉的選單項,menu
placement:下拉列表出現的方位:string<bottomleft |bottomcenter |bottomright |topleft |topcenter |topright>

trigger:觸發顯示下拉列表的方式: array<click|hover|contextmenu>

基本使用:

const menu = (

1st menu item

2nd menu item

3rd menu item

) topleft

getpopupcontainer改變【 dropdown的menu 】的父節點(預設是body),選取觸發者(也是dropdown)的父節點 作為 menu的父節點:
getpopupcontainer=}

按鈕型下拉列表:

引數說明

型別預設值

版本disabled

選單是否禁用

boolean

-icon

右側的 icon

reactnode

-3.17.0

overlay

選單menu

-placement

選單彈出位置:bottomleftbottomcenterbottomrighttoplefttopcentertopright

string

bottomleft

size

按鈕大小,和 button 一致

string

'default'

trigger

觸發下拉的行為

array<click|hover|contextmenu>

['hover']

type

按鈕型別,和 button 一致

string

'default'

visible

選單是否顯示

boolean

-onclick

點選左側按鈕的**,和 button 一致

function

-onvisiblechange

選單顯示狀態改變時呼叫,引數為 visible

function

-

}>

dropdown

上下文選單(某區域內右擊顯示選單):

right click on here

e.preventdefault()}>

hover me

選單:選單分割線:/>

基本屬性:

選單型別:verticalhorizontalinline

基本使用:

選單項1

選單項2--子選單項1

選單項2--子選單項2

CSS3製作Dropdown下拉列表的方法

target 是css3 中新增的乙個偽類,用以匹配當前頁面的uri中某個標誌符的目標元素 比如說當前頁面url下新增 comment就會定位到id comment 的位置,俗稱錨 css3 為這個動作賦予了更加多的功能 就如同 hover 一樣你可以做一些樣式定義。先上效果圖 正如標題所說,本文是...

jquery下拉列表

由於需要 用以前發過的摺疊選單原始碼改了一下 做成了下拉列表 感覺還不錯 留著以後使用 首頁主選單.子選單.子選單.子選單.子選單.子選單.子選單.主選單.子選單.子選單.子選單.子選單.子選單.子選單.主選單.子選單.子選單.子選單.子選單.子選單.子選單.主選單.子選單.子選單.子選單.子選單....

Bootstrap下拉列表

使用下拉列表 dropdown 外掛程式,能夠向不論什麼元件 比方導航欄 標籤頁 膠囊式導航選單 button等 加入下拉列表。假設想要單獨引用該外掛程式的功能,那麼須要引用 dropdown.js。或者能夠引入bootstrap.js或壓縮版的bootstrap.min.js。通過 data 屬性...