inline-editable.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>inline-editable</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-inline-editable {
        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>inline-editable</code></h1>

      <h2>Test 1. Inline Editable</h2>
      <calcite-inline-editable>
        <calcite-input value="Inline Editable" placeholder="Inline Editable"></calcite-input>
      </calcite-inline-editable>

      <h2>Test 2. Inline Editable with Controls</h2>
      <calcite-inline-editable controls editing-enabled>
        <calcite-input value="Inline Editable with Controls" placeholder="Inline Editable with Controls"></calcite-input>
      </calcite-inline-editable>

      <h2>Test 3. Inline Editable Disabled</h2>
      <calcite-inline-editable disabled>
        <calcite-input value="Inline Editable Disabled" placeholder="Inline Editable Disabled"></calcite-input>
      </calcite-inline-editable>

      <h2>Test 4. Inline Editable with Loading Controls</h2>
      <calcite-inline-editable controls loading editing-enabled>
        <calcite-input value="Inline Editable with Loading Controls" placeholder="Inline Editable with Loading Controls"></calcite-input>
      </calcite-inline-editable>

    </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>