https://github.com/khofaai/kh-popover

this is my first published package :D, this package is for a popover build for vuejs framework
https://github.com/khofaai/kh-popover

javascript kh-popover popover vuejs vuejs-framework

Last synced: 11 days ago
JSON representation

this is my first published package :D, this package is for a popover build for vuejs framework

• Host: GitHub
• URL: https://github.com/khofaai/kh-popover
• Owner: khofaai
• License: mit
• Created: 2018-06-27T11:24:05.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-25T13:39:31.000Z (over 5 years ago)
• Last Synced: 2024-10-12T09:12:20.129Z (28 days ago)
• Topics: javascript, kh-popover, popover, vuejs, vuejs-framework
• Language: Vue
• Homepage:
• Size: 184 KB
• Stars: 10
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-morocco - kh-popover - popover.svg?style=social)](https://github.com/khofaai/kh-popover/stargazers) - Popover build for vuejs framework. by [@khofaai](https://github.com/khofaai) (Uncategorized / Uncategorized)

README

        
# Kh-Popover

[![npm](https://img.shields.io/npm/v/kh-popover.svg)](https://www.npmjs.com/package/kh-popover) ![license](https://img.shields.io/github/license/khofaai/kh-popover.svg) [![npm](https://img.shields.io/npm/dw/kh-popover.svg)](https://www.npmjs.com/package/kh-popover) [![npm](https://img.shields.io/npm/dt/kh-popover.svg)](https://www.npmjs.com/package/kh-popover) [![Build Status](https://travis-ci.org/khofaai/kh-popover.svg?branch=master)](https://travis-ci.org/khofaai/kh-popover)

### Description

Popover build for vuejs framework.


This packages still in dev mode.

This package help you create Popover/Tooltip with a pre-squelette and give you the possibility to set yours and dynamic positions.

### Getting Started

You can view this package on both **npm** and **yarn**

**kh-popover** Package links : 


- npm

- yarn

### Installing

```

npm i kh-popover

```

if you use `yarn` :

```

yarn add kh-popover

```

### Usage

```html

	

```

```javascript

require('kh-popover/dist/kh-popover.css');

import khPopover from 'kh-popover';

export default {

	components:{

		'kh-popover':khPopover

	}

}

```

display : 


![alt text](./src/assets/popover.png)

### Attributes

| attribute | Type | description | default value | options |

|---|---|---|---|---|

| :user 		| Object  | this object hold user data 		| {} | { id, name, photo, avatar, email } |

| :position 	| String  | define popover position 		| 'auto'	| 'auto','top','bottom' |

| :trigger 	| String  | accept two options 				| 'hover'	| 'hover','click' 	  	|

| :name 		| Boolean | to display given user's name 	| false		|  --					|

| :icon 		| Boolean | to display avatar 				| true		|  --					|

### Slots

| Slot name | Description |

|----|----|

| avatar 			| For `Popover avatar` located |

| content 			| For `Popover core` _( includes both [ **content_info**, **content_actions** ])_ |

| content_info 		| For `Popover header` |

| content_actions 	| For `Popover footer` |

### Next

- **Demo** : We will publish a demo asap

- **Testing** : We will add Unit Test