Framework

• 

  Set entire app to Dark Theme?
  • Jezzta667  

  15
  1
  Votes
  15
  Posts
  2887
  Views

  V

  Just use Quasar.Conf.Js file. Go to the framework section. Then, inside, find the section named config. If there is no such section create it inside framework section. Then inside of it write dark: true. That’s it.
• Q

  Icon custom mapping color not working
  • Quasarman  

  1
  0
  Votes
  1
  Posts
  13
  Views

  No one has replied

• D

  Does quasar come with any Sytlus Mixins available/documented (e.g. for Breakpoints)?
  • dgk  

  5
  0
  Votes
  5
  Posts
  152
  Views

  F

  @s-molinari the question kind of remains, (how) can the predefined quasar classes be used as a mixin in other stylus classes (through the use of @extend for example)? https://stylus-lang.com/docs/extend.html something like this does not currently work (?): .test { @extend .col-6, .q-pa-md; } it would be nice to be able to just reuse the given classes instead of writing the style again with the variables. related -> https://github.com/quasarframework/quasar/issues/2131
• K

  Q-table SASS for a specific file
  • keechan  

  2
  0
  Votes
  2
  Posts
  9
  Views

  J

  I guess you can use vue scoped css. https://vue-loader.vuejs.org/guide/scoped-css.html
• A

  Table slots disappear when grid mode
  • awipf  

  4
  0
  Votes
  4
  Posts
  26
  Views

  A

  If anyone is interested this is how i solved it… Also i’m new to Vue.js and Quasar so please give input if there are ways to improve this. I created a component that houses the mobile view where i copied the Quasar design except for my buttons (v-else) <template v-slot:item="props"> <div class="q-pa-xs col-xs-12 col-sm-6 col-md-4 col-lg-3 grid-style-transition" :style="props.selected ? 'transform: scale(0.95);' : ''" > <q-card :class="props.selected ? 'bg-grey-2' : ''"> <q-card-section> <q-checkbox dense v-model="props.selected" :label="props.row.name" /> </q-card-section> <q-separator /> <q-list dense> <q-item v-for="col in props.cols.filter(col => col.name !== 'desc')" :key="col.name" > <div class="q-table__grid-item-row"> <div class="q-table__grid-item-title">{{ col.label }}</div> <div class="q-table__grid-item-value" v-if="col.label != 'edit'"> {{ col.value }} </div> <div v-else> <alert-edit-delete :alertId="props.row.id" @handleDelete="handleDelete" /> </div> </div> </q-item> </q-list> </q-card> </div> </template> <script> export default { props: ["props"], components: { "alert-edit-delete": require("components/alert/AlertEditDelete.vue").default }, methods: { handleDelete(id) { this.$emit('handleDelete',id); }, } }; </script> The buttons are also a component <template> <div class="order-first"> <q-btn @click.stop="" flat round dense color="primary" icon="edit" class="q-mr-sm" /> <q-btn @click.stop="handleDelete(alertId)" flat round dense color="red" icon="delete" /> </div> </template> <script> export default { props: ["alertId"], methods: { handleDelete(id) { this.$emit('handleDelete',id); }, } }; </script> In the table component I import the mobile list <template v-slot:item="props"> <mobile-alert-list :props="props" @handleDelete="promptToDelete" /> </template>
• A

  Quasar without the router
  • Arto  

  3
  0
  Votes
  3
  Posts
  77
  Views

  C

  I agree - there should be an option to not use router.
• O

  Combine q-select and q-cards
  • omgwalt  

  4
  0
  Votes
  4
  Posts
  30
  Views

  O

  Thanks guys. I checked out both of your suggestions! @eurus-pro I really like what you shared. It matches what I had in mind very, very well. I especially like that first solution a lot! Thank you again!
• J

  noRouteDismiss don't work when using QDialog as a plugin
  • jraez  

  1
  0
  Votes
  1
  Posts
  6
  Views

  No one has replied

