<template>
  <z-block>

    <div>
      <h3 class="text-medium text-heading">Fetter Text</h3>
      .text-heading

      <h3 class="text-medium text-heading q-mt-s40">Für Statische Grössen</h3>
      .text-[ {{ texts.join(' | ') }} ]
      <div v-for="(text, index) in texts" :key="index">
        <span :class="`text-${text}`">.text-{{ text }}</span>
        <div :class="`text-heading text-${text}`">.text-heading .text-{{ text }}</div>
      </div>

      <h3 class="text-medium text-heading q-mt-s40">Für skalierbare Grössen</h3>
      .text-curve[ {{ curves.join(' | ') }} ]
      <pre style="background:#EAA">
Muss enabled werden:
  quasar.conf.js ->
    framework: {
      config: {
        screen: {
          bodyClasses: true // &lt;&lt;&lt; add this
        }
      }
    }
      </pre>

      <h1 class="text-curveHuge q-mt-s40">Huge</h1>
      <p class="text-curveMedium">Medium</p>
      <codeblock>
        &lt;h1 class="text-curveHuge">Huge&lt;/h1>
        &lt;p class="text-curveMedium">Medium&lt;/p>
      </codeblock>
    </div>

    <div style="margin: 100px 0">
      <h1 class="text-heading text-curveHuge">Titel</h1>
      <codeblock>
        &lt;h1 class="text-heading text-curveHuge">Titel&lt;/h1>
      </codeblock>
    </div>

  </z-block>
</template>

<script>
// 
export default {
  name: 'dev-PageHeading',
  data () {
    return {
      curves: ['Huge', 'Big', 'Large', 'Medium', 'BiggerRegular', 'Regular', 'Small', 'Tiny'],
      texts: ['giant', 'huge', 'smallHuge', 'biggerBig', 'big', 'smallBig', 'large', 'medium', 'biggerRegular', 'regular', 'small', 'tiny']
    }
  },
  components: {
    'codeblock': () => import('../Codeblock.vue'),
    'z-block': () => import('../../atom/ZBlock.vue')
  }
}
</script>
