Bubble Card 2 - The One?

If you missed it, you can take a look at the 2.0.0-beta.1 (huge) full changelog here.

Version 2.0.0-beta.7

Hi!

This new beta is a major one. I've finally added the full support of the new section view! And I can now say that this is my recommended way to start with Bubble Card, I just love it! I've also added a new large layout for most of the cards to fit this new view type, but also a new large one where you can have two rows of sub-buttons!

Also, I've finally redesigned my dashboard to be 100% Bubble Card (except for the Frigate card, so let's say 99%). Here is what you can achieve now with this new release in the new section view:

My next big step is to finish the new documentation (WIP), and I'm planning to add a lot of advanced examples to customize Bubble Card! We are getting closer!

I can't wait for your feedback as always!

💡 New features

• Section support and new layouts: You can now change the layout to make the cards bigger to fit the new Home Assistant section view. In YAML, you have access to card_layout: large and card_layout: large_2_rows if you want 2 rows of sub-buttons. These layouts are also working on the other view types.

• Section column and rows support: In YAML, you can change that with columns: 2 and rows: 1 for example. Thank you again @brunosabot for that part!

• Sub-button custom icon template: You can now change the sub-buttons icons with a template. Here is an example of a template that changes the icon of the third sub-button (0 is 1) based on an entity state: ${subButtonIcon[2].setAttribute("icon", hass.states['mower.garden'].state === 'error' ? 'mdi:alert' : 'mdi:robot-mower')}, try that in the custom styles editor.

• Custom weather icon template: You can also get the weather icon based on a weather entity or any sensor that returns the weather condition, like sunny will return mdi:weather-sunny. This is helpful to make a weather card based on a state button for example. Here is how you can do that: ${subButtonIcon[2].setAttribute("icon", getWeatherIcon(hass.states['weather.home'].state))}

✔️ Bug fixes and optimizations

• Fixed the pop-up close on click feature
• Fixed the issues with the sub-buttons tap actions
• Fixed a lot of button and sub-buttons editor issues with the help of @brunosabot!
• Removed the possibility to set actions on a button when the button is a slider (this was not working together)
• Fixed a memory leak in the sub-buttons code
• The pop-ups are not taking space anymore when placed in a section view
• And fixed a lot more!

Well, again... and again... fingers crossed 🤞