• T

  QFile behavior when canceling the Open File Dialog
  • tdumitr  

  2
  0
  Votes
  2
  Posts
  8
  Views

  T

  Hi @tdumitr, Not sure this is possible out of the box. This behavior is the same with a classic <input type="file"> What you can do, but it’s more a hack than a solution, is to listen to @input event, and if the picked file is undefined, restore the previous picked: <q-file v-model="file" label="Pick one file" filled style="max-width: 300px" @input="filepicked" clearable ></q-file> ... data () { return { file: null, oldPickedFile: null } }, methods: { filepicked(file) { if (file !== void 0) { this.oldPickedFile = file } else { this.file = this.oldPickedFile } } } ... In action : https://codepen.io/cp-tof06/pen/KKpbKeL I suggest to add clearable prop to q-file, allowing the user to clear the field, since cancel won’t do it anymore
• T

  New control request
  • tdumitr  

  3
  0
  Votes
  3
  Posts
  17
  Views

  T

  I take that back. While the visual appearance suggests selecting a folder, in reality, the control’s value is either a file from the selected folder (I don’t know how it selects the file, but for the same folder it is consistently the same file), or, if the folder is empty, undefined. This makes it useless as a folder selection mechanism. Bottom line, my request is back.
• T

  Click and double-click event handling for QTree
  • tdumitr  

  3
  0
  Votes
  3
  Posts
  16
  Views

  T

  Scott, You’re right, given the way the QTree behaves, I might need to build my own with QList and QExpansionItem. Tibi.
• M

  How can I use QPageScroller with QScrollArea？
  • moxuanyuan  

  1
  0
  Votes
  1
  Posts
  5
  Views

  No one has replied

• M

  Tooltips don't show on disabled buttons
  • mbouclas  

  15
  0
  Votes
  15
  Posts
  1635
  Views

  

  If you wrap Qtooltip with QBtn, QBtn has no clue it’s there. Wrapping them both with a div takes it out of the QBtn, so the tooltip can work as it should. It’s not a trick, it is the solution. Scott
• 

  How can I get the selected files in the File Picker?
  • Pasquall  

  1
  0
  Votes
  1
  Posts
  10
  Views

  No one has replied

• P

  q-slide-item slot stays shown
  • plexus  

  3
  0
  Votes
  3
  Posts
  18
  Views

  P

  solved! I didn’t know key in v-for was that critical in the scope and I’ve always used the index as key. In my real project I’ve assigned the uid of the item and it worked like a charm! thanks!
• D

  Add color
  • dwms  

  4
  0
  Votes
  4
  Posts
  24
  Views

  T

  Explained here : https://quasar.dev/quasar-utils/color-utils#Create-Dynamic-Custom-Colors Create some classes in CSS (or SASS) with a default value : $col1 = #123456 :root --q-color-col1 $col1 .text-col1 color: $col1 !important color: var(--q-color-col1) !important .bg-col1 background: $col1 !important background: var(--q-color-col1) !important Then, you can use setBrand helper import { colors } from 'quasar' const { setBrand } = colors setBrand ('col1', '#FF0000')
• O

  Any guides for converting Vue scripts to Quasar?
  • omgwalt  

  11
  0
  Votes
  11
  Posts
  40
  Views

  O

  Okay, now I feel like a complete fool. I didn’t know that was there. Thanks!
• F

  How to config webpack config resolve extension in quasar config
  • floyd  

  2
  0
  Votes
  2
  Posts
  7
  Views

  

  If you are only looking for .vue and .js importing without the extension, it should work OOTB with Quasar. Anything else, you’d need the proper loader too, for instance for GraphQL files (.gql). Scott
• R

  Q-Select can't change text color
  • reath  

  12
  0
  Votes
  12
  Posts
  864
  Views

  A

  Thanks @s-molinari.
• K

  Make Q-popup-edit persistent to only allow one popup at a time
  • keechan  

  2
  0
  Votes
  2
  Posts
  11
  Views

  

  Unfortunately, that is just the way it works. If you want something like persistent but not able to click on other areas to get other popups, then you’ll need to work with QPopupProxy and make your own popup edit component. Scott