Sign Up for Free

RunKit +

Try any Node.js package right in your browser

This is a playground to test code. It runs a full Node.js environment and already has all of npm’s 1,000,000+ packages pre-installed, including @quasar/quasar-ui-qribbon with all npm packages installed. Try it out:

var quasarUiQribbon = require("@quasar/quasar-ui-qribbon")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

@quasar/quasar-ui-qribbon v1.0.0-beta.14

QRibbon - Quasar component

Component QRibbon

npm npm

Component QRibbon

Short description of the component

Usage

Quasar CLI project

Install the App Extension.

OR:

Create and register a boot file:

import Vue from 'vue'
import { QRibbon } from '@quasar/quasar-ui-qribbon'
import '@quasar/quasar-ui-qribbon/dist/index.css'

Vue.use(Plugin)

OR:

<style src="quasar-ui-qribbon/dist/index.css"></style>

<script>
import { QRibbon } from 'quasar-ui-qribbon'

export default {
  components: {
    QRibbon
  }
}
</script>

Vue CLI project

import Vue from 'vue'
import { QRibbon } from '@quasar/quasar-ui-qribbon'
import '@quasar/quasar-ui-qribbon/dist/index.css'

Vue.use(Plugin)

OR:

<style src="quasar-ui-qribbon/dist/index.css"></style>

<script>
import { QRibbon } from 'quasar-ui-qribbon'

export default {
  components: {
    QRibbon
  }
}
</script>

UMD variant

Exports window.QRibbon.

Add the following tag(s) after the Quasar ones:

<head>
  <!-- AFTER the Quasar stylesheet tags: -->
  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-qribbon/dist/index.min.css" rel="stylesheet" type="text/css">
</head>
<body>
  <!-- at end of body, AFTER Quasar script(s): -->
  <script src="https://cdn.jsdelivr.net/npm/quasar-ui-qribbon/dist/index.umd.min.js"></script>
</body>

If you need the RTL variant of the CSS, then go for the following (instead of the above stylesheet link):

<link href="https://cdn.jsdelivr.net/npm/quasar-ui-qribbon/dist/index.rtl.min.css" rel="stylesheet" type="text/css">

Setup

$ yarn

Developing

# start dev in SPA mode
$ yarn dev

# start dev in UMD mode
$ yarn dev:umd

# start dev in SSR mode
$ yarn dev:ssr

# start dev in Cordova iOS mode
$ yarn dev:ios

# start dev in Cordova Android mode
$ yarn dev:android

# start dev in Electron mode
$ yarn dev:electron

Building package

$ yarn build

Donate

If you appreciate the work that went into this, please consider donating to Quasar or Allan.

License

MIT (c) Allan Gaunt allan@quasar.dev

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free