Labels of different sizes
-
Labels of different sizes
I’m using labels to illustrate quantity within items in a list. The problem is they are getting disproportionate.
How do I implement this in a more elegant way?
Thank you.
Note: Below is an illustration and part of the code.
<template> <div> <div slot="header" class="toolbar primary"> <quasar-search v-model="search" class="primary"></quasar-search> </div> <div class="layout-padding"> <div class="list item-delimiter" > <div class="item" v-for="esp in listaComFiltro"> <div class="item-content"> {{ esp.nome }} </div> <div class="item-secondary stamp"> <span class="label circular bg-primary text-white">{{ esp.total }}</span> </div> </div> </div> </div> </div> </template>
-
You need to set height and width for those labels through CSS to obtain a perfect round circle around it. Height and width must be identical.
-
Ok,
tks! -
Will try to enhance this so setting height and width will no longer be mandatory for perfect circle. Have an idea for the CSS already.
-
@rstoenescu Will you do any new implementation? It is?
-
No plan to do this on v0.9. Maybe on later releases.