Bạn đang xem : google material design thả xuống

Tổng quan

Các danh sách thả xuống có thể chuyển đổi, các lớp phủ theo ngữ cảnh để hiển thị danh sách các liên kết và hơn thế nữa. Chúng được tạo tương tác với plugin JavaScript thả xuống Bootstrap đi kèm. Chúng được chuyển đổi bằng cách nhấp, không phải bằng cách di chuột; đây là một quyết định thiết kế có chủ đích.

Trình đơn thả xuống được xây dựng trên thư viện của bên thứ ba, Popper.js , cung cấp khả năng định vị động và phát hiện chế độ xem. Đảm bảo bao gồm popper.min.js trước JavaScript của Bootstrap hoặc sử dụng bootstrap.bundle.min.js / bootstrap.bundle.js chứa Popper.js. Popper.js không được sử dụng để định vị danh sách thả xuống trong thanh điều hướng mặc dù không yêu cầu định vị động.

Nếu bạn đang xây dựng JavaScript của chúng tôi từ nguồn, thì nó yêu cầu use.js .

Khả năng truy cập

Tiêu chuẩn WAI ARIA xác định một tiện ích con role = "menu" thực tế, nhưng điều này dành riêng cho các menu giống như ứng dụng kích hoạt các hành động hoặc chức năng. Menu ARIA chỉ có thể chứa các mục menu, các mục menu hộp kiểm, các mục menu nút radio, nhóm nút radio và menu phụ.

Mặt khác, các trình đơn thả xuống của Bootstrap được thiết kế để chung chung và có thể áp dụng cho nhiều tình huống và cấu trúc đánh dấu khác nhau. Ví dụ: có thể tạo danh sách thả xuống chứa các đầu vào bổ sung và điều khiển biểu mẫu, chẳng hạn như trường tìm kiếm hoặc biểu mẫu đăng nhập. Vì lý do này, Bootstrap không yêu cầu (cũng như không tự động thêm) bất kỳ thuộc tính nào trong số các thuộc tính role aria- cho các menu ARIA thực sự. Các tác giả sẽ phải tự bao gồm các thuộc tính cụ thể hơn này.

Tuy nhiên, Bootstrap bổ sung hỗ trợ tích hợp cho hầu hết các tương tác menu bàn phím tiêu chuẩn, chẳng hạn như khả năng di chuyển qua các phần tử . dropdown-item bằng cách sử dụng các phím con trỏ và đóng menu bằng phím ESC.

Ví dụ

Bao bọc nút chuyển đổi của menu thả xuống (nút hoặc liên kết của bạn) và menu thả xuống trong . dropdown hoặc một phần tử khác khai báo vị trí: tương đối; . Trình đơn thả xuống có thể được kích hoạt từ các phần tử & lt; a & gt; hoặc & lt; button & gt; để phù hợp hơn với nhu cầu tiềm năng của bạn.

Một nút

Mọi . btn đều có thể được chuyển thành một trình đơn thả xuống với một số thay đổi đánh dấu. Đây là cách bạn có thể làm cho chúng hoạt động với các phần tử & lt; button & gt; :

  

& lt; div

class =

"thả xuống"

& gt;

& lt; button

class =

"btn btn-Secondary dropdown-toggle"

type =

"nút"

id =

"dropdownMenuButton"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Nút thả xuống

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenuButton"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

Và với các phần tử & lt; a & gt; :

  

& lt; div

class =

"thả xuống"

& gt;

& lt; a

class =

"btn btn-Secondary dropdown-toggle"

href =

"#"

role =

"nút"

id =

"dropdownMenuLink"

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Liên kết thả xuống

& lt; / a & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenuLink"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

Điều tốt nhất là bạn cũng có thể làm điều này với bất kỳ biến thể nút nào:

  

& lt;! - Ví dụ về nút nguy hiểm duy nhất - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

type =

"button"

class =

" btn btn-risk dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Hoạt động

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

Nút tách

Tương tự, tạo danh sách thả xuống nút tách với hầu như đánh dấu giống như danh sách thả xuống nút đơn, nhưng có thêm . dropdown-toggle-split để có khoảng cách thích hợp xung quanh danh sách thả xuống dấu mũ.

