pf-profilecard

v3.0.3

Published

2 years ago

pf-profilecard webcomponent

Downloads

0High
0Medium
0Low

atlassian-aui

atlaskit ui

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

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();