Skip to content

Instantly share code, notes, and snippets.

@justinatack

justinatack/Quasar Framework Newsletter Subscription Form Component Example

Created April 17, 2019 06:27
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save justinatack/0141c4c98f1f16a544a9c433873a19f5 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save justinatack/0141c4c98f1f16a544a9c433873a19f5 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. justinatack created this gist Apr 17, 2019.
    37 changes: 37 additions & 0 deletions Quasar Framework Newsletter Subscription Form Component Example
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,37 @@
    <template>
    <q-page class="bg-grey-3 window-height window-width row justify-center items-center">
    <div class="column">
    <div class="row justify-center items-center">
    <h5 class="text-h5 text-grey-7">Newsletter Subscription</h5>
    </div>
    <div class="row">
    <q-card square bordered class="q-pa-lg shadow-3" style="width:360px;">
    <q-card-section>
    <q-form class="q-gutter-lg">
    <q-input square clearable v-model="email" type="text" label="Name" />
    <q-input square clearable v-model="email" type="email" label="Email" />
    </q-form>
    </q-card-section>
    <q-card-actions class="q-px-md q-py-lg">
    <q-btn unelevated color="primary" size="lg" class="full-width" label="Subscribe" />
    </q-card-actions>
    </q-card>
    </div>
    </div>
    </q-page>
    </template>

    <script>
    export default {
    name: 'NewsletterSubscription',
    data () {
    return {
    name: '',
    email: ''
    }
    }
    }
    </script>

    <style>
    </style>