Prescrypto Elements

> A collection of custom elements for implementing the functionality of prescrypto.com

Quick Start

$3

``html








`

$3

1. Install prescrypto-elements.

`sh
# NPM
npm install prescrypto-elements --save

# Yarn
yarn add prescrypto-elements
`

2. Add an element to append PrxPrescriptions to.

`html





`

3. Import and register the custom element.

`js
import { PrxPrescriptions } from "prescrypto-elements";

// Must run in the browser so the customElements method is available
customElements.define("prx-prescriptions", PrxPrescriptions);

// Create an instance of the custom element with the JavaScript API
const prx = new PrxPrescriptions({ token: "mi-token-prescrypto" });

// Add the element to the DOM
document.getElementById("prx-app").appendChild(prx);
`

CSS


Prescrypto's custom elements are encapsulated in Shadow DOM. Due to this reason, you can not apply styles with .class o #id, instead you must use ::part(). Below you can see an example of the DOM nodes used to render PrxPrescriptions. Note the part attributes.


`html























ID	Patient	Email	Diagnosis	Date
{{ id }}	{{ patient.name }}	{{ patient.email }}	{{ diagnosis }}	{{ created_at }}


`

To style the PrxPrescriptions component, those parts can be addressed via pseudo-selectors:

`css
prx-prescriptions {
font-family: "Roboto", sans-serif;
font-size: 14px;
}

/ Styles for the

element /
prx-prescriptions::part(table) {
border-collapse: collapse;
text-overflow: ellipsis;
}

/ Styles for the

element /
prx-prescriptions::part(tr) {
white-space: nowrap;
}

/ Styles for the

element /
prx-prescriptions::part(thead) {
font-size: 12px;
font-weight: 500;
line-height: 1.5;
color: #627282;
text-transform: uppercase;
text-align: left;
}

/ Styles for the

element inside of /
prx-prescriptions::part(trhead) {
border-bottom: 1px solid #edeff2;
}

/ Styles for the

element inside of /
prx-prescriptions::part(trbody) {
border-bottom: 1px solid #dcdfe3;
}

/ Styles for the

element / prx-prescriptions::part(th) { padding: 13px; } / Styles for the
element / prx-prescriptions::part(td) { color: #1b2734; line-height: 1.5; padding: 13px; } / Style for the	with the id / prx-prescriptions::part(td-id) { font-weight: 700; } / Style for the	with the name / prx-prescriptions::part(td-name) { font-weight: 700; } `` Show more