-
Notifications
You must be signed in to change notification settings - Fork 3
2. PDB RNA Viewer as Web component
Mandar Deshpande edited this page Oct 19, 2021
·
2 revisions
PDB RNA Viewer is also available as a web-component (custom HTML Element)
1. Include the library style and script files in your web page
<!-- PDB RNA Viewer library css -->
<link rel="stylesheet" type="text/css" href="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/css/pdb-rna-viewer-0.1.0.css">
<!-- 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>
<!-- d3.js dependency script -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]" defer></script>
<!-- PDB RNA Viewer library script -->
<script type="text/javascript" src="https://wwwdev.ebi.ac.uk/pdbe/pdb-component-library/js/pdb-rna-viewer-component-0.1.0.js" defer></script>*Until web components are natively supported by all browsers, it is necessary to use polyfills
2. Include PDB RNA Viewer as HTML Element
<pdb-rna-viewer pdb-id="3l3c" entity-id="3" chain-id="R"></pdb-rna-viewer>Check here the example demonstrating all the steps
| No. | Attribute | Details |
|---|---|---|
| 01 | pdb-id (Mandatory) |
PDB ID Example: pdb-id="3l3c"
|
| 02 | entity-id (Mandatory) |
Entity ID Example: entity-id="3"
|
| 03 | chain-id (Mandatory) |
Chain ID Example: chain-id="R"
|
| 04 | subscribe-events | Allow event binding with other PDB Web-components Example: subscribe-events="true"**default - false |