Title For Button Bar

[cynderkromi]

I have some button bars and I would like to put a title on top to separate the bars, and also to make them look nice. I’m not sure how to do this, or even what tags to search for.

This is what my home page looks like, and as you can see I would like the text to look like the button bars. How would I format this? Am I over thinking it, and it’s just basic CSS or can I use some Quasar tags? Thanks!

[beets]

@cynderkromi You’re overthinking it https://codepen.io/pianopronto/pen/QWKmrmV?editors=101

[Ilia]

@cynderkromi If you want to make them uppercase, just use this on your separating Title: class=“text-uppercase text-weight-medium”

[cynderkromi]

Thanks for the replies. I would like the text to appear like a button… so it’s the exact same shape and color. Which makes me think, maybe I just need a button with no actions…

[beets]

@cynderkromi Ah, I misunderstood. You could try this: https://codepen.io/pianopronto/pen/QWKmrmV?editors=101

What I did was simply copy the generated HTML from chrome devtools and modify it a bit. Here’s the html from the pen:

<div class="q-btn q-btn-item non-selectable no-outline q-btn--push q-btn--rectangle bg-amber text-black q-btn--wrap glossy">
  <span class="q-btn__wrapper col row q-anchor--skip">
    <span class="q-btn__content text-center col items-center q-anchor--skip justify-center row">
      <span class="block">Pre-Event Setup</span>
    </span>
  </span>
</div>

Just change bg-amber text-black to bg-primary text-white perhaps. You could also probably use an actual q-btn, but it would be a bit confusing that a label is clickable.

[cynderkromi]

@beets Great idea! Thanks! Yeah having the headers be clickable would be awkward.