1.1.1 • Published 2 years ago

quasar-ui-example-viewer v1.1.1

Weekly downloads
14
License
MIT
Repository
github
Last release
2 years ago

Component ExampleViewer

npm npm

Example Viewer

The Example Viewer component will show output of a Vue SFC (single file component). On the component's top toolbar, it has links to the Github repo, Codepen and View Sources.

example-viewer showing QCalendar (week view)

When View Sources is clicked, you will get tabs for each section of a Vue SFC (single file component) file. This also includes a "copy to clipboard" icon.

example-viewer showing QCalendar (week view)

example-viewer showing QCalendar (week view)

Dependencies

ExampleViewer has dependencies on @quasar/qmarkdown and @quasar/qribbon. Please install them into your Quasar project with the following:

quasar ext add @quasar/qmarkdown
quasar ext add @quasar/qribbon

If you use something other than the @quasar/cli, then install as appropriate for your system. You will need to install the UI compnent of these dependendies. They are @quasar/quasar-ui-qmarkdown and @quasar/quasar-ui-qribbon.

Usage

Quasar CLI project

Install the App Extension.

OR:

Create and register a boot file:

import Vue from 'vue'
import Plugin from 'quasar-ui-example-viewer'
import 'quasar-ui-example-viewer/dist/index.css'

Vue.use(Plugin)

OR:

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

<script>
import { ExampleViewer } from 'quasar-ui-example-viewer'

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

Vue CLI project

import Vue from 'vue'
import Plugin from 'quasar-ui-example-viewer'
import 'quasar-ui-example-viewer/dist/index.css'

Vue.use(Plugin)

OR:

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

<script>
import { ExampleViewer } from 'quasar-ui-example-viewer'

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

UMD variant

Exports window.ExampleViewer.

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

<head>
  <!-- AFTER the Quasar stylesheet tags: -->
  <link href="https://cdn.jsdelivr.net/npm/quasar-ui-example-viewer/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-example-viewer/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-example-viewer/dist/index.rtl.min.css" rel="stylesheet" type="text/css">

Donate

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

License

MIT (c) Jeff Galbraith jeff@quasar.dev

2.0.0-alpha.8

2 years ago

2.0.0-alpha.9

2 years ago

2.0.0-alpha.6

3 years ago

2.0.0-alpha.5

3 years ago

2.0.0-alpha.3

3 years ago

2.0.0-alpha.4

3 years ago

2.0.0-alpha.1

3 years ago

2.0.0-alpha.2

3 years ago

1.1.1

3 years ago

1.1.0

3 years ago

1.0.4

3 years ago

1.0.3

3 years ago

1.0.2

3 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.25

4 years ago

0.0.24

4 years ago

0.0.23

4 years ago

0.0.22

4 years ago

0.0.20

4 years ago

0.0.19

4 years ago

0.0.15

4 years ago

0.0.16

4 years ago

0.0.17

4 years ago

0.0.18

4 years ago

0.0.12

4 years ago

0.0.13

4 years ago

0.0.14

4 years ago

0.0.11

4 years ago

0.0.10

4 years ago

0.0.9

4 years ago

0.0.8

4 years ago

0.0.7

4 years ago

0.0.6

4 years ago

0.0.5

4 years ago

0.0.4

4 years ago

0.0.3

4 years ago

0.0.2

4 years ago

0.0.1

4 years ago