prescrypto-elements
v2.0.3
Published
> A collection of [custom elements](https://web.dev/custom-elements-v1/) for implementing the functionality of prescrypto.com
Downloads
3
Readme
Prescrypto Elements
A collection of custom elements for implementing the functionality of prescrypto.com
Quick Start
CDN
<!-- 1. Load the PrescryptoElements library in the global scope -->
<script src="https://unpkg.com/prescrypto-elements/dist/prescrypto-elements.umd.js"></script>
<!-- 2. Register a custom element, in this example the prescription history widget PrxPrescriptions -->
<script type="text/javascript">
customElements.define("prx-prescriptions", PrescryptoElements.PrxPrescriptions);
</script>
<!-- 3. Add PrxPrescriptions with the required attributes to the HTML -->
<prx-prescriptions token="mi-token-prescrypto"></prx-prescriptions>Libreria
Install
prescrypto-elements.# NPM npm install prescrypto-elements --save # Yarn yarn add prescrypto-elementsAdd an element to append
PrxPrescriptionsto.<body> <div id="prx-app"></div> </body>Import and register the custom element.
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.
<table part="table">
<thead part="thead">
<tr part="tr trhead">
<th part="th">ID</th>
<th part="th">Patient</th>
<th part="th">Email</th>
<th part="th">Diagnosis</th>
<th part="th">Date</th>
</tr>
</thead>
<tbody part="tbody">
<tr part="tr trbody">
<td part="td td-id">{{ id }}</td>
<td part="td td-name">{{ patient.name }}</td>
<td part="td td-email">{{ patient.email }}</td>
<td part="td td-diagnosis">{{ diagnosis }}</td>
<td part="td td-creater">{{ created_at }}</td>
</tr>
</tbody>
</table>To style the PrxPrescriptions component, those parts can be addressed via pseudo-selectors:
prx-prescriptions {
font-family: "Roboto", sans-serif;
font-size: 14px;
}
/* Styles for the <table> element */
prx-prescriptions::part(table) {
border-collapse: collapse;
text-overflow: ellipsis;
}
/* Styles for the <tr> element */
prx-prescriptions::part(tr) {
white-space: nowrap;
}
/* Styles for the <thead> 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 <th> element */
prx-prescriptions::part(th) {
padding: 13px;
}
/* Styles for the <tr> element inside of <thead> */
prx-prescriptions::part(trhead) {
border-bottom: 1px solid #edeff2;
}
/* Styles for the <tr> element inside of <tbhody> */
prx-prescriptions::part(trbody) {
border-bottom: 1px solid #dcdfe3;
}
/* Styles for the <td> element */
prx-prescriptions::part(td) {
color: #1b2734;
line-height: 1.5;
padding: 13px;
}
/* Style for the <td> with the id */
prx-prescriptions::part(td-id) {
font-weight: 700;
}
/* Style for the <td> with the name */
prx-prescriptions::part(td-name) {
font-weight: 700;
}