CarouselNav | CoreAI design system

Default

Loading interactive example. Full source is available below.

View example source

// Copyright (c) Microsoft Corporation.
// Licensed under the MIT license.

import * as React from 'react';
import { Field } from "@coreai-ds/react-components";
import { Switch } from "@coreai-ds/react-components";
import { CarouselNav } from "@coreai-ds/react-components";
import { CarouselNavImageButton } from "@coreai-ds/react-components";
import { CarouselNavButton } from "@coreai-ds/react-components";

export const Default = () => {
    const swapImage = 'https://fabricweb.azureedge.net/fabric-website/assets/images/wireframe/image-square.png';
    const [useImageButtons, setUseImageButtons] = React.useState(false);
    const styles = /* css */ `
      .carousel-nav-default-example {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        box-shadow: var(--shadow16);
      }

      .carousel-nav-default-example__card {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: end;
        border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3);
        border-radius: 0 0 var(--borderRadiusMedium) var(--borderRadiusMedium);
        padding: 10px;
        min-height: 100px;
      }

      .carousel-nav-default-example__controls {
        display: flex;
        flex-direction: column;
        border: var(--strokeWidthThicker) solid var(--colorNeutralForeground3);
        border-bottom: none;
        border-radius: var(--borderRadiusMedium) var(--borderRadiusMedium) 0 0;
        padding: 10px;
      }

      .carousel-nav-default-example__field {
        flex: 1;
        grid-template-columns: max-content 1fr;
      }
    `;
    return (<>
        <style>{styles}</style>
        <div className="carousel-nav-default-example">
          <div className="carousel-nav-default-example__controls">
            <Field className="carousel-nav-default-example__field" label={<>
                  Use <code>CarouselNavImageButton</code>
                </>} orientation="horizontal">
              <Switch checked={useImageButtons} onChange={(_, data) => setUseImageButtons(data.checked)}/>
            </Field>
          </div>
          <div className="carousel-nav-default-example__card">
            <CarouselNav totalSlides={5} appearance="brand">
              {(index) => useImageButtons ? (<CarouselNavImageButton image={{ src: swapImage }} aria-label={`Carousel Nav Button ${index}`}/>) : (<CarouselNavButton aria-label={`Carousel Nav Button ${index}`}/>)}
            </CarouselNav>
          </div>
        </div>
      </>);
};

export default Default;

API referenceGenerated CoreAI prop and type summaries

API

Generated CoreAI prop summaries, not replacement type declarations. Most native DOM/event and ARIA props are omitted. ? means optional; JSDoc shows defaults, deprecations, and conditional requirements. Defaults assume the standard CoreAI provider.

CarouselNav API

Used to jump to a card based on index, using arrow navigation via Tabster.

The children of this component will be wrapped in a context to provide the appropriate value based on their index position.

interface CarouselNavProps {
  /**
   * Enables an alternate brand style when set to 'brand'
   */
  appearance?: "brand";

  as?: "div";

  children: NavButtonRenderFunction;

  className?: string;

  ref?: Ref<HTMLDivElement>;

  style?: CSSProperties;

  /**
   * The total number of slides available.
   * Users may override if using the component without a Carousel wrapper or implementing custom functionality.
   */
  totalSlides?: number;
}

Implementation

CoreAI 0.12.0; Fluent 9.74.9.

Setup and dependencies.

Import components from @coreai-ds/react-components. CoreAI guidance above takes precedence over API demonstration examples.