Quasar: Adding percentage next to the knob(circle graph) number ?

[mkantautas]

Is it possible to append a percent symbol % the the number value of this component http://quasar-framework.org/components/knob.html ?

[rstoenescu]

Use placeholder. Example from demo source:

<!-- With custom placeholder -->
<q-knob
  v-model="model"
  :min="min"
  :max="max"
  :placeholder="'$ ' + model"
></q-knob>

In your case: :placeholder="model + ' %'"

[mkantautas]

Great, thanks !

[mkantautas]

@rstoenescu Um, the documentation is wrong on this

<!-- With custom placeholder -->
<q-knob
  v-model="model"
  :min="min"
  :max="max"
  :placeholder="'$ ' + model"
></q-knob>

^Doesn't work. But this works:

<!-- With custom placeholder -->
<q-knob
  v-model="model"
  :min="min"
  :max="max"
>
  {{model}} %
</q-knob>

Find this out, by looking to your source code examples where you are also using {{model}} % approach .
https://github.com/quasarframework/quasar-play/blob/master/src/components/showcase/forms/knob.vue

[rstoenescu]

Ah, sorry, gave out the v0.15 way :)

[raxor123]

The v0.15 documentation still doesnt have the update

[wwwizzarrdry]

The v1.0 documentation doesn't mention anything about a placeholder prop. Glad I found this thread.

[smolinari]

@wwwizzarrdry - That's because it's now done over the default slot with the show-value prop.

https://quasar.dev/vue-components/knob#Example--Show-value

Scott