Can't give style to buttons. Wanna make special button.



  • HI RAZVAN, STAFF AND EVERYONE WHO ARE READING THIS.

    RAZVAN AND STAFF PLEASE TRY TO READ THIS TOPIC/ISSUE CAREFULLY AND COMPLETELY.

    I WAIT FOR YOUR RESPONSE. I THINK THE RESPONSE WILL NOT BE LIKE KID’S ANSWERS. TAKE THIS SERIOUSLY.

    Untitled-1.png
    Now I wanna create the a button that looks like in the picture.
    So, I write “q-btn” element and inside it I make a div with a text. After the the text div, I write “q-icon” and give its name value as “arrow_right_alt”.
    Then open the website to look how it it is looking. It was looking like this.
    Capture.PNG
    I found the “.q-btn__wrapper” class using devtool. And it was giving some padding values “0 0 0 16px”. So then, I tried to overwrite its value with “!important” helper in my css. But the style was not influencing it when I opened it.
    Then I saw a navigation link next to the class name in the devtool. When I pressed it, it showed me some styles of Quasar in “node_modules/quasar/quasar.css” .

    .q-btn {
      display: inline-flex;
      flex-direction: column;
      align-items: stretch;
      position: relative;
      outline: 0;
      border: 0;
      vertical-align: middle;
      padding: 0;
      font-size: $button-font-size;
      line-height: $button-line-height;
      text-decoration: none;
      color: inherit;
      background: transparent;
      font-weight: $button-font-weight;
      text-transform: uppercase;
      text-align: center;
      width: fit-content;
      .q-icon, .q-spinner {
        font-size: $button-line-height; }
      &.disabled {
        opacity: .7 !important; }
      &__wrapper {
        padding: $button-padding;
        min-height: 2.572em;
        border-radius: inherit;
        width: 100%;
        height: 100%;
    }
    

    When I saw it I began to search. Because some sizes were given with sass variables to it. Then I find “$btn-padding” variable declared at the top of the quasar.css file. Then its values were “4px 16px”. I tried to overwrite it with “!important” but not worked. Because the “!default” helper was written after the above “4px 16px” values. So I am not managed to overwrite it.

    I can edit the quasar.css in node modules. And it compiles it correctly. But not only I am editing the project, we are a team. I think while pushing with git, It ignores the node_modules and more files.

    PLEASE HELP ME TO SOLVE IT OR PLEASE CREATA A BUTTON LIKE THAT IN THESE DAYS.

    If I want to share the node_modules with them you know the project size on “GitLab” will become heavy. I can add the scoped in the style tag. But it doesn’t worked. If I remove it it is changing other buttons too. And there will be some problems. For instance, other buttons will become more unresponsive like in this picture.
    |
    |
    |
    Picture shot when the scoped is in the style tag.
    NOTE:Look the button in the card and buttons on the bottom of carousel.

    47b3e385-5b6e-4dc8-adea-9ea37a9158c2-image.png
    |
    |
    And this is the state of buttons when I remove the scoped.

    7b4c9bb5-4ca5-45bc-829f-57fd0fb6399d-image.png
    |
    |
    |
    Look the button in the card and the buttons in the bottom of the carousel.

    And there is some issues with making buttons squared. Even I add the squared property to my it only reduces some pixels of border-radius. I had to edit some classes by searching in the devtool.

    PLEASE FIX THE PROBLEMS OR CREATE COMPONENT LIKE THAT. AND PLEASE ADD MULTIPLE ITEM ON ONE SLIDE CAROSEL, TOO, IN ORDER NOT TO USE ANOTHER LIBRARIES LIKE VUE-AWESOME_SWIPER. THANK YOU FOR READING CAREFULLY.



  • @VIncent-Lucifer what’s with the caps? anyway use qbtngroup https://codepen.io/metalsadman/pen/LYEWRoP.



  • No! I can’t use q-btn-group here. Do you think I haven’t tried? I tried to ask on Discord. I search google. Write the people who knows Quasar well.
    But no Answer. No, I tried over two or three hundred times. I am trying to make the result for over a month. I search, I tried, but no result. Before writing on forum, I thought so many times.

    So why we or the users can’t be able to do, use this feature? Why I said “Not a q-btn-group”? Because the ripple effect should be on a button not two. The ripple effect should happen, animate on a button.
    Then in a button there should be two colors! One is for text and the second is for icon.
    I am not asking two hard thing, Just Razvan or staff should add the new button, the new feature.
    Think, Does it hard? Think does it bad for them. No this will be the revolution.
    This will be a great development, a great upgrade.
    Did you understand me? This is the thing I wanted.
    And I wish only the best things for Quasar team and creator, so to the users, too.

    Thank you very much. But even now my question has no the right answer!



  • @VIncent-Lucifer over a month for a button? you can do it with css, see the updated pen.



  • Yes, Even I devoted myself to quasar. I will make it myself (but need instructions) or I will try to persuade them to make this.
    I love quasar so much you can’t think of it. I want the Quasar will be a framework which it has all pro features.
    And If I can contribute a little to the development of quasar, I think it’s the greatest happiness for me.

    @metalsadman Just No! if I add CSS then the button is not working when I make mobile app.
    Oh, I saw your upgraded pen. Thank you for upgrading it.
    The code which you gave me is working but not on mobile app.
    So we should find the way quickly. And say Razvan: “Make it even more comfortable by adding such kind of components. And add the new features in the new release of quasar”.



  • @VIncent-Lucifer you can issue a feature request for it in gh repo, explaining the details above.



  • Where I can find GH Repo.



  • This is the repository (GH Repo). https://github.com/quasarframework/quasar

    Scott



  • Thank you!



  • Scott, I want to donate you 10$ monthly during 2 years. Will you help me to create some of my components? I send you pics you send me code. What do you say?



  • Um. Nope. Sorry, No thank you.

    Scott


  • Admin

    @VIncent-Lucifer You are being rude and manipulative into making others do your job. Reading your initial description with the caps and the “take this seriously” statement is quite… funny. Do you understand how open-source works? Regardless, here is your button and I want this thread closed. https://codepen.io/rstoenescu/pen/jOEBzLN Btw, thanks for using Quasar, not donating anything, and strongly demanding a lot. That will sure help Quasar get even better and drive the whole team to work on your behalf without worrying about their bills.


Log in to reply