Add ha-badge docs to gallery (#25218)

This commit is contained in:
Wendelin 2025-04-29 11:37:56 +02:00 committed by GitHub
parent 0242fbc6f8
commit c111bf1062
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
4 changed files with 197 additions and 3 deletions

View File

@ -1,5 +1,5 @@
import "./ha-gallery";
import("../../src/resources/ha-style");
import("../../src/resources/append-ha-style");
document.body.appendChild(document.createElement("ha-gallery"));

View File

@ -0,0 +1,65 @@
---
title: Badge
subtitle: Lovelace dashboard badge
---
<style>
.wrapper {
display: flex;
gap: 24px;
}
</style>
# Badge `<ha-badge>`
The badge component is a small component that displays a number or status information. It is used in the lovelace dashboard on the top.
## Implementation
### Example Usage
<div class="wrapper">
<ha-badge>
simple badge
</ha-badge>
<ha-badge label="Info">
With a label
</ha-badge>
<ha-badge type="button">
Type button
</ha-badge>
</div>
```html
<ha-badge> simple badge </ha-badge>
<ha-badge label="Info"> With a label </ha-badge>
<ha-badge type="button"> Type button </ha-badge>
```
### API
**Slots**
- default slot is the content of the badge
- no default
- `icon` set the icon of the badge
- no default
**Properties/Attributes**
| Name | Type | Default | Description |
| -------- | ----------------------- | ----------- | ------------------------------------------------------------ |
| type | `"badge"` or `"button"` | `"badge"` | If it's button it shows a ripple effect |
| label | string | `undefined` | Text label for the badge, only visible if `iconOnly = false` |
| iconOnly | boolean | `false` | Only show label |
**CSS Custom Properties**
- `--ha-badge-size` (default `36px`)
- `--ha-badge-border-radius` (default `calc(var(--ha-badge-size, 36px) / 2)`)
- `--ha-badge-font-size` (default `var(--ha-font-size-s)`)
- `--ha-badge-icon-size` (default `18px`)

View File

@ -0,0 +1,129 @@
import { mdiButtonCursor, mdiHome } from "@mdi/js";
import type { TemplateResult } from "lit";
import { css, html, LitElement } from "lit";
import { customElement } from "lit/decorators";
import { applyThemesOnElement } from "../../../../src/common/dom/apply_themes_on_element";
import "../../../../src/components/ha-badge";
import "../../../../src/components/ha-card";
import "../../../../src/components/ha-svg-icon";
import { mdiHomeAssistant } from "../../../../src/resources/home-assistant-logo-svg";
const badges: {
type?: "badge" | "button";
label?: string;
iconOnly?: boolean;
slot?: TemplateResult;
iconSlot?: TemplateResult;
}[] = [
{
slot: html`<span>Badge</span>`,
},
{
type: "badge",
label: "Badge",
iconSlot: html`<ha-svg-icon slot="icon" .path=${mdiHome}></ha-svg-icon>`,
slot: html`<span>Badge</span>`,
},
{
type: "button",
label: "Button",
iconSlot: html`<ha-svg-icon
slot="icon"
.path=${mdiButtonCursor}
></ha-svg-icon>`,
slot: html`<span>Button</span>`,
},
{
type: "button",
label: "Label only",
iconSlot: html`<ha-svg-icon
slot="icon"
.path=${mdiButtonCursor}
></ha-svg-icon>`,
},
{
type: "button",
label: "Label",
slot: html`<span>Button no label</span>`,
},
{
label: "Icon only",
iconOnly: true,
iconSlot: html`<ha-svg-icon
slot="icon"
.path=${mdiHomeAssistant}
></ha-svg-icon>`,
},
];
@customElement("demo-components-ha-badge")
export class DemoHaBadge extends LitElement {
protected render(): TemplateResult {
return html`
${["light", "dark"].map(
(mode) => html`
<div class=${mode}>
<ha-card header="ha-badge ${mode} demo">
<div class="card-content">
${badges.map(
(badge) => html`
<ha-badge
.type=${badge.type || undefined}
.label=${badge.label}
.iconOnly=${badge.iconOnly || false}
>
${badge.iconSlot} ${badge.slot}
</ha-badge>
`
)}
</div>
</ha-card>
</div>
`
)}
`;
}
firstUpdated(changedProps) {
super.firstUpdated(changedProps);
applyThemesOnElement(
this.shadowRoot!.querySelector(".dark"),
{
default_theme: "default",
default_dark_theme: "default",
themes: {},
darkMode: true,
theme: "default",
},
undefined,
undefined,
true
);
}
static styles = css`
:host {
display: flex;
justify-content: center;
}
.dark,
.light {
display: block;
background-color: var(--primary-background-color);
padding: 0 50px;
}
ha-card {
margin: 24px auto;
}
.card-content {
display: flex;
gap: 24px;
}
`;
}
declare global {
interface HTMLElementTagNameMap {
"demo-components-ha-badge": DemoHaBadge;
}
}

View File

@ -103,7 +103,7 @@ export class HaBadge extends LitElement {
color: var(--secondary-text-color);
}
.content {
font-size: var(--ha-font-size-badge, var(--ha-font-size-s));
font-size: var(--ha-badge-font-size, var(--ha-font-size-s));
font-style: normal;
font-weight: 500;
line-height: 16px;
@ -111,7 +111,7 @@ export class HaBadge extends LitElement {
color: var(--primary-text-color);
}
::slotted([slot="icon"]) {
--mdc-icon-size: var(--ha-icon-size-badge, 18px);
--mdc-icon-size: var(--ha-badge-icon-size, 18px);
color: var(--badge-color);
line-height: 0;
margin-left: -4px;