Chúng tôi sử dụng lớp bổ sung này để giảm 25% chiều ngang padding ở hai bên dấu mũ và xóa lề -left được thêm vào cho các nút thả xuống thông thường. Những thay đổi bổ sung đó giữ cho dấu mũ ở giữa trong nút tách và cung cấp vùng nhấn có kích thước phù hợp hơn bên cạnh nút chính.

  

& lt;! - Ví dụ về nút nguy hiểm phân tách - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

type =

"button"

class =

" btn btn-nguy hiểm "

& gt;

Hành động

& lt ; / nút & gt;

& lt; button

type =

"button"

class =

" btn btn-risk dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

" # "

& gt;

Một cái gì đó khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

Định kích thước

Nút thả xuống hoạt động với các nút ở mọi kích thước, bao gồm cả nút thả xuống mặc định và nút chia nhỏ.

  

& lt;! - Nhóm nút lớn (mặc định và tách) - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-lg dropdown-toggle" < / p>

type =

"button"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

" false "

& gt;

Nút lớn

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-lg"

type =

"nút"

& gt;

Nút chia lớn

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split "

data-toggle = < / p>

"dropdown"

aria-haspopup =

"true"

< p class = "na"> aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nhóm nút nhỏ (mặc định và chia nhỏ) - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-sm dropdown-toggle" < / p>

type =

"button"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

" false "

& gt;

Nút nhỏ

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

class =

"btn btn-Secondary btn-sm"

type =

"nút"

& gt;

Nút chia nhỏ

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-sm btn-Secondary dropdown-toggle dropdown-toggle-split "

data-toggle = < / p>

"dropdown"

aria-haspopup =

"true"

< p class = "na"> aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

Chỉ đường

Thả xuống

Kích hoạt menu thả xuống phía trên các phần tử bằng cách thêm . dropup vào phần tử mẹ.

  

& lt;! - Nút thả lên mặc định - & gt;

& lt; div

class =

"btn-group dropup"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Dropup

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nút thả xuống tách - & gt;

& lt; div

class =

"btn-group dropup"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary "

& gt;

Tách sổ lên

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

Chặt chẽ

Kích hoạt menu thả xuống ở bên phải của các phần tử bằng cách thêm . dropright vào phần tử mẹ.

  

& lt;! - Nút thả xuống mặc định - & gt;

& lt; div

class =

"btn-group dropright"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Chiếm đoạt

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nút chia nhỏ giọt - & gt;

& lt; div

class =

"btn-group dropright"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary "

& gt;

Chia nhỏ giọt

& lt; / button & gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi từ Đòi ra

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

Hình giọt nước

Kích hoạt menu thả xuống ở bên trái của các phần tử bằng cách thêm . dropleft vào phần tử mẹ.

  

& lt;! - Nút hình giọt nước mặc định - & gt;

& lt; div

class =

"btn-group dropleft"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Giọt nước

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt;! - Nút tách giọt - & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; div

class =

"btn-group Dropleft"

role =

"nhóm"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle dropdown-toggle-split "

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi Dropleft

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

& gt;

& lt;! - Liên kết menu thả xuống - & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary "

& gt;

Tách giọt

& lt; / button & gt;

& lt; / div & gt;

Nội dung menu thả xuống trước đây phải là liên kết, nhưng điều đó không còn xảy ra với v4. Giờ đây, bạn có thể tùy chọn sử dụng các phần tử & lt; button & gt; trong trình đơn thả xuống của mình thay vì chỉ & lt; a & gt; s.

  

& lt; div

class =

"thả xuống"

& gt;

& lt; button

class =

"btn btn-Secondary dropdown-toggle"

type =

"nút"

id =

"dropdownMenu2"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Trình đơn thả xuống

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenu2"

& gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Hành động

& lt; / nút & gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Một hành động khác

& lt ; / nút & gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Một cái gì đó khác ở đây

& lt; / nút & gt;

& lt; / div & gt;

& lt; / div & gt;

Bạn cũng có thể tạo các mục thả xuống không tương tác với . dropdown-item-text . Thoải mái tạo kiểu thêm với các tiện ích văn bản hoặc CSS tùy chỉnh.

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; span

class =

"dropdown-item-text"

& gt;

Văn bản mục thả xuống

& lt; / span & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; / div & gt;

Đang hoạt động

Thêm . active vào các mục trong menu thả xuống để định kiểu chúng là đang hoạt động .

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết thông thường

& lt ; / a & gt;

& lt; a

class =

"dropdown-item active"

href =

"#"

& gt;

Liên kết đang hoạt động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một liên kết khác

& lt ; / a & gt;

& lt; / div & gt;

Đã vô hiệu hóa

Thêm . đã bị vô hiệu hóa vào các mục trong trình đơn thả xuống để định kiểu chúng là bị vô hiệu hóa .

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết thông thường

& lt ; / a & gt;

& lt; a

class =

"dropdown-item bị vô hiệu hóa"

href =

"#"

& gt;

Đã tắt liên kết

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một liên kết khác

& lt ; / a & gt;

& lt; / div & gt;

Theo mặc định, trình đơn thả xuống được tự động định vị 100% từ trên cùng và dọc theo bên trái của trình đơn chính. Thêm . Dropdown-menu-right vào . Dropdown-menu để căn phải menu thả xuống.

Lưu ý! Các menu thả xuống được định vị nhờ Popper.js (ngoại trừ khi chúng được chứa trong thanh điều hướng).

  

& lt; div

class =

"btn-group"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

data-toggle =

" dropdown "

aria-haspopup =

" true "

aria -expanded =

"false"

& gt;

Menu căn phải

& lt; / button & gt;

& lt; div

class =

"dropdown-menu dropdown-menu-right"

& gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Hành động

& lt; / nút & gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Một hành động khác

& lt ; / nút & gt;

& lt; button

class =

"dropdown-item"

type =

"button"

& gt;

Một cái gì đó khác ở đây

& lt; / nút & gt;

& lt; / div & gt;

& lt; / div & gt;

Tiêu đề

Thêm tiêu đề vào nhãn các phần hành động trong bất kỳ trình đơn thả xuống nào.

Hành động
Một hành động khác

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; h6

class =

"dropdown-header"

& gt;

Tiêu đề thả xuống

& lt; / h6 & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; / div & gt;

Bộ chia

Tách các nhóm mục menu có liên quan bằng một dải phân cách.

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt ; / a & gt;

& lt; / div & gt;

Văn bản

Đặt bất kỳ văn bản dạng tự do nào trong menu thả xuống với văn bản và sử dụng tiện ích giãn cách . Lưu ý rằng bạn có thể sẽ cần các kiểu định cỡ bổ sung để hạn chế chiều rộng menu.

Một số văn bản mẫu tự do chảy trong menu thả xuống.

Và đây là văn bản ví dụ hơn.

  

& lt; div

class =

"dropdown-menu p-4 text-muted"

style =

"max-width: 200px;"

< p class = "nt"> & gt;

& lt; p & gt;

Một số văn bản mẫu tự do chảy trong menu thả xuống.

& lt; / p & gt;

& lt; p

class =

"mb-0"

& gt;

Và đây là văn bản ví dụ hơn.

& lt; / p & gt;

& lt; / div & gt;

Biểu mẫu

Đặt biểu mẫu trong menu thả xuống hoặc đưa biểu mẫu vào menu thả xuống và sử dụng tiện ích lề hoặc đệm để cung cấp cho biểu mẫu không gian phủ định mà bạn yêu cầu.

  

& lt; div

class =

"menu thả xuống"

& gt;

& lt; form

class =

"px-4 py-3"

< p class = "nt"> & gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormEmail1"

& gt;

Địa chỉ email

& lt; / label & gt;

& lt; input

type =

"email"

class =

" form-control "

id =

" exampleDropdownFormEmail1 "

placeholder =

"[email protected]"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormPassword1"

& gt;

Mật khẩu

& lt; / label & gt;

& lt; input

type =

"password"

class =

" form-control "

id =

" exampleDropdownFormPassword1 "

placeholder =

"Mật khẩu"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-check"

& gt;

& lt; input

type =

"hộp kiểm"

class =

" form-check-input "

id =

" dropdownCheck "

& gt;

& lt; label

class =

"form-check-label"

for =

"dropdownCheck"

