v0.11.0

Block Vue Component

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

NameTypeDefaultDescription
colorsobject

Object with Tailwind CSS colors classes

colors.strongBgstring'bg-block-strong-light dark:bg-block-strong-dark'

Strong block bg color

componentstring'div'

Component's HTML Element

hairlinesbooleantrue

Renders outer hairlines (borders) when the block is strong

insetbooleanfalse

Makes block inset

marginstring'my-8'

Tailwind CSS margin class

nestedbooleanfalse

Removes hairlines and margins, useful for case nesting block within other blocks

strongbooleanfalse

Adds extra highlighting and padding block content

BlockTitle Props

NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

withBlockbooleantrue

Useful to disable when there is no Block or List component right after the Block Title

BlockHeader Props

NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

BlockFooter Props

NameTypeDefaultDescription
componentstring'div'

Component's HTML Element

Examples

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


    <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>Block Title</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>With Header & Footer</k-block-title>
    <k-block-header>Header</k-block-header>
    <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-footer>Footer</k-block-footer>
    <k-block-title class="text-2xl">Medium Title</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 class="text-3xl">Large Title</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>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-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>
Code licensed under MIT.
2022 © Konsta UI by nolimits4web.