2023-09-01 15:09:49 +02:00
|
|
|
#+title: Using cl-sbt/badge Macros for Bootstrap Badges in a Web Application
|
|
|
|
|
#+author: Marcus Kammer
|
|
|
|
|
#+email: marcus.kammer@mailbox.org
|
|
|
|
|
#+date: [2023-09-01 Fri]
|
|
|
|
|
|
|
|
|
|
* Introduction
|
|
|
|
|
|
|
|
|
|
The Bootstrap Badge component is a small, pill-shaped or circular indicator
|
|
|
|
|
that adds contextual information to an item in your web application. Badges are
|
|
|
|
|
versatile components that can be used for notifications, tags, status
|
|
|
|
|
indicators, and more. They can be styled using contextual variations such as
|
|
|
|
|
'primary', 'secondary', 'success', 'danger', etc., and can be made round-shaped
|
|
|
|
|
by adding .rounded-pill class.
|
|
|
|
|
|
2023-09-01 15:13:26 +02:00
|
|
|
* General Description from a UX Perspective
|
|
|
|
|
Badges are small interactive elements in a user interface that typically convey
|
|
|
|
|
a specific piece of information or serve as an indicator for something.
|
|
|
|
|
|
|
|
|
|
** Visibility
|
|
|
|
|
Badges are usually designed to stand out, often with bright colors or distinctive
|
|
|
|
|
shapes, so that the user's attention is drawn to them.
|
|
|
|
|
|
|
|
|
|
** Contextual Information
|
|
|
|
|
Badges often carry critical or contextual information that helps the user make
|
|
|
|
|
decisions or take action.
|
|
|
|
|
|
|
|
|
|
** Affordance
|
|
|
|
|
The presence of a badge often indicates that the associated item is interactive
|
|
|
|
|
and provides extra information or functionality.
|
|
|
|
|
|
|
|
|
|
** Scalability
|
|
|
|
|
Because badges are typically small and non-intrusive, they can be easily added
|
|
|
|
|
to existing interface elements without causing a major redesign.
|
|
|
|
|
|
|
|
|
|
** Feedback and Micro-interactions
|
|
|
|
|
Badges can change dynamically based on user interaction or system status,
|
|
|
|
|
giving immediate feedback to the user.
|
|
|
|
|
|
|
|
|
|
** Aesthetic Value
|
|
|
|
|
A well-designed badge can also add to the aesthetic quality of an application,
|
|
|
|
|
improving the overall user experience by making the interface more visually appealing.
|
|
|
|
|
|
|
|
|
|
** Overuse
|
|
|
|
|
Like any UI element, badges should be used judiciously. Overuse can lead to a
|
|
|
|
|
cluttered interface and may decrease their effectiveness.
|
2023-09-01 15:09:49 +02:00
|
|
|
* Features of Bootstrap Badges
|
|
|
|
|
|
|
|
|
|
** Contextual Variations
|
|
|
|
|
- Use classes like .bg-primary, .bg-success, etc., to style the badge.
|
|
|
|
|
|
|
|
|
|
** Pill Badges
|
|
|
|
|
- Add .rounded-pill to make badges round.
|
|
|
|
|
|
|
|
|
|
** Links
|
|
|
|
|
- Badges can be clickable if used within <a> or <button> elements.
|
|
|
|
|
|
|
|
|
|
** Placement
|
|
|
|
|
- Can be placed on other Bootstrap components like buttons, navs, cards,
|
|
|
|
|
etc.
|
|
|
|
|
|
|
|
|
|
** Dismissable
|
|
|
|
|
- With extra HTML, badges can be made dismissable.
|
|
|
|
|
|
|
|
|
|
* Integrating cl-sbt/badge Macros
|
|
|
|
|
|
|
|
|
|
To create Bootstrap-style badges in your Common Lisp web application, you can
|
|
|
|
|
use the cl-sbt/badge macros. These macros provide a convenient way to generate
|
|
|
|
|
the necessary HTML structure for badge components. Here's how you can integrate
|
|
|
|
|
them into your project:
|
|
|
|
|
|
|
|
|
|
#+begin_src lisp
|
|
|
|
|
(defpackage my-web-app
|
2023-09-01 16:06:37 +02:00
|
|
|
(:use :cl :cl-sbt/badge :cl-sbt/btn)
|
2023-09-01 15:09:49 +02:00
|
|
|
(:export :generate-badge-page))
|
|
|
|
|
|
|
|
|
|
(in-package :my-web-app)
|
|
|
|
|
|
|
|
|
|
(defun generate-badge-page ()
|
|
|
|
|
"Generates an HTML page with badges using cl-sbt/badge macros."
|
|
|
|
|
(spinneret:with-html-string
|
|
|
|
|
(:html
|
|
|
|
|
(:head
|
|
|
|
|
(:title "Badge Example")
|
|
|
|
|
;; Include Bootstrap CSS and JavaScript links here
|
|
|
|
|
)
|
|
|
|
|
(:body
|
|
|
|
|
(:h1 "Badge Example")
|
2023-09-01 16:06:37 +02:00
|
|
|
(btn-primary () "Notifications " (badge-secondary "4"))
|
2023-09-01 15:09:49 +02:00
|
|
|
(badge-success "Updated")
|
|
|
|
|
;; Include more badges here
|
|
|
|
|
))))
|
|
|
|
|
|
|
|
|
|
(generate-badge-page)
|
|
|
|
|
#+end_src
|
|
|
|
|
|
2023-09-01 16:06:37 +02:00
|
|
|
#+RESULTS:
|
|
|
|
|
#+begin_example
|
|
|
|
|
<html lang=en>
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset=UTF-8>
|
|
|
|
|
<title>Badge Example</title>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<h1>Badge Example</h1>
|
|
|
|
|
<button class="btn btn-primary" type=button>Notifications <span class="badge text-bg-secondary">4</span></button>
|
|
|
|
|
<span class="badge text-bg-success">Updated</span>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
#+end_example
|
|
|
|
|
|
2023-09-01 15:09:49 +02:00
|
|
|
This example demonstrates how to integrate cl-sbt/badge macros into a web
|
|
|
|
|
application to create Bootstrap-style badges. By using these macros, you can
|
|
|
|
|
quickly and easily add badges to your web application, customizing them to fit
|
|
|
|
|
your needs.
|