& gt;

Nhớ tôi

& lt; / label & gt;

& lt; / div & gt;

& lt; button

type =

"submit"

class =

" btn btn-primary "

& gt;

Đăng nhập

& lt; / nút & gt;

& lt; / form & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Mới xung quanh đây? Đăng ký

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Bạn quên mật khẩu?

& lt; / a & gt;

& lt; / div & gt;

Địa chỉ email

Mật khẩu

Nhớ tôi

  

& lt; form

class =

"dropdown-menu p-4"

& gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormEmail2"

& gt;

Địa chỉ email

& lt; / label & gt;

& lt; input

type =

"email"

class =

" form-control "

id =

" exampleDropdownFormEmail2 "

placeholder =

"[email protected]"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-group"

& gt;

& lt; label

for =

"exampleDropdownFormPassword2"

& gt;

Mật khẩu

& lt; / label & gt;

& lt; input

type =

"password"

class =

" form-control "

id =

" exampleDropdownFormPassword2 "

placeholder =

"Mật khẩu"

& gt;

& lt; / div & gt;

& lt; div

class =

"form-check"

& gt;

& lt; input

type =

"hộp kiểm"

class =

" form-check-input "

id =

" dropdownCheck2 "

& gt;

& lt; label

class =

"form-check-label"

for =

"dropdownCheck2"

& gt;

Nhớ tôi

& lt; / label & gt;

& lt; / div & gt;

& lt; button

type =

"submit"

class =

" btn btn-primary "

& gt;

Đăng nhập

& lt; / nút & gt;

& lt; / form & gt;

Sử dụng data-offset hoặc data-reference để thay đổi vị trí của menu thả xuống.

  

& lt; div

class =

"d-flex"

& gt;

& lt; div

class =

"dropdown mr-1"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle "

id =

"dropdownMenuOffset"

data-toggle =

"dropdown"

aria-haspopup =

"true"

aria-expand =

"false"

data-offset =

"10,20"

& gt;

Bù lại

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenuOffset"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt; div

class =

"btn-group"

& gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary "

& gt;

Tham khảo

& lt ; / nút & gt;

& lt; button

type =

"button"

class =

" btn btn-Secondary dropdown-toggle dropdown-toggle-split "

id =

"dropdownMenuReference"

data-toggle =

"dropdown"

aria-haspopup =

" true "

aria-expand =

" false "

data-reference =

" parent "

& gt;

& lt; span

class =

"sr-only"

& gt;

Chuyển đổi menu thả xuống

& lt; / span & gt;

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dropdownMenuReference"

& gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Hành động

& lt; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Một hành động khác

& lt ; / a & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Nội dung khác ở đây

& lt; / a & gt;

& lt; div

class =

"dropdown-divider"

& gt; & lt; / div & gt;

& lt; a

class =

"dropdown-item"

href =

"#"

& gt;

Liên kết riêng

& lt; / a & gt;

& lt; / div & gt;

& lt; / div & gt;

& lt; / div & gt;

Sử dụng

Thông qua thuộc tính dữ liệu hoặc JavaScript, plugin thả xuống chuyển đổi nội dung ẩn (menu thả xuống) bằng cách chuyển đổi lớp . show trên mục danh sách mẹ. Thuộc tính data-toggle = "dropdown" được dựa vào để đóng menu thả xuống ở cấp ứng dụng, vì vậy bạn nên luôn sử dụng thuộc tính này.

Trên các thiết bị hỗ trợ cảm ứng, việc mở menu thả xuống sẽ thêm các trình xử lý trống ( $. noop ) di chuột qua vào phần tử con trực tiếp của phần tử & lt; body & gt; . Việc tấn công xấu xí được thừa nhận này là cần thiết để giải quyết vấn đề quirk trong iOS ‘ủy quyền sự kiện , nếu không sẽ ngăn một lần nhấn ở bất kỳ đâu bên ngoài menu thả xuống kích hoạt mã đóng menu thả xuống. Sau khi trình đơn thả xuống bị đóng, các trình xử lý mouseover trống bổ sung này sẽ bị xóa.

Qua thuộc tính dữ liệu

Thêm data-toggle = "dropdown" vào liên kết hoặc nút để chuyển đổi menu thả xuống.

  

