@refinitiv-ui/demo-block

Demo page handler for Element Framework elements

Usage no npm install needed!

<script type="module">
  import refinitivUiDemoBlock from 'https://cdn.skypack.dev/@refinitiv-ui/demo-block';
</script>

README

Demo Block Element

A custom element that can wrap around any other elements for demo and development purpose.

Installation

npm install -D @refinitiv-ui/demo-block

Usage

Include demo styles to <head> section and import the module to your page.

<link rel="stylesheet" href="/node_modules/@refinitiv-ui/demo-block/demo.css">

<script type="module">
  import '@refinitiv-ui/demo-block';
</script>

Wrap element or content that you want to show in demo block inside <demo-block>.

<demo-block header="Layout option" layout="normal" tags="header">
  This is standard block layout
  <h1>Header Level 1</h1>
  <h2>Header Level 2</h2>
  <h3>Header Level 3</h3>
</demo-block>