Skip to content

Web Components (Demo)

Jump to bottom
Rob Nelson edited this page Sep 4, 2019 · 5 revisions

Embedded Example

<html>
  <head>
    <script type="text/javascript" 
      src="embedded_publication_list.js"></script>
  </head>
  <body>
    <vivo-embedded-publication-list person_id="orcid0000-0002-1304-8447">
    </vivo-embedded-publication-list>
  </body>
</html>

Embedded Publication List (with custom styling):

<p>NOTE: custom styling</p>

<style>
  vivo-embedded-publication-list {
    --publication-title-color: #6f42c1;
    --publication-title-link-color: #6f42c1;
    --publication-title-font-size: 34px;
    --publication-abstract-font-size: 18px;
    --publication-authors-font-weight: normal;
    --publication-date-font-style: normal;
    --publication-authors-font-size: 14px;
    --publication-date-font-size: 14px;
  }  
</style>

<vivo-embedded-publication-list 
  person_id="orcid0000-0002-1304-8447" 
  link-decorate="true">

</vivo-embedded-publication-list>

Within site Page (Research tab)

          <h4 class="tab-content">Publications (via Web Components)</h4>
            <section class="publication-list">

            <vivo-publication-list>
                
                  <vivo-publication id="n130559" authors="[
{"id":"orcid0000-0001-8420-5254","label":"Holmes, Kristi"},
{"id":"orcid0000-0001-8530-8917","label":"Triggs, Graham"},
etc ... ]">
                    <div slot="title">OpenVIVO: Transparency in Scholarship@en-US</div>
                    <div slot="abstract">OpenVIVO is a free and open hosted semantic 
web platform anyone can join that gathers and shares open data etc...</div>
                    <span slot="date">2017-01-01</span>
                  </vivo-publication>

etc...
Clone this wiki locally