Quasar: Can not set text alignment of QBtn.

[snowyu]

It's always text center alignment.

<div class="row"'>
  <q-btn class="col flex-left">Some</q-btn>
  <q-btn class="col flex-left">Some Other</q-btn>
</div>
<div class="row"'>
  <q-btn class="col flex-left">Some An</q-btn>
  <q-btn class="col flex-left">Some</q-btn>
</div>

Replace the 'flex-left' to 'text-left' is the same.

I found the reason in QBtn.vue:

    <span class="q-btn-inner row col flex-center" >

Maybe add an alignment prop to align text.

<q-btn alignment="left">text alignment to left</q-btn>

[spectrolite]

https://material.io/guidelines/components/buttons.html#buttons-dropdown-buttons
Except for dropdown, all buttons have their text centered as per material guidelines.

But If you really want to left-align your button text, here’s how to do it:

 <q-btn flat style="width: 400px">
        <span class="full-width" style="text-align: start”>testing LTR left</span>
 </q-btn>

You’ll probably want to move that css to the style tag either as a new class, or with an appropriate selector.

[spectrolite]

<q-btn flat style="width: 400px">
        <span class="full-width text-left" >testing text left</span>
 </q-btn>

this should work too and is more immediately elegant, thanks @rstoenescu for all those helpers.
But it is less versatile in case u later need to add RTL support

[snowyu]

This should not be right way for the theme could be customized(not the material theme only).

[smolinari]

Currently Quasar follows only the iOS and Material design themes. Any other theming has to be done at your own risk, meaning, some things just might not work well or elegantly, as you'd like.

To me, this is another case of wanting Quasar to be "custom themable", as in adding totally customized designs in addition to iOS and Material. Currently, this simply isn't the aim of the project, But, I hope it will be in the future, so people can do any design they'd like and offer it (or even sell it) as a plug-in. I am absolutely certain that would open up a really big ecosystem behind Quasar, because it's a regular thing in the PHP world with software like Wordpress and popular forum software.

Scott

[spectrolite]

@snowyu if you want to customise the theme, as @smolinari said, at your won risk, I’d suggest making your own btn component (which includes those 2 classes to get to your desired result).

As for the “custom themable” topic, I have to agree with Scott. Quasar was created with other intentions: empower you to create user experiences that are coherent with todays users’ expectations, with a minimum of fuss and time wasted around theming and native guidelines issues, so you can focus most of your time on good UX and solid functionality (while having a great time writing sustainable, readable code).

[snowyu]

Ok, I've understand your way now. My thought is that all components are customized(abstract) enough, base on to build the MD theme or other theme.

[rstoenescu]

They are customizable, but cannot include all possible options that one can think of, obviously. Especially when they deviate from Material or iOS guidelines.

Will think of a possibility to ease theme creation for the community though.