# k-pop

k-pop is a simple, yet powerful, popover component for Vue.

# Getting Started

Import k-pop along with one of the themes.

<link
  rel="stylesheet"
  href="https://unpkg.com/@ckienle/k-pop/themes/clean.css">
<script src="https://unpkg.com/@ckienle/k-pop"></script>

Then you can use it like this:

<script>
  new Vue({
    template: `
      <div style="padding: 3rem;">
        <k-pop theme="clean" placement="right">
          <button slot="trigger">Show</button>
          Hello From k-pop
        </k-pop>
      </div>
    `}).$mount("#app")
</script>

You can also install and use k-pop via npm:

$ npm install @ckienle/k-pop --save

You can the use k-pop like this:

import Vue from "vue"
import KPop from "@ckienle/k-pop"
Vue.use(KPop);
// …

You can include themes like so:

// if this does not work try the next import-statement
import "~@ckienle/k-pop/themes/clean.css"

import "./../node_modules/@ckienle/k-pop/themes/clean.css"
//      ^^^^^ make sure to adjust the path to make it fit your layout

# Playground

# Usage Notes

Using k-pop is straight forward:

<k-pop>
  <button slot="trigger">Toggle</button>

  Popover Body
</k-pop>

This will render a button that toggles the visibility of the Popover Body. No worries: There are a lot of options you can play with in order to customize almost anything. By default, k-pop does not style the appearance of the rendered popover. It is up to you to make it nice (using CSS). However, k-pop comes with a set of stylesheets that you can use to get started quickly.

Before we dig deeper into k-pop, let's make it just a little nicer:

<template>
  <!-- 'clean' is just a simple theme -->
  <k-pop theme="clean">
    <button slot="trigger">Toggle</button>

    Popover Body
  </k-pop>
</template>

Just setting the theme-prop is not enough. You also have to include the clean-theme:

<script>
  import "~@ckienle/k-pop/themes/clean.css"
</script>

Now it should look much better.