diff --git a/README.md b/README.md index 0f1cd56..ad31ee9 100644 --- a/README.md +++ b/README.md @@ -40,17 +40,19 @@ resources: | ---- | ------ | ------------ | -------------------------- | | type | string | **Required** | `custom:text-divider-row` | | text | string | **Required** | Text to display in divider | +| align | string | Optional | Specifies the text alignment. Must be: 'left', 'center' or 'right' | ## Theme Variables The following variables are available and can be set in your theme to change the appearance of the lock. Can be specified by color name, hexadecimal, rgb, rgba, hsl, hsla, basically anything supported by CSS. -| name | Default | Description | -| ------------------------ | ---------------------- | ------------- | -| `text-divider-color` | `secondary-text-color` | Divider color | -| `text-divider-font-size` | `14px` | Font size | -| `text-divider-line-size` | `1px` | Line size | +| name | Default | Description | +| ------------------------ | ---------------------- | -------------- | +| `text-divider-color` | `secondary-text-color` | Divider color | +| `text-divider-font-size` | `14px` | Font size | +| `text-divider-line-size` | `1px` | Line size | +| `text-divider-margin` | `1em 0` | Divider margin | ## [Troubleshooting](https://github.com/thomasloven/hass-config/wiki/Lovelace-Plugins) diff --git a/src/const.ts b/src/const.ts index 211ecfe..7aea969 100644 --- a/src/const.ts +++ b/src/const.ts @@ -1 +1 @@ -export const CARD_VERSION = '1.4.0'; +export const CARD_VERSION = '1.4.1'; diff --git a/src/text-divider-row.ts b/src/text-divider-row.ts index 9f30b1e..1ccab52 100755 --- a/src/text-divider-row.ts +++ b/src/text-divider-row.ts @@ -21,13 +21,27 @@ class TextDividerRow extends LitElement { this._config = config; } + protected getClass(): string { + const allowedValues = ['center', 'left', 'right']; + if (this._config && this._config.align) { + if (allowedValues.includes(this._config.align)) { + return `text-divider text-divider-${this._config.align}`; + } + } + return 'text-divider text-divider-center'; + } + protected render(): TemplateResult | void { if (!this._config) { return html``; } return html` -