2. PDB Prints as Web component - PDBeurope/pdb-prints GitHub Wiki
PDB Prints is also available as a web-component (custom HTML Element)
1. Include the library style and script files in your web page
<!-- Required for IE11 -->
<script src="https://cdn.jsdelivr.net/npm/babel-polyfill/dist/polyfill.min.js" defer></script>
<!-- Web component polyfill (only loads what it needs) -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/webcomponents-lite.js" charset="utf-8" defer></script>
<!-- Required to polyfill modern browsers as code is ES5 for IE... -->
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js" charset="utf-8" defer></script>
<!-- PDB Prints web-component css and JS files -->
<link rel="stylesheet" type="text/css" href="https://www.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-prints-2.0.0.css">
<script type="text/javascript" src="https://www.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-prints-component-2.0.0.js" defer></script>*Until web components are natively supported by all browsers, it is necessary to use polyfills
2. Include PDB Prints as HTML Element
<pdb-prints entry-id="1cbs"></pdb-prints>Check here the example demonstrating all the steps
| No. | Attribute | Details |
|---|---|---|
| 01 | entry-id (Mandatory) |
PDB ID Example: entry-id="1cbs"
|
| 02 | orientation | Expected value - vertical / horizontal(default) |
| 03 | color | Expected value - transparent /embl_green(default) |
| 04 | size | Expected value - 48 / 64 / 128 /36(default) |
| 05 | hide-logo | Comma separated logo identifiers Expected value - PDBeLogo,PrimaryCitation,Taxonomy,Expressed,Experimental,Protein,NucleicAcid,Ligands
|
| 06 | error-style | CSS style for the error box - Example: error-style="color: #ff0000" will set the error text color to red |