Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div id="q-app">
  <q-layout view="hHh lpR fFf">

    <q-header elevated class="bg-primary text-white">
      <q-toolbar>
        <q-btn dense flat round icon="menu" @click="left = !left"></q-btn>

        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-page-container>
      <q-page class="row no-wrap">
        <div class="col q-ma-md bg-grey">
          ... some components
        </div>
        <div class="col-8 q-ma-md bg-pink-2">
          <div class="column full-height">
            <div class="col-auto bg-green-3 q-ma-md">
              <q-btn-dropdown class="full-width" label="Dropdown Button">
                ...
              </q-btn-dropdown>
            </div>
            <q-scroll-area class="col q-pa-sm bg-blue-3" visible>
              <div style="" id="source-code">
                <p>
                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Orci ac auctor augue mauris augue neque gravida. Odio facilisis mauris sit amet massa vitae tortor condimentum. Ornare suspendisse sed nisi lacus. Fames ac turpis egestas maecenas pharetra convallis posuere. Adipiscing bibendum est ultricies integer quis. Commodo nulla facilisi nullam vehicula ipsum a arcu. Interdum varius sit amet mattis vulputate enim. Ac tincidunt vitae semper quis lectus nulla at volutpat. Enim blandit volutpat maecenas volutpat. Sed enim ut sem viverra aliquet eget sit. Bibendum neque egestas congue quisque egestas diam in arcu cursus. Velit ut tortor pretium viverra suspendisse.</p>
                <p>
                  Eget est lorem ipsum dolor. Sed ullamcorper morbi tincidunt ornare massa eget egestas. Purus in mollis nunc sed id semper. Id aliquet risus feugiat in ante metus dictum at. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat. Sed viverra ipsum nunc aliquet. Aliquam faucibus purus in massa tempor. Venenatis urna cursus eget nunc scelerisque viverra mauris in aliquam. Nisi scelerisque eu ultrices vitae auctor. Euismod nisi porta lorem mollis aliquam ut porttitor. Faucibus turpis in eu mi. Lectus quam id leo in vitae turpis.
                </p>
                <p>
                  Cursus sit amet dictum sit amet. Dolor sit amet consectetur adipiscing elit pellentesque habitant morbi tristique. Ultricies tristique nulla aliquet enim tortor. Lobortis scelerisque fermentum dui faucibus in ornare quam viverra orci. Iaculis at erat pellentesque adipiscing commodo elit at. Justo eget magna fermentum iaculis eu non diam phasellus vestibulum. Tristique et egestas quis ipsum suspendisse ultrices. Ultricies leo integer malesuada nunc vel. Gravida in fermentum et sollicitudin. Commodo elit at imperdiet dui. Fermentum dui faucibus in ornare quam viverra orci sagittis. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Nullam eget felis eget nunc lobortis mattis. Sed vulputate odio ut enim blandit volutpat maecenas volutpat. A lacus vestibulum sed arcu non.
                </p>
                <p>
                  Nulla facilisi etiam dignissim diam quis enim lobortis scelerisque. Lectus sit amet est placerat in egestas erat imperdiet. Augue interdum velit euismod in pellentesque. Tempor orci eu lobortis elementum nibh tellus molestie nunc non. Ipsum a arcu cursus vitae congue mauris rhoncus aenean. Felis eget nunc lobortis mattis. Urna porttitor rhoncus dolor purus non. Et netus et malesuada fames ac. Aliquet nec ullamcorper sit amet risus nullam eget. Curabitur gravida arcu ac tortor. Tortor posuere ac ut consequat semper. Laoreet non curabitur gravida arcu. Volutpat est velit egestas dui id. Dui faucibus in ornare quam.
                </p>
                <p>
                  Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Auctor elit sed vulputate mi sit amet mauris commodo quis. Sagittis eu volutpat odio facilisis mauris sit amet massa vitae. Neque aliquam vestibulum morbi blandit cursus risus at ultrices mi. Viverra aliquet eget sit amet. Lacus viverra vitae congue eu. Diam maecenas ultricies mi eget mauris. In mollis nunc sed id semper risus. Varius sit amet mattis vulputate enim. Urna molestie at elementum eu.
                </p>
                <p>
                  Non tellus orci ac auctor augue mauris augue. Magna ac placerat vestibulum lectus mauris ultrices eros in cursus. Id aliquet lectus proin nibh nisl condimentum id. Et magnis dis parturient montes nascetur ridiculus mus mauris. Odio ut enim blandit volutpat maecenas. Nisl rhoncus mattis rhoncus urna neque viverra justo nec. Mauris cursus mattis molestie a. Aenean et tortor at risus viverra adipiscing at in. Turpis nunc eget lorem dolor sed. Purus semper eget duis at tellus at urna condimentum mattis.
                </p>
                Sed viverra ipsum nunc aliquet bibendum enim facilisis gravida. Consectetur lorem donec massa sapien. Risus nec feugiat in fermentum posuere urna nec. Quisque non tellus orci ac auctor augue. Vestibulum lorem sed risus ultricies tristique nulla aliquet enim. A cras semper auctor neque vitae. Porta non pulvinar neque laoreet suspendisse interdum. Sagittis id consectetur purus ut faucibus pulvinar elementum integer enim. Suspendisse sed nisi lacus sed. Sed blandit libero volutpat sed cras ornare. Tristique senectus et netus et malesuada fames ac turpis egestas. Aliquam eleifend mi in nulla posuere sollicitudin. Eget arcu dictum varius duis at consectetur lorem. Turpis massa sed elementum tempus egestas sed sed risus pretium. Faucibus turpis in eu mi bibendum neque egestas congue quisque. Sit amet mauris commodo quis imperdiet massa tincidunt nunc. Eget nunc scelerisque viverra mauris in aliquam. Massa tincidunt dui ut ornare lectus sit amet est. Est ultricies integer quis auctor. Netus et malesuada fames ac.
                </p>
                <p>
                  Mi bibendum neque egestas congue. Donec enim diam vulputate ut pharetra sit. Morbi tincidunt ornare massa eget egestas purus viverra accumsan in. Nisl rhoncus mattis rhoncus urna neque viverra justo. Nec feugiat nisl pretium fusce id velit. Vulputate dignissim suspendisse in est ante in. Neque convallis a cras semper auctor. Viverra maecenas accumsan lacus vel facilisis volutpat est. Viverra aliquet eget sit amet. Vitae proin sagittis nisl rhoncus mattis rhoncus urna neque viverra. Varius sit amet mattis vulputate. Viverra accumsan in nisl nisi scelerisque. At quis risus sed vulputate. Donec ultrices tincidunt arcu non.
                </p>
                Egestas sed sed risus pretium quam vulputate dignissim suspendisse. Eleifend quam adipiscing vitae proin sagittis. Mauris vitae ultricies leo integer malesuada nunc vel. In nulla posuere sollicitudin aliquam ultrices sagittis orci a. Vestibulum sed arcu non odio euismod lacinia at quis risus. Erat pellentesque adipiscing commodo elit at imperdiet dui accumsan. Vel orci porta non pulvinar neque laoreet. Pretium nibh ipsum consequat nisl vel pretium lectus quam. Id diam vel quam elementum pulvinar etiam non quam. Ornare quam viverra orci sagittis. Bibendum ut tristique et egestas quis ipsum suspendisse. Tincidunt ornare massa eget egestas purus viverra. Arcu non sodales neque sodales ut etiam. Ipsum nunc aliquet bibendum enim facilisis gravida.
                </p>
                <p>
                  Placerat in egestas erat imperdiet sed euismod. Convallis tellus id interdum velit. Non arcu risus quis varius quam. Sodales ut etiam sit amet nisl purus. Mi tempus imperdiet nulla malesuada pellentesque. Metus dictum at tempor commodo ullamcorper a lacus vestibulum sed. Vitae ultricies leo integer malesuada nunc. Amet facilisis magna etiam tempor orci eu lobortis elementum. Amet mattis vulputate enim nulla aliquet porttitor lacus luctus. Non sodales neque sodales ut. Dapibus ultrices in iaculis nunc sed augue.
                </p>
              </div>
            </q-scroll-area>
          </div>
        </div>
      </q-page>
    </q-page-container>

    <q-footer elevated class="bg-grey-8 text-white">
      <q-toolbar>
        <q-toolbar-title>
          <q-avatar>
            <img src="https://cdn.quasar.dev/logo/svg/quasar-logo.svg">
          </q-avatar>
          Title
        </q-toolbar-title>
      </q-toolbar>
    </q-footer>

  </q-layout>
  </template>
</div>
              
            
!

CSS

              
                
              
            
!

JS

              
                new Vue({
  el: '#q-app',
  data: function () {
    return {
      version: Quasar.version,
       left: false
    }
  },
  methods: {
  	notify: function () {
      this.$q.notify('Running on Quasar v' + this.$q.version)
    }
	}
})
              
            
!
999px

Console