list.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>list</title>
    <script type="module" src="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.esm.js"></script>
    <link rel="stylesheet" type="text/css" href="https://js.arcgis.com/calcite-components/1.0.0-beta.91/calcite.css" />
    <style>
      h1,
      calcite-list {
        margin-bottom: 5rem;
      }
      h2 {
        margin-bottom: 3rem;
      }
      body {
        font-family: var(--calcite-sans-family);
        font-size: var(--calcite-font-size-0);
        color: var(--calcite-ui-text-1);
        max-width: 1024px;
        min-width: 280px;
        width: 70vw;
        padding: 0 var(--calcite-spacing-double);
        margin: 0 auto;
        background-color: var(--calcite-ui-background);
      }
      /* Theme Switcher */
      #theme-label {
        position: fixed;
        top: 20px;
        right: 20px;
        z-index: 2;
        background-color: var(--calcite-ui-background);
        border: 1px solid;
        border-color: var(--calcite-ui-border-1);
        border-radius: var(--calcite-border-radius);
        margin: 0;
        padding: 10px;
      }
      #theme-label label {
        margin: 0;
      }
    </style>
  </head>
  <body>
    <main>

      <!-- calcite-switch -->
      <div id="theme-label">
        <calcite-label layout="inline">
        Toggle theme
        <calcite-switch id="theme-switch"></calcite-switch>
        </calcite-label>
      </div>

      <h1><code>list, list-item-group and list-item</code></h1>

      <h2>Test 1. List</h2>
      <calcite-list>
        <calcite-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="river">
            <calcite-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
            <calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
            <calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
        </calcite-list-item>
        <calcite-list-item disabled label="Disabled item" description="An example of a disabled list item." value="disabled">
          <calcite-action text="Disabled layer" slot="actions-end" icon="layer"></calcite-action>
      </calcite-list-item>
    </calcite-list>

    <h2>Test 2. Disabled List</h2>
    <calcite-list disabled>
      <calcite-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="river">
        <calcite-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
      </calcite-list-item>
      <calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
        <calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
      </calcite-list-item>
      <calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
        <calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
      </calcite-list-item>
  </calcite-list>

  <h2>Test 3. List with non-interactive list items</h2>
  <calcite-list>
    <calcite-list-item non-interactive label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="river">
      <calcite-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
    </calcite-list-item>
    <calcite-list-item non-interactive label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
      <calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
    </calcite-list-item>
    <calcite-list-item non-interactive label="Lake" description="A large body of water surrounded by land." value="lake">
      <calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
    </calcite-list-item>
</calcite-list>

  <h2>Test 4. Heading Level List</h2>

  <h3>Heading level in list:</h3>
  <calcite-list heading-level="4">
    <calcite-list-item-group heading="Natural Resources">
      <calcite-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="river">
        <calcite-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
      </calcite-list-item>
      <calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
        <calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
      </calcite-list-item>
      <calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
        <calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
      </calcite-list-item>
    </calcite-list-item-group>
  </calcite-list>

  <h3>Heading Level in list group:</h3>
  <calcite-list>
    <calcite-list-item-group heading-level="4" heading="Natural Resources">
    <calcite-list-item label="River" description="A large natural stream of water flowing in a channel to the sea, a lake, or another such stream." value="river">
      <calcite-action text="Enable River layer" slot="actions-end" icon="layer"></calcite-action>
    </calcite-list-item>
    <calcite-list-item label="Mountain" description="A large natural elevation of the earth's surface rising abruptly from the surrounding level." value="mountain" selected>
      <calcite-action text="Enable Mountain layer" slot="actions-end" icon="layer"></calcite-action>
    </calcite-list-item>
    <calcite-list-item label="Lake" description="A large body of water surrounded by land." value="lake">
      <calcite-action text="Enable Lake layer" slot="actions-end" icon="layer"></calcite-action>
    </calcite-list-item>
  </calcite-list-item-group>
  </calcite-list>

    </main>
  </body>

  <script>
    window.onload = () => {
      // Theme Switcher
      const themeSwitch = document.getElementById("theme-switch");
      themeSwitch.addEventListener("calciteSwitchChange", () => {
      document.body.classList.toggle("calcite-theme-dark");
      });
    };

  </script>
</html>