Banner

"Banner Header"

<BannerItem>Error 1</BannerItem>
<BannerItem>Error 2</BannerItem>
<BannerItem>Error 3</BannerItem>
<BannerItem>Error 4</BannerItem>
<BannerItem>Error 5</BannerItem>
<BannerItem>Error 6</BannerItem>

import * as React from "react";
import { Banner, BannerItem } from "spaceweb/banner";

export default () => {
  return (
    <Banner collapsible title="Banner Header">
      <BannerItem>Error 1</BannerItem>
      <BannerItem>Error 2</BannerItem>
      <BannerItem>Error 3</BannerItem>
      <BannerItem>Error 4</BannerItem>
      <BannerItem>Error 5</BannerItem>
      <BannerItem>Error 6</BannerItem>
    </Banner>
  );
}

Banner is a component to render alert notifications. They are composed of banner items describing errors as per the usecase.

Examples

The list type of the banner items (i.e numeric or bullets) can be handled by providing $as prop. Whenever $as is set to ul or ol, the role of BannerItemContainer will automatically be set to list. To provide custom role to BannerItemContainer, pass role prop to Banner component.

To fix the height of error list container, user needs to provide overrides to BannerItemContainer or Root.

Title property of Banner accepts ReactNode. Hence, a custom title component can also be passed to the title prop of banner.

Don't unmount banner on the basis of visible prop. Instead let Banner handle the state, or else animation won't work

API

Banner props

BannerItem props

You can check the implementation of the component for more details.

Banner exports

You can import this module like so:

import {Banner} from 'spaceweb/banner'

It exports the following components or utility functions:

• Banner
• BannerItem
• StyledBanner
• StyledBannerItem
• StyledTitle