question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

<b-card>: difficult to use header slot

See original GitHub issue

I’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 😃

jsFiddle

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Comments:9 (9 by maintainers)

github_iconTop GitHub Comments

1reaction
alexsasharegancommented, May 29, 2017

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!

0reactions
tmorehousecommented, May 29, 2017

I’ll create a PR that switches to looking for the header and/or footer slots

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found