& lt; div

class =

"thả xuống"

& gt;

& lt; button

id =

"dLabel"

type =

" button "

data-toggle =

" thả xuống "

aria-haspopup =

"true"

aria-expand =

"false"

& gt;

Trình kích hoạt thả xuống

& lt; / button & gt;

& lt; div

class =

"menu thả xuống"

aria-labellingby =

"dLabel"

& gt;

...

& lt; / div & gt;

& lt; / div & gt;

Qua JavaScript

Gọi các trình đơn thả xuống qua JavaScript:

  

$

(

'. thả xuống -toggle '

).

thả xuống

()

data-toggle = "dropdown" vẫn được yêu cầu

Bất kể bạn gọi menu thả xuống qua JavaScript hay thay vào đó sử dụng data-api, data-toggle = "dropdown" luôn bắt buộc phải có trên menu thả xuống phần tử kích hoạt.

Tùy chọn

Các tùy chọn có thể được chuyển qua các thuộc tính dữ liệu hoặc JavaScript. Đối với các thuộc tính dữ liệu, hãy nối tên tùy chọn vào data- , như trong data-offset = "" . < / p>

Tên
Loại hình
Mặc định
Sự mô tả

bù lại
số | chuỗi | hàm số
0
Phần bù của menu thả xuống so với mục tiêu của nó. Để biết thêm thông tin, hãy tham khảo tài liệu bù đắp của Popper.js.

lật
boolean
thật
Cho phép Trình đơn thả xuống lật trong trường hợp có phần chồng chéo trên phần tử tham chiếu. Để biết thêm thông tin, hãy tham khảo tài liệu lật của Popper.js.

ranh giới
chuỗi | yếu tố
'scrollParent'
Ranh giới ràng buộc tràn của menu thả xuống. Chấp nhận các giá trị của 'viewport' , 'window' , 'scrollParent' hoặc tham chiếu HTMLElement (chỉ JavaScript). Để biết thêm thông tin, hãy tham khảo tài liệu ngăn chặn dòng chảy của Popper.js.

tài liệu tham khảo
chuỗi | yếu tố
'chuyển đổi'
Phần tử tham chiếu của menu thả xuống. Chấp nhận các giá trị của 'toggle' , 'parent' hoặc tham chiếu HTMLElement. Để biết thêm thông tin, hãy tham khảo tài liệu referenceObject của Popper.js.

trưng bày
sợi dây
'năng động'
Theo mặc định, chúng tôi sử dụng Popper.js để định vị động. Vô hiệu hóa điều này với `static`.

Lưu ý khi ranh giới được đặt thành bất kỳ giá trị nào ngoài 'scrollParent' , kiểu position: static được áp dụng cho vùng chứa . dropdown .

Phương thức

Phương pháp
Sự mô tả

$ (). dropdown ('toggle')
Chuyển đổi menu thả xuống của điều hướng theo thanh hoặc tab nhất định.

$ (). dropdown ('update')
Cập nhật vị trí của menu thả xuống của một phần tử. $ (). dropdown ('dispose')
Hủy bỏ menu thả xuống của một phần tử.

Sự kiện

Tất cả các sự kiện thả xuống đều được kích hoạt tại phần tử mẹ của . dropdown-menu và có RelatedTarget thuộc tính có giá trị là phần tử neo chuyển đổi.

Biến cố
Sự mô tả

show.bs.dropdown
Sự kiện này kích hoạt ngay lập tức khi phương thức phiên bản show được gọi.

show.bs.dropdown
Sự kiện này được kích hoạt khi menu thả xuống hiển thị cho người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).

hide.bs.dropdown
Sự kiện này được kích hoạt ngay lập tức khi phương thức ẩn thể hiện đã được gọi.

hidden.bs.dropdown
Sự kiện này được kích hoạt khi danh sách thả xuống hoàn tất bị ẩn khỏi người dùng (sẽ đợi quá trình chuyển đổi CSS hoàn tất).

  

$

(

'# myDropdown '

).

trên

(

'show.bs.dropdown'

,

hàm

()

{

// làm gì đó…

})


Xem thêm những thông tin liên quan đến chủ đề google material design thả xuống

