layout	title	published	Author	add toc	add sidebar
docs	Web Components	2023-05-15	Kevin Frey	false	_sidebars\mainSidebar.md

<nfdi-navbar>
<nfdi-footer>
<nfdi-body>
<nfdi-sidebar-element>
<nfdi-sidebar-eleneo>
<nfdi-header>
<nfdi-toc>
<nfdi-code>

Style

Based on Bulma

The DataPLANT web components were built with the basic Bulma style sheet in mind. It is highly recommended to reference the Bulma style sheet for all projects which use the DataPLANT web components.

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.4/css/bulma.min.css">

Or see here for the official docs.

Custom Properties - CSS variables

Nearly all web components come with the possibility to change the default color scheme by applying custom CSS variables to the html document. Each web component comes with a description of available variables and their default values. If you are using the nfdi-body for documentation it is highly recommended to use the following css snippet to apply a consistent styling to the child elements inside the body.

nfdi-toc, nfdi-body {
    --outside-background-color: rgb(240, 243, 246);
    --header-color: rgb(10, 12, 16)
    --element-text-color: #0E1116;
    --element-background-color: #fff;
    --accent-text-color: rgb(31, 194, 167);
    --link-color: #4FB3D9;
    --link-hover-color: #8ad3ee;
}

body {
    margin: 0px;
}

thead tr th, strong {
    color: var(--accent-text-color) !important
}

