<b-card>: difficult to use header slot
See original GitHub issueI’m using the card component to create a header with a title and a button, so I want to use the header slot rather that inline too much html in the header prop attribute.
I’m finding the setup to be a little messy. Ideally, I would just be able to use the slot to add more complex markup and be done. I don’t mind passing a boolean in for the header to register though, but requiring a string makes it a little awkward. I believe Vue lets you union prop types, so perhaps you could switch this up to [String, Boolean]
.
I’ll include a fiddle to look at. I don’t believe you can see the prop validation warnings in the fiddle, but while I’m developing in strict mode, they are quite glaring 😃
Issue Analytics
- State:
- Created 6 years ago
- Comments:9 (9 by maintainers)
Top Results From Across the Web
Card | Components
A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background...
Read more >Card
The header slot is a container that spans the full width of the card and allows for custom header layouts. A default layout...
Read more >Header slot components configuration not reflecting in ...
So for your case, please put slot configuration under lg(large screen) break point, as code below. ConfigModule.
Read more >Can I place the icon in front of the lightning-card header?
You can use slot="title" to define a custom title section. See this example from the documentation <template> <lightning-card> <h3 ...
Read more >A comprehensive guide to Svelte components with slots
Take a deep dive into Svelte components with slots by learning how they ... Say we want to create a card header slot...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Up in the mountains this weekend, so spotty internet. The
show-header
prop works well! I do think that ideally utilizing the header/footer slot triggers the show.I meant slot!
I’ll create a PR that switches to looking for the header and/or footer slots