mirror of
https://github.com/home-assistant/frontend.git
synced 2025-07-22 16:56:35 +00:00
Add ha-badge docs to gallery (#25218)
This commit is contained in:
parent
0242fbc6f8
commit
c111bf1062
@ -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"));
|
||||
|
65
gallery/src/pages/components/ha-badge.markdown
Normal file
65
gallery/src/pages/components/ha-badge.markdown
Normal 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`)
|
129
gallery/src/pages/components/ha-badge.ts
Normal file
129
gallery/src/pages/components/ha-badge.ts
Normal 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;
|
||||
}
|
||||
}
|
@ -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;
|
||||
|
Loading…
x
Reference in New Issue
Block a user