basic-web-components.github.io/index.html at develop · basic-web-components/basic-web-components.github.io

619 lines (591 loc) · 24.8 KB
<!DOCTYPE html>
<html lang="en">
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1.0">
  <title>Basic Web Components</title>
  <script src="node_modules/web-animations-js/web-animations.min.js"></script>
  <script src="node_modules/webcomponents.js/webcomponents.min.js"></script>
  <script src="node_modules/basic-web-components/dist/basic-web-components.js"></script>
  <link rel="stylesheet" href="site.css">
  <h1>Basic Web Components</h1>
    The Basic Web Components project seeks to provide a comprehensive set of
    solid, well-designed web components that implement very common user
    interface patterns. Each component can be used as is, or as the foundation
    for new components.
    See the
    <a href="https://github.com/basic-web-components/basic-web-components">Basic Web Components</a>
    repository on GitHub for complete documentation.
  <section>
    <h2><a name="basic-arrow-selection">basic-arrow-selection</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Adds prominent left and right arrow buttons to a wrapped child such as
          a <a name="basic-carousel">basic-carousel</a>.
          By default, the arrow buttons are shown on devices with a mouse-like
          pointing device.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-arrow-selection">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-arrow-selection class="overlay showArrows">
          <basic-carousel class="imageContainer" aria-label="Nature scenes">
            <img src="resources/images/image1.jpg" alt="Lake">
            <img src="resources/images/image2.jpg" alt="Horses">
            <img src="resources/images/image6.jpg" alt="Wheat">
            <img src="resources/images/image3.jpg" alt="Mountain">
            <img src="resources/images/image7.jpg" alt="Palm tree">
          </basic-carousel>
        </basic-arrow-selection>
      </div>
  </section>
  <section>
    <h2><a name="basic-animation-stage">basic-animation-stage</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Provides animated transitions for selection changes. An animation can
          be provided specified with keyframes, or by naming a stock effect. The
          same animation can be shown at an arbitrary point, generally used to
          reflect a user-controlled touch or trackpad drag operation in
          progress.
        </p>
        <p>
          This component is a programmatic rendering surface, and comes with no
          interactivity of its own. This demo adds an instance of
          <a href="#basic-page-dots">basic-page-dots</a>.
          For a fully interactive carousel that includes touch support, see
          <a href="#basic-carousel">basic-carousel</a>.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-animation-stage">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-page-dots>
          <basic-animation-stage id="animationStage" aria-label="Pages" selection-wraps="true" selection-animation-effect="revealWithFade">
            <div class="box lightText" style="background: #53777a;"><div>One</div></div>
            <div class="box" style="background: #d95b43"><div>Two</div></div>
            <div class="box" style="background: #c02942"><div>Three</div></div>
            <div class="box" style="background: #ecd078"><div>Four</div></div>
            <div class="box lightText" style="background: #542437;"><div>Five</div></div>
          </basic-animation-stage>
        </basic-page-dots>
      </div>
  </section>
  <section>
    <h2><a name="basic-autosize-textarea">basic-autosize-textarea</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          A text area that grows in size to contain its contents, unlike a standard
          &lt;textarea&gt; element that always remains the same height.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-autosize-textarea">Docs</a>
        </p>
      </div>
      <basic-autosize-textarea class="demo" aria-label="Sample auto-sizing textarea" minimum-rows="2" placeholder="Type here">
        Type all you want here!
      </basic-autosize-textarea>
  </section>
  <section>
    <h2><a name="basic-carousel">basic-carousel</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          An implementation of the carousel user interface pattern, commonly used
          for navigating laterally between images, pages, and other elements. This
          pattern presents the user with a linear sequence of elements, through
          which the user can navigate with a variety of input methods: touch,
          trackpad, and keyboard.
        </p>
        <p>
          The basic-carousel family of components includes a number of auxiliary
          components for adding additional means of navigation. See
          <a href="#basic-arrow-selection">basic-arrow-selection</a>,
          <a href="#basic-page-dots">basic-page-dots</a>,
          <a href="#basic-slideshow-timer">basic-slideshow-timer</a>, and
          <a href="#basic-tab-strip">basic-tab-strip</a>.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-carousel">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-carousel class="imageContainer" aria-label="Nature scenes" selection-wraps="true">
          <img src="resources/images/image1.jpg" alt="Lake">
          <img src="resources/images/image2.jpg" alt="Horses">
          <img src="resources/images/image6.jpg" alt="Wheat">
          <img src="resources/images/image3.jpg" alt="Mountain">
          <img src="resources/images/image7.jpg" alt="Palm tree">
        </basic-carousel>
      </div>
  </section>
  <section>
    <h2><a name="basic-collapsible-panel">basic-collapsible-panel</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          A panel which can be expanded/collapsed with simple CSS height
          animation. It handles only the duties of collapsing and expanding; you
          must provide a user interface to trigger that change yourself. (This
          demo includes a button for that purpose.)
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-collapsible-panel">Docs</a>
        </p>
      </div>
      <div class="demo">
        <p>
          <button onclick="document.querySelector('#collapsiblePanel').toggle()">Toggle</button>
        </p>
        <basic-collapsible-panel id="collapsiblePanel">
          This block of text is in a collapsible panel, and will be collapsed/expanded
          when you click the button above. Lorem ipsum dolor sit amet, consectetur
          adipiscing elit. Nunc eget sem nulla. Morbi sodales est vitae urna accumsan
          maximus. Nunc cursus vel justo ut dignissim. Nulla sollicitudin vestibulum
          rhoncus. Nunc ornare egestas ligula, et facilisis est rhoncus sit amet.
          Fusce sed enim mi. Duis aliquam diam nec magna cursus, in pharetra ligula
          maximus. Curabitur a facilisis nisl, in laoreet lorem. Etiam ut dolor
          dapibus est porttitor hendrerit. Pellentesque a libero a magna maximus
          laoreet. Ut sed consectetur ipsum. Maecenas felis nibh, hendrerit ac lorem
          porta, lobortis sagittis massa. Mauris sed cursus diam, quis lacinia sem.
          Etiam id luctus orci, nec luctus eros. Aliquam risus felis, porta et
          porttitor quis, blandit nec augue. Sed tristique semper velit, ac aliquet
          lacus venenatis non. Aliquam at vestibulum lorem. Maecenas non orci a libero
          imperdiet volutpat malesuada malesuada libero. Phasellus vitae congue leo.
          Maecenas cursus rhoncus efficitur. Cras porta blandit est ac interdum.
          Mauris porttitor tortor quis nisl porttitor, sit amet dapibus massa
          scelerisque. Nullam at ex vehicula, aliquam enim eu, elementum purus.
        </basic-collapsible-panel>
        <p>
          This content is outside the collapsible panel.
        </p>
      </div>
  </section>
  <section>
    <h2><a name="basic-current-anchor">basic-current-anchor</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          An anchor (link) that highlights itself when its destination matches
          the current location. Such links often come up in toolbars, side bars,
          and other navigation elements in which you want the user to be able to
          quickly confirm their location within your app.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-current-anchor">Docs</a>
        </p>
      </div>
      <div class="demo">
        <p>
          The links below navigate to anchors on this page. As you navigate (by
          clicking, editing the address bar, going back/forward), the links will
          automatically update their own current state.
        </p>
        <ul>
          <li>
            <basic-current-anchor href="#one">One</basic-current-anchor>
          </li>
          <li>
            <basic-current-anchor href="#two">Two</basic-current-anchor>
          </li>
          <li>
            <basic-current-anchor href="#three">Three</basic-current-anchor>
          </li>
        </ul>
      </div>
  </section>
  <section>
    <h2><a name="basic-fade-overflow">basic-fade-overflow</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Fades out content that overflows so the user knows there's more. This
          component is not itself interactive, so you would typically combine
          this with some interface for viewing the complete content.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-fade-overflow">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-fade-overflow style="height: 6em;">
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam
          rhoncus lacus ut blandit euismod. Aenean quam erat, pellentesque ut
          augue sed, suscipit pretium ligula. Etiam eu euismod quam, at porta
          ante. Pellentesque vulputate mi ut nibh lacinia, ac tincidunt leo
          vehicula. Proin porttitor a tortor vitae iaculis. Cras eros magna,
          mollis a imperdiet facilisis, ornare ac nunc. Ut in vehicula risus,
          sodales fringilla felis. In libero libero, tincidunt malesuada lorem
          ut, dictum auctor nunc. Aliquam congue sem sit amet velit semper
          suscipit. Donec fringilla sodales diam in fringilla. In hac habitasse
          platea dictumst. Suspendisse at maximus erat. Cum sociis natoque
          penatibus et magnis dis parturient montes, nascetur ridiculus mus.
          Cras tincidunt erat auctor varius aliquam. Fusce vitae nunc et justo
          commodo blandit sed et arcu. Aenean lobortis sollicitudin est, et
          dignissim massa suscipit non. Donec vitae magna dolor. Nullam vel ante
          ex. Sed vestibulum sem rutrum vestibulum laoreet.
        </basic-fade-overflow>
      </div>
  </section>
  <section>
    <h2><a name="basic-list-box">basic-list-box</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          A single-selection list box with good keyboard support. The
          Up/Down, Page Up/Down, and Home/End keys work as expected. You can also
          type the beginning of an item to select it. This list box also has good
          accessibility support.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-list-box">Docs</a>
        </p>
      </div>
      <basic-list-box class="demo" aria-label="Fruits" style="height: 295px;">
        <div>Acai</div>
        <div>Acerola</div>
        <div>Apple</div>
        <div>Apricot</div>
        <div>Banana</div>
        <div>Blackberry</div>
        <div>Blueberry</div>
        <div>Cantaloupe</div>
        <div>Cherry</div>
        <div>Cranberry</div>
        <div>Currant</div>
        <div>Date</div>
        <div>Durian</div>
        <div>Fig</div>
        <div>Goji berry</div>
        <div>Gooseberry</div>
        <div>Grape</div>
        <div>Grapefruit</div>
        <div>Honeydew</div>
        <div>Jackfruit</div>
        <div>Kiwi</div>
        <div>Kumquat</div>
        <div>Lemon</div>
        <div>Lime</div>
        <div>Lychee </div>
        <div>Mango</div>
        <div>Mangosteen</div>
        <div>Mulberry</div>
        <div>Nectarine</div>
        <div>Orange</div>
        <div>Papaya</div>
        <div>Passion Fruit</div>
        <div>Peach</div>
        <div>Pear</div>
        <div>Pineapple</div>
        <div>Plum</div>
        <div>Pomegranate</div>
        <div>Pomelo</div>
        <div>Prickly Pear</div>
        <div>Raspberry</div>
        <div>Strawberry</div>
        <div>Tangerine</div>
        <div>Watermelon</div>
      </basic-list-box>
  </section>
  <section>
    <h2><a name="basic-modes">basic-modes</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Shows exactly one child element at a time. This can be useful in cases
          where an element has multiple modes that present substantially
          different user interfaces. This component provides no interactivity of
          its own. In this demo, the component has been wrapped with an instance
          of <a href="#basic-arrow-selection">basic-arrow-selection</a>.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-modes">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-arrow-selection>
          <basic-modes aria-label="Panels">
            <div class="box lightText" style="background: #53777a;"><div>One</div></div>
            <div class="box" style="background: #d95b43"><div>Two</div></div>
            <div class="box" style="background: #c02942"><div>Three</div></div>
            <div class="box" style="background: #ecd078"><div>Four</div></div>
            <div class="box lightText" style="background: #542437;"><div>Five</div></div>
          </basic-modes>
        </basic-arrow-selection>
      </div>
  </section>
  <section>
    <h2><a name="basic-page-dots">basic-page-dots</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Augments a wrapped element such as a
          <a href="#basic-carousel">basic-carousel</a>
          or <a href="#basic-slideshow">basic-slideshow</a>
          with a set of small dots, one for each element in the list. The user
          can use these dots to see how many elements are in the list, and to
          identify their current position in the list.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-page-dots">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-page-dots>
          <basic-carousel class="imageContainer" aria-label="Nature scenes">
            <img src="resources/images/image1.jpg" alt="Lake">
            <img src="resources/images/image2.jpg" alt="Horses">
            <img src="resources/images/image6.jpg" alt="Wheat">
            <img src="resources/images/image3.jpg" alt="Mountain">
            <img src="resources/images/image7.jpg" alt="Palm tree">
          </basic-carousel>
        </basic-page-dots>
      </div>
  </section>
  <section>
    <h2><a name="basic-play-controls">basic-play-controls</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Augments a wrapped slideshow, audio playlist, etc., with controls for
          play/pause, and to select the previous/next item.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-play-controls">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-play-controls>
          <basic-slideshow class="imageContainer" aria-label="Nature scenes">
            <img src="resources/images/image1.jpg" alt="Lake">
            <img src="resources/images/image2.jpg" alt="Horses">
            <img src="resources/images/image6.jpg" alt="Wheat">
            <img src="resources/images/image3.jpg" alt="Mountain">
            <img src="resources/images/image7.jpg" alt="Palm tree">
          </basic-slideshow>
        </basic-play-controls>
      </div>
  </section>
  <section>
    <h2><a name="basic-slideshow">basic-slideshow</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          A slideshow with animated transitions. This can be used on its own,
          or combined with a component like
          <a href="#basic-play-controls">basic-play-controls</a>
          to give your user control over playback.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-slideshow">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-slideshow class="imageContainer" aria-label="Nature scenes">
          <img src="resources/images/image1.jpg" alt="Lake">
          <img src="resources/images/image2.jpg" alt="Horses">
          <img src="resources/images/image6.jpg" alt="Wheat">
          <img src="resources/images/image3.jpg" alt="Mountain">
          <img src="resources/images/image7.jpg" alt="Palm tree">
        </basic-slideshow>
      </div>
  </section>
  <section>
    <h2><a name="basic-slideshow-timer">basic-slideshow-timer</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Adds slideshow semantics to a wrapped element (here, a
          <a href="#basic-carousel">basic-carousel</a>
          with <a href="#basic-page-dots">basic-page-dots</a>),
          allowing the selection to advance on a timed basis. If the user
          directly manipulates the selection, the slideshow timer starts over,
          giving the user time to view the selected item.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-slideshow-timer">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-slideshow-timer>
          <basic-page-dots>
            <basic-carousel class="imageContainer" aria-label="Nature scenes" selection-wraps="true">
              <img src="resources/images/image1.jpg" alt="Lake">
              <img src="resources/images/image2.jpg" alt="Horses">
              <img src="resources/images/image6.jpg" alt="Wheat">
              <img src="resources/images/image3.jpg" alt="Mountain">
              <img src="resources/images/image7.jpg" alt="Palm tree">
            </basic-carousel>
          </basic-page-dots>
        </basic-slideshow-timer>
      </div>
  </section>
  <section>
    <h2><a name="basic-sliding-viewport">basic-sliding-viewport</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Presents list items in a viewport such that only a single item is
          visible at a time, and shows changes in seleciton with a simple
          sliding effect. This is somewhere between
          <a href="#basic-modes">basic-modes</a>
          (which provides no visual transition) and
          <a href="#basic-animation-stage">basic-animation-stage</a>
          (a more complex rendering surface that requires the Web Animation
          API). This component provides no interactivity of its own; in this
          demo, it's been wrapped with an instance of
          <a href="#basic-arrow-selection">basic-arrow-selection</a>.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-sliding-viewport">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-arrow-selection class="showArrows overlay">
          <basic-sliding-viewport class="imageContainer" aria-label="Nature scenes">
            <img src="resources/images/image1.jpg" alt="Lake">
            <img src="resources/images/image2.jpg" alt="Horses">
            <img src="resources/images/image6.jpg" alt="Wheat">
            <img src="resources/images/image3.jpg" alt="Mountain">
            <img src="resources/images/image7.jpg" alt="Palm tree">
          </basic-sliding-viewport>
        </basic-arrow-selection>
      </div>
  </section>
  <section>
    <h2><a name="basic-spread-items">basic-spread-items</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Spreads out a set of items horizontally so they take equal space. This
          is a relatively low-level layout component used by
          <a href="#basic-sliding-viewport">basic-sliding-viewport</a>.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-spread-items">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-spread-items class="imageContainer" style="overflow-y: scroll;">
          <img src="resources/images/image1.jpg" alt="Lake">
          <img src="resources/images/image2.jpg" alt="Horses">
          <img src="resources/images/image6.jpg" alt="Wheat">
          <img src="resources/images/image3.jpg" alt="Mountain">
          <img src="resources/images/image7.jpg" alt="Palm tree">
        </basic-spread-items>
      </div>
  </section>
  <section>
    <h2><a name="basic-tab-strip">basic-tab-strip</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          Wraps a list component with a strip of tabs, one for each item in the
          list. Selecting a tab will select the corresponding item. Typically
          combined with a component like
          <a href="#basic-animation-stage">basic-animation-stage</a> or
          <a href="#basic-modes">basic-modes</a>.
          The latter combination is so common that it is made available as the
          single component <a href="#basic-tabs">basic-tabs</a>.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-tab-strip">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-tab-strip>
          <!-- Items don't have contents, to focus attention on the tabs. -->
          <basic-modes>
            <div aria-label="One"></div>
            <div aria-label="Two"></div>
            <div aria-label="Three"></div>
          </basic-modes>
        </basic-tab-strip>
      </div>
  </section>
  <section>
    <h2><a name="basic-tabs">basic-tabs</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
          A set of pages with a tab strip governing which page is shown. This
          stock combination puts together an instance of
          <a href="#basic-tab-strip">basic-tab-strip</a>
          with an instance of
          <a href="#basic-modes">basic-modes</a>.
          To create more complex arrangements, you can use either of those
          elements on its own.
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-tabs">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-tabs>
          <div class="panel" aria-label="One">Page one</div>
          <div class="panel" aria-label="Two">Page two</div>
          <div class="panel" aria-label="Three">Page three</div>
        </basic-tabs>
      </div>
  </section>
  Boilerplate for new entries:
  <section>
    <h2><a name="basic-thing">basic-thing</a></h2>
    <div class="descriptionAndDemo">
      <div class="description">
        <p>
        </p>
        <p>
          <a href="https://github.com/basic-web-components/basic-web-components/tree/master/packages/basic-thing">Docs</a>
        </p>
      </div>
      <div class="demo">
        <basic-thing>
        </basic-thing>
      </div>
  </section>
  <section>
    <p class="footnote">
      Sample images from Wikimedia Commons:
      Jacek Halicki (CC BY-SA 3.0),
      Myrabella (Wikimedia Commons, CC-BY-SA-4.0),
      CEphoto (Uwe Aranas, CC-BY-SA-3.0),
      Dietmar Rabich (rabich.de, CC BY-SA 4.0),
      Takuma Kimura (CC BY-SA 2.0),
      Doug Brown (CC BY-NC-SA 2.0).
  </section>
Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Uh oh!

FilesExpand file tree

index.html

Latest commit

History

index.html

File metadata and controls
