Update docs
This commit is contained in:
parent
a59dd7ee06
commit
1046ddf1dc
2 changed files with 20 additions and 81 deletions
|
|
@ -1,7 +1,7 @@
|
|||
#+title: Using cl-sbt/accordion Macros in a Web Application
|
||||
#+author: Marcus Kammer
|
||||
#+email: marcus.kammer@mailbox.org
|
||||
#+date: [2023-09-02 Sat]
|
||||
#+date: 2024-02-04T13:09+01:00
|
||||
* Introduction
|
||||
|
||||
The accordion component is a popular UI element that helps to organize and
|
||||
|
|
@ -41,87 +41,27 @@ can use the cl-sbt/accordion macros. These macros provide a convenient way to
|
|||
generate the necessary HTML structure for accordion components. Here's how you
|
||||
can integrate them into your project:
|
||||
|
||||
#+begin_src lisp
|
||||
(defpackage my-web-app
|
||||
(:use :cl :cl-sbt/accordion)
|
||||
#+name: accordion-page
|
||||
#+begin_src lisp :results output file :file-ext html
|
||||
(defpackage my-web-accordion-app
|
||||
(:use :cl)
|
||||
(:import-from :dev.metalisp.sbt :with-page)
|
||||
(:import-from :dev.metalisp.sbt/component/accordion :accordion)
|
||||
(:export :generate-accordion-page))
|
||||
|
||||
(in-package :my-web-app)
|
||||
(in-package :my-web-accordion-app)
|
||||
|
||||
(defun generate-accordion-page ()
|
||||
"Generates an HTML page with an accordion using cl-sbt/accordion macros."
|
||||
(spinneret:with-html-string
|
||||
(:html
|
||||
(:head
|
||||
(:title "Accordion Example")
|
||||
;; Include Bootstrap CSS and JavaScript links here
|
||||
)
|
||||
(:body
|
||||
(:h1 "Accordion Example")
|
||||
(accordion "myAccordion"
|
||||
(:target "collapseOne" :name "Section 1" :show t :content "Content for section 1.")
|
||||
(:target "collapseTwo" :name "Section 2" :content "Content for section 2.")
|
||||
(:target "collapseThree" :name "Section 3" :content "Content for section 3."))
|
||||
;; Include Bootstrap JavaScript initialization script here
|
||||
))))
|
||||
"Generates an HTML page with accordion using accordion macros."
|
||||
(with-output-to-string (spinneret:*html*)
|
||||
(with-page (:title "Accordion Example" :main-con t)
|
||||
(accordion ()
|
||||
("Accordion Item #1" "This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.")
|
||||
("Accordion Item #2" "This is the second item's accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the .accordion-body, though the transition does limit overflow.")))))
|
||||
|
||||
(generate-accordion-page)
|
||||
(format t (generate-accordion-page))
|
||||
#+end_src
|
||||
|
||||
#+RESULTS:
|
||||
#+begin_example
|
||||
<html lang=en>
|
||||
<head>
|
||||
<meta charset=UTF-8>
|
||||
<title>Accordion Example</title>
|
||||
</head>
|
||||
<body>
|
||||
<h1>Accordion Example</h1>
|
||||
<div class=accordion id=myAccordion>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class=accordion-button type=button data-bs-toggle=collapse
|
||||
data-bs-target=#collapseOne aria-expanded=true
|
||||
aria-controls=#collapseOne>Section 1</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse show" id=collapseOne
|
||||
data-bs-parent=#myAccordion>
|
||||
<div class=accordion-body>
|
||||
Content for section 1.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class=accordion-button type=button data-bs-toggle=collapse
|
||||
data-bs-target=#collapseTwo aria-expanded=false
|
||||
aria-controls=#collapseTwo>Section 2</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse" id=collapseTwo
|
||||
data-bs-parent=#myAccordion>
|
||||
<div class=accordion-body>
|
||||
Content for section 2.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class=accordion-item>
|
||||
<h2 class=accordion-header>
|
||||
<button class=accordion-button type=button data-bs-toggle=collapse
|
||||
data-bs-target=#collapseThree aria-expanded=false
|
||||
aria-controls=#collapseThree>Section 3</button>
|
||||
</h2>
|
||||
<div class="accordion-collapse collapse" id=collapseThree
|
||||
data-bs-parent=#myAccordion>
|
||||
<div class=accordion-body>
|
||||
Content for section 3.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
#+end_example
|
||||
|
||||
This example demonstrates how to integrate the cl-sbt/accordion macros into a
|
||||
web application to create an interactive accordion component. The macros help
|
||||
generate the necessary HTML structure for the accordion, which allows users to
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
#+title: Creating a Questionnaire using cl-sbt/questionnaire Macros in a Web Application
|
||||
#+author: Marcus Kammer
|
||||
#+email: marcus.kammer@mailbox.org
|
||||
#+date: 2024-01-28T11:38+01:00
|
||||
#+date: 2024-02-04T13:11+01:00
|
||||
* Introduction
|
||||
|
||||
Questionnaires are powerful tools for gathering information and insights from
|
||||
|
|
@ -30,16 +30,16 @@ required for different types of questions in a questionnaire.
|
|||
|
||||
#+name: questionnaire-page
|
||||
#+begin_src lisp :results output file :file-ext html
|
||||
(defpackage my-web-app
|
||||
(defpackage my-web-questionnaire-app
|
||||
(:use :cl)
|
||||
(:import-from :dev.metalisp.sbt :with-page)
|
||||
(:import-from :dev.metalisp.sbt/pattern/questionnaire :questionnaire)
|
||||
(:export :generate-button-page))
|
||||
(:export :generate-questionnaire-page))
|
||||
|
||||
(in-package :my-web-app)
|
||||
(in-package :my-web-questionnaire-app)
|
||||
|
||||
(defun generate-questionnaire-page ()
|
||||
"Generates an HTML page with questionnaires using cl-sbt/questionnaire macros."
|
||||
"Generates an HTML page with questionnaires using questionnaire macros."
|
||||
(with-output-to-string (spinneret:*html*)
|
||||
(with-page (:title "Questionnaire Example" :main-con t)
|
||||
(questionnaire "/submit"
|
||||
|
|
@ -52,7 +52,6 @@ required for different types of questions in a questionnaire.
|
|||
(:ask "How many hours per day, on average, do you spend browsing the internet?"
|
||||
:group "webbrowsing"
|
||||
:choices (:radio "Less than 1 hour" "1-3 hours" "3-5 hours" "5+ hours"))
|
||||
;; Additional Questions
|
||||
(:ask "What are your favorite brands?"
|
||||
:group "brands"
|
||||
:choices (:checkbox "Brand A" "Brand B" "Brand C" "None" :text "Other"))
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue