No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Title For Button Bar

    Help
    3
    6
    23
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • C
      cynderkromi last edited by

      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!

      Screen Shot 2021-01-03 at 9.39.27 AM.png

      beets I 2 Replies Last reply Reply Quote 0
      • beets
        beets @cynderkromi last edited by

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

        1 Reply Last reply Reply Quote 0
        • I
          Ilia @cynderkromi last edited by Ilia

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

          1 Reply Last reply Reply Quote 0
          • C
            cynderkromi last edited by

            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 1 Reply Last reply Reply Quote 0
            • beets
              beets @cynderkromi last edited by 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.

              C 1 Reply Last reply Reply Quote 0
              • C
                cynderkromi @beets last edited by

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

                1 Reply Last reply Reply Quote 0
                • First post
                  Last post