Profilecard

Example profilecard

Installation

npm install pf-profilecard

Using the component

HTML

The pf-profilecard package exports the ProfileCard Skate component.

Import the component in your JS resource:

bundle.js

import 'pf-profilecard';

Now you can use the defined tag in our HTML markup, e.g.:

index.html

<html>
<head>
  <script src="bundle.js"></script> 
</head>
<body>
  <!-- ... -->
  <pf-profilecard></pf-profilecard>
</body>

or from within another JavaScript resource:

import ProfileCard from 'pf-profilecard';
 
const component = new ProfileCard();
document.body.appendChild(component);

React

import ProfileCard from 'pf-profilecard';
import reactify from 'skatejs-react-integration';
 
const ReactComponent = reactify(ProfileCard, {});
 
ReactDOM.render(<ReactComponent />, container);

Classes

ProfilecardResourced
Profilecard

ProfilecardResourced

Kind: global class

Properties
- profilecardResourced.ProfilecardResourceddata-account-id : string
- profilecardResourced.ProfilecardResourceddata-cloud-id : string
- profilecardResourced.actions : array
- profilecardResourced.use24h : boolean

new ProfilecardResourced()

Create instances of the component programmatically, or using markup.

HTML Example

<pf-profilecard-resourced/></pf-profilecard-resourced>

JS Example

import ProfilecardResourced from 'pf-profilecard';
const component = new ProfilecardResourced();

profilecardResourced.ProfilecardResourceddata-account-id : `string`

Kind: instance property of ProfilecardResourced

profilecardResourced.ProfilecardResourceddata-cloud-id : `string`

Kind: instance property of ProfilecardResourced

profilecardResourced.actions : `array`

Defining the action buttons on the card. Array of one or more action objects with label and event keys. label defines the button text while event is returned as detail in the emitted action event in case the button is clicked. [Will be passed to ProfileCard]

Kind: instance property of ProfilecardResourced
Example

[{label: 'Chat', event: 'ev_chat'}, {label: 'View', event: 'ev_view'}]

profilecardResourced.use24h : `boolean`

Use 24h clock instead of the default 12h clock. [Will be passed to ProfileCard]

Kind: instance property of ProfilecardResourced

Profilecard

Kind: global class

Properties
- profilecard.avatarUrl : string
- profilecard.fullname : string
- profilecard.meta : string
- profilecard.nickname : string
- profilecard.timestamp : number
- profilecard.location : string
- profilecard.presence : string
- profilecard.actions : array
- profilecard.use24h : boolean

new Profilecard()

Definition of the Profilecard component.

HTML Example

<pf-profilecard></pf-profilecard>

JS Example

import Profilecard from 'pf-profilecard';
const myProfilecard = new Profilecard();