No More Posting New Topics!

If you have a question or an issue, please start a thread in our Github Discussions Forum.
This forum is closed for new threads/ topics.

Navigation

    Quasar Framework

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search

    Make own component from Quasar component

    Framework
    7
    17
    8326
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • a47ae
      a47ae last edited by

      Thank you @spectrolite šŸ™‚
      If I have the time to, I can open up a new topic in the Show&Tell channel where I could post this and also elaborate on some other things like using Stylus variables.

      1 Reply Last reply Reply Quote 1
      • S
        spectrolite last edited by spectrolite

        @a47ae I’m sure @rstoenescu would greatly appreciate it, and most of it would probably end up in the docs at some point.
        Go for it !

        1 Reply Last reply Reply Quote 0
        • a47ae
          a47ae last edited by

          This is still work in progress and I will update this If I have time to, but this should be a good starting point:
          http://forum.quasar-framework.org/topic/696/how-to-building-components-with-quasar

          1 Reply Last reply Reply Quote 2
          • rstoenescu
            rstoenescu Admin last edited by

            @a47ae Let’s make a doc page with this! Want me to create one that you can edit?

            1 Reply Last reply Reply Quote 0
            • a47ae
              a47ae last edited by

              @rstoenescu I am really glad that all of you find this guide helpful and would love if this could be added as an official doc page.
              But I am on vacation until next week, so I do not have time to look into it, but maybe you could already take the existing post and next week I will update it and maybe rewrite some stuff. šŸ™‚

              1 Reply Last reply Reply Quote 0
              • rstoenescu
                rstoenescu Admin last edited by

                @a47ae enjoy your vacation! sure, please do ping me when you get back so we can get this in.

                1 Reply Last reply Reply Quote 0
                • a47ae
                  a47ae last edited by

                  Thanks šŸ™‚
                  Will write you as soon as I am back!

                  1 Reply Last reply Reply Quote 0
                  • L
                    losika last edited by

                    It works like a charm! Thank you very much.

                    1 Reply Last reply Reply Quote 0
                    • L
                      losika last edited by

                      I have to correct myself. I works when the parent component declared as single file component (like QSelect, QBtn, etc. you can see in source code). But if the parent component created in js file (like QList) then it does not work for me. What works is the following:

                      import { QList } from ā€˜quasar’

                      export default {
                      name: ā€˜m-list’,
                      mixins: [ QList ],
                      props: {
                      noBorder: { default: true },
                      separator: { default: true }
                      }
                      }

                      It there a better solution for that?

                      And another problem is with refs. a47ae’s solution does not work on QModal. First of all you have to copy methods without that it will complain on ā€˜open’ mehtods:

                      <template>
                      <q-modal noBackdropDismiss noEscDismiss v-bind:content-css="{width: ā€˜600px’, height: ā€˜800px’}"/>
                      </template>

                      <script>
                      import { QModal } from ā€˜quasar’

                      export default {
                      name: ā€˜m-modal’,
                      components: { QModal },
                      methods: Object.assign({}, QModal.methods)
                      }
                      </script>

                      But after that the problem is with $refs.content. The error is ā€œCannot set property ā€˜scrollTop’ of undefinedā€. You can see that in QModal’s setTimeout function there is a reference to this.$refs.content what returns undefined. Is there any way to copy refs?

                      1 Reply Last reply Reply Quote 0
                      • rstoenescu
                        rstoenescu Admin last edited by

                        @losika use a mixin instead of declaring QModal as component in your own wrapper.

                        1 Reply Last reply Reply Quote 0
                        • First post
                          Last post