@geneontology/wc-go-ribbon

Web Component Ribbon

Usage no npm install needed!

<script type="module">
  import geneontologyWcGoRibbon from 'https://cdn.skypack.dev/@geneontology/wc-go-ribbon';
</script>

README

Built With Stencil

GO Ribbon Web Component

Try the GO ribbon here: http://geneontology.org/ribbon.html

Getting Started

Script tag

  • Put a script tag <script src='https://unpkg.com/@geneontology/wc-go-ribbon/dist/wc-go-ribbon.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc
<html>
<head>
  <script type="module" src="https://unpkg.com/@geneontology/wc-go-ribbon/dist/wc-go-ribbon/wc-go-ribbon.esm.js"></script>
  <script nomodule="" src="https://unpkg.com/@geneontology/wc-go-ribbon/dist/wc-go-ribbon/wc-go-ribbon.js"></script>
</head>
<body>

  <!--  This add the full go ribbon (strips + table) to your page for two RGD genes -->
  <wc-go-ribbon subjects="RGD:620474,RGD:3889" />

</body>
</html>

Node Modules

  • Run npm install @geneontology/wc-go-ribbon --save
  • Put a script tag similar to this <script src='node_modules/@geneontology/wc-go-ribbon/dist/wc-go-ribbon.js'></script> in the head of your index.html
  • Then you can use the element anywhere in your template, JSX, html etc