#14: Google Material Design Lead, Rich Fulcher, shares origin story of Google's design vision

  • Tác giả: High Resolution
  • Ngày đăng: 2017-05-14
  • Đánh giá: 4 ⭐ ( 9098 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Rich Fulcher leads Material Design and Engineering at Google. In this episode, he walks us through the story of how Material Design came out, what's involved in building your own design system, and the importance of investing in your design culture and how you grow talent. Bobby Ghoshal and Jared Erondu are the hosts of this series.

    If you find our content helpful, please consider supporting High Resolution on Patreon https://www.patreon.com/highresolution

    ---

    FOLLOW US
    Twitter: http://twitter.com/highrespodcast
    Facebook: http://facebook.com/highrespodcast
    iTunes: http://bit.ly/highresitunes
    Google Play: http://bit.ly/highresgoogle

    Get early access to the next episode: http://highresolution.design/early-access

    ---

    THANKS TO OUR PARTNERS
    IBM – IBM's mission is simple: put the user at the center of our products. If you are a passionate problem-solver, able to empathize with users and turn that empathy into design insight, we want you to join us in creating exceptional experiences that span our vast product portfolio.

    Learn about the team!
    http://bit.ly/ibmsponsor

    InVision – InVision is the world's leading product design platform, powering the future of digital product design through our deep understanding of the dynamics of collaboration. Teams that build digital products are at a serious advantage when they use InVision's suite of prototyping tools. They're a great way of getting everyone on board.

    Get 3 full months on InVision FREE
    http://bit.ly/invisionpartner

    Searle Video – Searle Video is a creative studio based out of Portland, Oregon. They've helped the creative community tell stories for over 10 years. They've done advertisements, behind the scenes stories, and documentaries for companies like Slack, Intel, Adobe, Google and the XOXO festival.
    http://bit.ly/searlesponsor

Cách tạo danh sách thả xuống trong Google Sheets đơn giản dễ dàng nhất

  • Tác giả: www.thegioididong.com
  • Đánh giá: 3 ⭐ ( 3956 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn 2 cách tạo danh sách thả xuống trong Google Sheets đơn giản, dễ thực hiện. Hướng dẫn chi tiết từng bước. Click xem ngay!

Tạo danh sách thả xuống và đổ màu trong Google Sheets 2022 mới nhất

  • Tác giả: taichinh4u.net
  • Đánh giá: 5 ⭐ ( 9209 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Tạo danh sách thả xuống trong ô

  • Tác giả: support.google.com
  • Đánh giá: 5 ⭐ ( 5033 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo danh sách thả xuống trong một ô bằng Google Trang tính.
    Tạo danh sách thả xuống Mở một bảng tính trong

Cách dùng giao diện Material Design của Chrome trên FireFox

  • Tác giả: hocviencanboxd.edu.vn
  • Đánh giá: 3 ⭐ ( 1757 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vào ngày 2 tháng 9 năm 2018, ngày đánh dấu kỷ niệm 10 năm sự ra đời của trình duyệt web Google Chrome. Là lúc này Google đã chính thức tung ra bản cập nhật

Cách tạo menu, danh sách thả xuống trong Google Sheets

  • Tác giả: cps.edu.vn
  • Đánh giá: 5 ⭐ ( 3190 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo menu, danh sách thả xuống trong Google Sheets là giải pháp lý tưởng giúp bạn vừa tiết kiệm thời gian và công sức cũng như hạn chế lỗi có thể xảy ra, thay

Cách tạo nhiều lựa chọn trong danh sách thả xuống trong Google Sheets

  • Tác giả: gitiho.com
  • Đánh giá: 3 ⭐ ( 3856 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mặc định Google Sheets chỉ cho phép chọn một tùy chọn từ danh sách thả xuống. Trong bài này Gitiho sẽ chỉ cho bạn cách tạo một danh sách thả xuống cho phép nhiều lựa chọn.

Xem thêm các bài viết khác thuộc chuyên mục: WordPress

XEM THÊM  Lưu trữ web tốt nhất năm 2022: Hơn 160 đánh giá của chuyên gia về các nhà cung cấp dịch vụ trang web - lưu trữ tốt nhất trên thế giới

By DEVTEAM