mirror of
https://github.com/home-assistant/developers.home-assistant.git
synced 2025-08-13 19:29:20 +00:00
.devcontainer
.github
.vscode
blog
docs
add-ons
api
core
documenting
frontend
custom-ui
extending
adding-more-info-dialogs.md
adding-state-card.md
websocket-api.md
architecture.md
data.md
development.md
external-authentication.md
external-bus.md
internationalization
operating-system
supervisor
add-ons.md
api_lib_auth.md
api_lib_data_models.md
api_lib_index.md
architecture_components.md
architecture_index.md
area_registry_index.md
asyncio_101.md
asyncio_categorizing_functions.md
asyncio_index.md
asyncio_working_with_async.md
auth_api.md
auth_auth_module.md
auth_auth_provider.md
auth_index.md
auth_permissions.md
config_entries_config_flow_handler.md
config_entries_index.md
config_entries_options_flow_handler.md
configuration_yaml_index.md
creating_component_code_review.md
creating_component_deps_and_reqs.md
creating_component_generic_discovery.md
creating_component_index.md
creating_integration_file_structure.md
creating_integration_manifest.md
creating_platform_code_review.md
creating_platform_example_light.md
creating_platform_example_sensor.md
creating_platform_index.md
data_entry_flow_index.md
dev_101_config.md
dev_101_events.md
dev_101_hass.md
dev_101_index.md
dev_101_services.md
dev_101_states.md
development_catching_up.md
development_checklist.md
development_environment.md
development_guidelines.md
development_index.md
development_submitting.md
development_testing.md
development_typing.md
development_validation.md
device_automation_action.md
device_automation_condition.md
device_automation_index.md
device_automation_trigger.md
device_registry_index.md
documenting.md
entity_registry_disabled_by.md
entity_registry_index.md
frontend.md
instance_url.md
integration_events.md
integration_fetching_data.md
integration_quality_scale_index.md
intent_builtin.md
intent_conversation.md
intent_firing.md
intent_handling.md
intent_index.md
internationalization.md
maintenance.md
misc.md
operating-system.md
reproduce_state_index.md
significant_change_index.md
supervisor.md
translations.md
script
src
static
.gitignore
.npmrc
.nvmrc
LICENSE.md
README.md
docusaurus.config.js
netlify.toml
package.json
sidebars.js
yarn.lock
22 lines
1.5 KiB
Markdown
22 lines
1.5 KiB
Markdown
---
|
|
title: "Adding state card"
|
|
---
|
|
|
|
The main interface of Home Assistant is a list of the current entities and their states. For each entity in the system, a state card will be rendered. State cards will show an icon, the name of the entity, when the state has last changed and the current state or a control to interact with it.
|
|
|
|
|
|
|
|
The different card types can be found [here](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary).
|
|
|
|
Sensors, when not grouped, are shown as so-called badges on top of the state cards.
|
|
|
|
|
|
|
|
The different badges are located in the file [`/src/components/entity/ha-state-label-badge.ts`](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/components/entity/ha-state-label-badge.ts).
|
|
|
|
Adding a custom card type can be done with a few simple steps. For this example we will add a new state card for the domain `camera`:
|
|
|
|
1. Add `'camera'` to the array `DOMAINS_WITH_CARD` in the file [/common/const.ts](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/common/const.ts).
|
|
2. Create the files `state-card-camera.js` in the folder [/state-summary/](https://github.com/home-assistant/home-assistant-polymer/tree/master/src/state-summary).
|
|
3. Add `import './state-card-camera.js';` to [state-card-content.js](https://github.com/home-assistant/home-assistant-polymer/blob/master/src/state-summary/state-card-content.js).
|