Define dropdown package
This commit is contained in:
parent
721cf2f8ac
commit
612757638e
2 changed files with 41 additions and 11 deletions
|
@ -1,4 +1,43 @@
|
||||||
(in-package :cl-sbt)
|
;; The Bootstrap Dropdown component is a toggleable, contextual menu for
|
||||||
|
;; displaying lists of links and more. It's made interactive with the inclusion of
|
||||||
|
;; JavaScript, which allows it to convert a button into a dropdown menu.
|
||||||
|
|
||||||
|
;; Key Features:
|
||||||
|
|
||||||
|
;; Toggleable: It can be toggled to display or hide its list of links.
|
||||||
|
|
||||||
|
;; Contextual: The dropdown can be used in various contexts, such as navigation
|
||||||
|
;; bars, tabs, and buttons.
|
||||||
|
|
||||||
|
;; Flexible: Dropdowns can contain a wide variety of elements, not just links. For
|
||||||
|
;; example, you could include form elements or other complex sets of content.
|
||||||
|
|
||||||
|
;; Customizable: The appearance and behavior of the dropdown can be customized with Bootstrap's built-in classes.
|
||||||
|
|
||||||
|
;; In terms of structure, a Bootstrap dropdown typically consists of a button with
|
||||||
|
;; data-bs-toggle="dropdown" attribute to enable the dropdown functionality, and a
|
||||||
|
;; div or ul with class .dropdown-menu to create the actual dropdown menu. Each
|
||||||
|
;; item in the dropdown is typically enclosed in an a or button element with the
|
||||||
|
;; class .dropdown-item. Additionally, dropdowns can be made to expand
|
||||||
|
;; upwards (instead of downwards) by adding the .dropup class.
|
||||||
|
|
||||||
|
(defpackage cl-sbt-dropdown
|
||||||
|
(:use :cl)
|
||||||
|
(:export
|
||||||
|
:menu
|
||||||
|
:item
|
||||||
|
:dropdown))
|
||||||
|
|
||||||
|
(in-package :cl-sbt-dropdown)
|
||||||
|
|
||||||
|
(defmacro menu (&body body)
|
||||||
|
`(spinneret:with-html
|
||||||
|
(:ul :class "dropdown-menu"
|
||||||
|
,@body)))
|
||||||
|
|
||||||
|
(defmacro item (&body body)
|
||||||
|
`(spinneret:with-html
|
||||||
|
(:li (:a :class "dropdown-item" :href "#" ,@body))))
|
||||||
|
|
||||||
(defmacro dropdown ((&key (title "")) &body body)
|
(defmacro dropdown ((&key (title "")) &body body)
|
||||||
`(spinneret:with-html
|
`(spinneret:with-html
|
||||||
|
@ -9,12 +48,3 @@
|
||||||
:aria-expanded "false"
|
:aria-expanded "false"
|
||||||
,title)
|
,title)
|
||||||
,@body)))
|
,@body)))
|
||||||
|
|
||||||
(defmacro dropdown-menu (&body body)
|
|
||||||
`(spinneret:with-html
|
|
||||||
(:ul :class "dropdown-menu"
|
|
||||||
,@body)))
|
|
||||||
|
|
||||||
(defmacro dropdown-item (&body body)
|
|
||||||
`(spinneret:with-html
|
|
||||||
(:li (:a :class "dropdown-item" :href "#" ,@body))))
|
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
(defpackage cl-sbt
|
(defpackage cl-sbt
|
||||||
(:use :cl)
|
(:use :cl)
|
||||||
(:export :badge :badge-pill-primary :badge-pill-secondary :badge-pill-success :badge-pill-danger :badge-pill-warning :badge-pill-info :badge-pill-light :badge-pill-dark :btn :btn-primary :btn-secondary :btn-success :btn-danger :btn-warning :btn-info :btn-light :btn-dark :btn-link :btn-outline-primary :btn-outline-secondary :btn-outline-success :btn-outline-danger :btn-outline-warning :btn-outline-info :btn-outline-light :btn-outline-dark :btn-outline-link :container :col-md :col-xs :col-sm :col-lg :icon :dropdown :dropdown-menu :dropdown-item :nav :nav-item :pagination :pagination-with-icons :row :table :table-striped :table-bordered :table-hover :table-condensed :well :with-page))
|
(:export :badge :badge-pill-primary :badge-pill-secondary :badge-pill-success :badge-pill-danger :badge-pill-warning :badge-pill-info :badge-pill-light :badge-pill-dark :btn :btn-primary :btn-secondary :btn-success :btn-danger :btn-warning :btn-info :btn-light :btn-dark :btn-link :btn-outline-primary :btn-outline-secondary :btn-outline-success :btn-outline-danger :btn-outline-warning :btn-outline-info :btn-outline-light :btn-outline-dark :btn-outline-link :container :col-md :col-xs :col-sm :col-lg :icon :nav :nav-item :pagination :pagination-with-icons :row :table :table-striped :table-bordered :table-hover :table-condensed :well :with-page))
|
||||||
|
|
||||||
(in-package :cl-sbt)
|
(in-package :cl-sbt)
|
||||||
|
|
||||||
|
|
Loading…
Add table
Reference in a new issue