Block Vue Component

Block Components
Block Props
BlockTitle Props
BlockHeader Props
BlockFooter Props
Examples

Block Vue component represents Content Block element designed (mostly) to add extra formatting and required spacing for text content.

Block Components

There are following components included:

Block - main block element
BlockTitle - block title. Can be used before Block or List View
BlockHeader - extra header element. Can be used both inside and outside of block elements
BlockFooter - extra footer element. Can be used both inside and outside of block elements

Block Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.outlineIos	string	'border-black border-opacity-20 dark:border-white dark:border-opacity-15'
colors.outlineMaterial	string	'border-md-light-outline border-md-dark-outline'
colors.strongBgIos	string	`bg-ios-light-surface-1 dark:bg-ios-dark-surface-1'
colors.strongBgMaterial	string	'bg-md-light-surface-1 dark:bg-md-dark-surface-1'
colors.textIos	string	'''
colors.textMaterial	string	'text-md-light-on-surface dark:text-md-dark-on-surface'
component	string	'div'	Component's HTML Element
inset	boolean	undefined	Makes block inset. Overwrites `insetIos` and `insetMaterial` props
insetIos	boolean	false	Makes block inset in iOS theme
insetMaterial	boolean	false	Makes block inset in Material theme
margin	string	'my-8'	Tailwind CSS margin class
nested	boolean	false	Removes hairlines and margins, useful for case nesting block within other blocks
outline	boolean	undefined	Makes block outline. Overwrites `outlineIos` and `outlineMaterial` props
outlineIos	boolean	false	Makes block outline in iOS theme
outlineMaterial	boolean	false	Makes block outline in Material theme
padding	string	'py-4'	Tailwind CSS padding class
strong	boolean	undefined	Adds extra highlighting and padding block content. Overwrites `strongIos` and `strongMaterial` props
strongIos	boolean	false	Adds extra highlighting and padding block content in iOS theme
strongMaterial	boolean	false	Adds extra highlighting and padding block content in Material theme

BlockTitle Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.textIos	string	''
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
component	string	'div'	Component's HTML Element
large	boolean	false	Large sized block title
medium	boolean	false	Medium sized block title
withBlock	boolean	true	Useful to disable when there is no Block or List component right after the Block Title

BlockHeader Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.textIos	string	'text-black dark:text-white'
colors.textMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
component	string	'div'	Component's HTML Element
inset	boolean	undefined	Makes block header inset, overwrites `insetIos` and `insetMaterial`
insetIos	boolean	false	Makes block header inset in iOS theme
insetMaterial	boolean	false	Makes block header inset in Material theme

BlockFooter Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.textIos	string	'text-black text-opacity-75 dark:text-white dark:text-opacity-75'
colors.textMaterial	string	'text-md-light-on-surface-variant dark:text-md-dark-on-surface-variant'
component	string	'div'	Component's HTML Element
inset	boolean	undefined	Makes block footer inset, overwrites `insetIos` and `insetMaterial`
insetIos	boolean	false	Makes block footer inset in iOS theme
insetMaterial	boolean	false	Makes block footer inset in Material theme

Examples

ContentBlock.vue

<template>
  <k-page>
    <k-navbar title="Content Block" />

    <k-block-title>Block Title</k-block-title>
    <k-block>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>
    <k-block-title>Strong Block</k-block-title>
    <k-block strong>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>
    <k-block-title>Strong Outline Block</k-block-title>
    <k-block strong outline>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>

    <k-block-title>Strong Inset Block</k-block-title>
    <k-block strong inset>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>

    <k-block-title>Strong Inset Outline Block</k-block-title>
    <k-block strong inset outline>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>
    <k-block-title>With Header & Footer</k-block-title>
    <k-block-header>Header</k-block-header>
    <k-block strong outline>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>
    <k-block-footer>Footer</k-block-footer>
    <k-block-title medium>Medium Title</k-block-title>
    <k-block strong outline>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>
    <k-block-title large>Large Title</k-block-title>
    <k-block strong outline>
      <p>
        Donec et nulla auctor massa pharetra adipiscing ut sit amet sem.
        Suspendisse molestie velit vitae mattis tincidunt. Ut sit amet quam
        mollis, vulputate turpis vel, sagittis felis.
      </p>
    </k-block>
  </k-page>
</template>
<script>
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kBlock,
    kBlockFooter,
    kBlockHeader,
    kBlockTitle,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kBlock,
      kBlockFooter,
      kBlockHeader,
      kBlockTitle,
    },

  };
</script>