Coder Social home page Coder Social logo

minhnhut0602 / vue-popover Goto Github PK

View Code? Open in Web Editor NEW

This project forked from jfusco/vue-popover

0.0 2.0 0.0 542 KB

Reusable popover component for Vue

Home Page: https://jfusco.github.io/vue-popover

License: MIT License

JavaScript 66.29% Vue 26.64% HTML 3.33% CSS 3.73%

vue-popover's Introduction

vue-popover

Build Status

peerDependency Status devDependency Status

MIT npm

Reusable popover component for Vue. This is purely functional, it's a completely "naked" and blank canvas component. There are no styles for this component except a z-index, which you can override.

Demo

https://jfusco.github.io/vue-popover

Getting Started

Installation

From the root of your project.

npm install vue-popover --save

Usage

Simple implementation of popover. See options available below.

<template>
	<div>
		<popover name="example">
			<div slot="content">
				<ul>
					<li><a href="#">npmjs.com</a></li>
					<li><a href="#">github.com</a></li>
				</ul>
			</div>
		</popover>
	<div>
</template>

<script type="text/babel">
	import popover from 'popover'

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

Options

name ~ required

The string to be used for a unique ID for the component instance, also used to set aria attributes

<template>
	<div>
		<popover name="example"></popover>
	</div>
</template>

popover:open ~ optional

An function triggered any time the instance of the popover is opened

<template>
	<div>
		<popover name="example" v-on:popover:open="onPopoverOpen"></popover>
	</div>
</template>

<script type="text/babel">
	import popover from 'popover'

	export default {
		components: {
			popover
		},
		methods: {
			onPopoverOpen(){
				console.log('popover open')
			}
		}
	}
</script>

popover:close ~ optional

An function triggered any time the instance of the popover is closed

<template>
	<div>
		<popover name="example" v-on:popover:close="onPopoverClose"></popover>
	</div>
</template>

<script type="text/babel">
	import popover from 'popover'

	export default {
		components: {
			popover
		},
		methods: {
			onPopoverClose(){
				console.log('popover close')
			}
		}
	}
</script>

available slots
  • face - Set custom face for the popover
  • content - Set custom content for the popover
<template>
	<div>
		<popover name="example">
			<div slot="face">
				<button>popover face</button>
			</div>

			<div slot="content">
				<p>Some custom content for popover</p>
			</div>
		</popover>
	</div>
</template>

closeOnContentClick ~ optional

Set to false if you don't want the popover to close if you click its contents. Useful if the popover contains elements you interact with (e.g. buttons and textboxes). This defaults to true when not set.

<template>
	<div>
		<popover name="example" :closeOnContentClick="false">
			<div slot="face">
				<button>popover face</button>
			</div>
	
			<div slot="content">
				<button>Some button</button>
				<input type="text">
			</div>
		</popover>
	</div>
</template>

Styling

Installation

Import the main SCSS file in to your application SCSS files ​```scss @import "node_modules/vue-popover/src/component/scss/styles.scss";


There are a few variables set to `!default` that can be overriden. If you need to change it more just override the actual styles.

**Any overriden variables needs to go above the `@import` statement to take effect**
​```scss
//-- Global UI
$popover-z-index

If you don't care to override variables and just want to override actual styles you may choose to import the minified compiled version of the css instead

@import "node_modules/vue-popover/dist/styles.css";

Tests

npm test

vue-popover's People

Contributors

jfusco avatar

Watchers

James Cloos avatar Nhut Phan avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.