a {
    color: var(--link-color, #4FB3D9) !important;
}

a:hover {
    color: var(--link-hover-color, #3A3A3A) !important;
}

thead {
    font-size: 1.2rem;
}

nfdi-navbar

<script type="text/plain"><nfdi-navbar></nfdi-navbar></script>

v0.8.0

Slotless component with responsive design at 1024px media query. Fixed top and requires padding-top: 3.25rem to be added to html.

<script type="text/plain"><html style="padding-top: 3.25rem"></html></script>

Custom Properties

--element-background-color, set "background-color" of navbar. (Default: nfdi-darkblue)
--element-text-color, set "color", "border-color" and "navbar-divider" color. (Default: nfdi-white)

nfdi-footer

<script type="text/plain"><nfdi-footer></nfdi-footer></script>

v0.8.0

Slotless component.

Custom Properties

--element-background-color, set "background-color" of footer.(Default: nfdi-darkblue 20% lighter)
--element-text-color, set "color", "border-color". (Default: nfdi-white)
--link-color, set color of links. (Default: nfdi-lightblue)
--link-color, set :hover color of links. (Default: nfdi-black)
--header-color, set color to html header elements. (Default: nfdi-white)

nfdi-body

<script type="text/plain"><nfdi-body [class="content"] [hassidebar="true"]></nfdi-body></script>

The top level container element for the main documentation design.

v0.5.2

This element will contain all documentation content in its "Main Content Area". To style it's children in this area, use the bulma class class="content".

Features

Hide sidebar at 1024px media query and show fixed bottom footer to open sidebar area on touch/click.
- Sidebar will slide into view.

Slots

Child elements will go to "Main Content Area"

<nfdi-body class="content" hassidebar="true">
    <h1 class="front-header">Index</h1>
    <i class="help">last updated at 2022-06-06</i>
</nfdi-body>

sidebar-slot

Use this slot to specify an nfdi-sidebar-element.

<nfdi-body class="content" hassidebar="true">
    <!-- searchbar slot, pagefind example -->
    <div slot="searchbar"> 
        <link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
        <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
        <div id="search"></div>
        <script>
            window.addEventListener('DOMContentLoaded', (event) => {
                new PagefindUI({ element: "#search" });
            });
        </script>
    </div>
    <!-- sidebar slot -->
    <nfdi-sidebar-element slot="sidebar" isactive="true">
        <div slot="title">General</div>
        <h1 slot="inner"><a href="/index.html">Home</a></h1>
    </nfdi-sidebar-element>
</nfdi-body>

searchbar-slot

Use this slot to set an element above all sidebar links.

<nfdi-body class="content" hassidebar="true">
    <!-- searchbar slot, pagefind example -->
    <div slot="searchbar"> 
        <link href="/_pagefind/pagefind-ui.css" rel="stylesheet">
        <script src="/_pagefind/pagefind-ui.js" type="text/javascript"></script>
        <div id="search"></div>
        <script>
            window.addEventListener('DOMContentLoaded', (event) => {
                new PagefindUI({ element: "#search" });
            });
        </script>
    </div>

Html Attributes

hasSidebar/hassidebar: set to "true" to display the sidebar. (Default: "false")

Custom Properties

--outside-background-color, set "background-color" of are outside of box.(Default: nfdi-olvi 80% lighter)
--element-text-color, set "color", "border-color". (Default: nfdi-black)

nfdi-sidebar-element

<script type="text/plain"><nfdi-sidebar-element slot="sidebar" [isActive=true]></nfdi-sidebar-element></script>

Stackable element in "Sidebar Area> of body. MUST be slotted in "sidebar" slot of nfdi-body.

Features:

Can be opened or closed on click.
Automatically highlights active pages (host + path).
- Automatically hightlights in-page links when scrolled by.

nfdi-sidebar-eleneo

<nfdi-sidebar-eleneo slot="sidebar">
    <a href="/">Theory</a>
    <a href="/#" slot="child">Metadata</a>
    <a href="/#what-is-metadata-amp-more" slot="child">What is metadata?</a>
    <a href="/#where-does-metadata-come-from" slot="child">Where does metadata come from?</a>
    <a href="/#why-do-i-benefit-from-metadata" slot="child">Why do I benefit from metadata?</a>
    <nfdi-sidebar-eleneo slot="child">
        <a href="/#what-tasks-are-important-for-rich-metadata">What tasks are important for rich metadata?</a>
        <a href="/#collection" slot="child">Collection</a>
        <a href="/#structuring" slot="child">Structuring</a>
        <a href="/#sharing-and-curation" slot="child">Sharing and curation</a>
    </nfdi-sidebar-eleneo>
</nfdi-sidebar-eleneo>

Stackable element in "Sidebar Area" of body. MUST be slotted in "sidebar" slot of nfdi-body.

v1.0.0

Features:

Can be opened or closed on click.
Automatically highlights active pages (host + path).
Can be nested to increase nesting depth.

Slots

<nfdi-sidebar-eleneo slot="child">
    <a href="/#what-tasks-are-important-for-rich-metadata">What tasks are important for rich metadata?</a>
    <a href="/#collection" slot="child">Collection</a>
    <a href="/#structuring" slot="child">Structuring</a>
    <a href="/#sharing-and-curation" slot="child">Sharing and curation</a>
</nfdi-sidebar-eleneo>

main

Use this slot for the main link.

MUST be <a> tag. MUST contain href attribute.
Will be checked for mathing path to windowlocation to automatically open active subpages.

child-slot

Use this slot to create a toggable sub-container which contains child links.

MUST be <a> or <nfdi-sidebar-eleneo> tag. MUST contain href attribute.
Will be checked for mathing path to windowlocation to automatically open active subpages.

Html Attributes

isActive/isactive: set to "true" to display the element open. (Default: "false")

Custom Properties

--accent-text-color, set color of dropdown angle. (Default: nfdi-black)
--sidebar-text-color, set text color of all slots. (Default: nfdi-black)
--element-background-color, set on hover color for sidebar links (Default: nfdi-darkblue)

nfdi-header

<script type="text/plain"><nfdi-h1>Metadata</nfdi-h1>
<nfdi-h2>Metadata 2</nfdi-h2>
<nfdi-h3>Metadata 3</nfdi-h3>
<nfdi-h4>Metadata 4</nfdi-h4>
<nfdi-h5>Metadata 5</nfdi-h5>
<nfdi-h6>Metadata 6</nfdi-h6></script>

v0.5.2

Use with one child element as text. Will propagate html.

Features

Automaticly creates in-page (/#in-page-link) link before header.
Automaticly creates id corresponding to in-page link for header.

Custom Properties

--link-color: set color of generated in-page link. (Default: nfdi-lightblue)
--link-hover-color: set hover color of generated in-page link. (Default: nfdi-black)
--header-color: set color to header elements. (Default: nfdi-black)

nfdi-toc

<script type="text/plain"><nfdi-toc></nfdi-toc></script>

v0.5.2

Slotless component to automatically create table of contents.

Features

Finds all nfdi-header in nfdi-body, nests them according to lowest depth and creates <ul>, <li> elements with the in-page links.

Known Issues

Automatic generation has some major restrictions:

Only works on elements inside the next lowest nfdi-header level 🐛.

Example: 'header h2' will be missing.

<script type="text/plain"><nfdi-h2>header h2</nfdi-h2>
<nfdi-h1>header h1.1</nfdi-h1>
<nfdi-h1>header h1.1</nfdi-h1></script>

Example: 'header h3' will be missing.

<script type="text/plain"><nfdi-h1>header h1.1</nfdi-h1>
<nfdi-h2>header h3</nfdi-h2>
<nfdi-h1>header h1.2</nfdi-h1>
<nfdi-h2>header h2</nfdi-h2></script>

👀 If you are interested, any help is welcome (here).

Custom Properties

--link-color: set color of generated in-page links. (Default: nfdi-lightblue)
--link-hover-color: set hover color of generated in-page links. (Default: nfdi-black)
--element-text-color: set color to list style elements. (Default: nfdi-black)

nfdi-code

<script type="text/plain"><nfdi-code></nfdi-code></script>

v0.6.0

Example Mermaid Graph (>0.13.0)

pie title What Voldemort doesn't have?
         "FRIENDS" : 2
         "FAMILY" : 3
         "NOSE" : 45

This component can be used to display code snippets similar to <pre> html elements. Any text inside will be presented exactly as written.

Add class="language-*" to the element to specify the language for syntax highlighting.

👀 If you want to showcase html code, it is recommended to add a <script> tag.

<nfdi-code class="language-html"><script type="text/plain"><p>Hi!</p></script></nfdi-code>

Features

Comes with copy-to-clipboard button.
Inlcuded line numbers and prismjs syntax highlighting. Supports syntax highlighting for:
- markup, html, xml, css
- JSON, YAML
- fsharp, csharp, clike
- javascript, typescript
- bash
- markdown
- python
Supports mermaid graphs (>v0.12.0)

Slots

<script type="text/plain"><nfdi-body>
    <nfdi-code class="language-fsharp">#r "nuget: DynamicObj, 1.0.1"
#r "nuget: Expecto, 9.0.4"

open DynamicObj
open Newtonsoft.Json
open System.IO
open Microsoft.FSharp.Core

type JsonParser = {
    TokenType: JsonToken
    Value: string option
} with
    static member create tokenType value = {
        TokenType = tokenType
        Value = value
    }</nfdi-code>
</nfdi-body></script>

Custom Properties

--accent-text-color: set the colored border on the left. (Default: nfdi-lightblue)
--outside-background-color: set background-color. (Default: nfdi-white)
--element-text-color: set copy-button border-color and box-shadow color. (Default: nfdi-white)

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

WebComponents.md

WebComponents.md

Style

Based on Bulma

Custom Properties - CSS variables

nfdi-navbar

Custom Properties

nfdi-footer

Custom Properties

nfdi-body

Slots

sidebar-slot

searchbar-slot

Html Attributes

Custom Properties

nfdi-sidebar-element

nfdi-sidebar-eleneo

Slots

main

child-slot

Html Attributes

Custom Properties

nfdi-header

Custom Properties

nfdi-toc

Custom Properties

nfdi-code

Slots

Custom Properties

Files

WebComponents.md

Latest commit

History

WebComponents.md

File metadata and controls

Style

Based on Bulma

Custom Properties - CSS variables

nfdi-navbar

Custom Properties

nfdi-footer

Custom Properties

nfdi-body

Slots

sidebar-slot

searchbar-slot

Html Attributes

Custom Properties

nfdi-sidebar-element

nfdi-sidebar-eleneo

Slots

main

child-slot

Html Attributes

Custom Properties

nfdi-header

Custom Properties

nfdi-toc

Custom Properties

nfdi-code

Slots

Custom Properties