Function default

Notes

  • The inline version should only be used on large screens. The rest of the content has to be transformed manually on every page, an example of this can be seen in the inline story. Be careful not to cover content in a way that affects readability!

Accessibility

  • The modal and wide variants will trigger modal windows, while inline variant will render the content on the existing page.
  • Focus is automatically moved into the side sheet when opened. But when using inline variant, you need to reset the focus manually when closing. See the story for examples.
  • When using the inline variant, the triggering button should have the aria-expanded attribute to indicate its state.
  • default(props): ReactNode

  • Parameters

    • props: (Omit<CommonProps & {
          customWidth?: undefined;
          size?: "small" | "extraSmall" | "wide";
      }, "ref"> | Omit<CommonProps & {
          customWidth?: string;
          size?: undefined;
      }, "ref">) & RefAttributes<HTMLDivElement>

    Returns ReactNode

Properties

$$typeof defaultProps? displayName? propTypes?

Properties

Readonly$$typeof

$$typeof: symbol

OptionaldefaultProps

defaultProps?: Partial<((Omit<CommonProps & { customWidth?: undefined; size?: "small" | "extraSmall" | "wide" | undefined; }, "ref"> | Omit<CommonProps & { customWidth?: string | undefined; size?: undefined; }, "ref">) & RefAttributes<...>)>

Deprecated

Use values for destructuring assignments instead.

OptionaldisplayName

displayName?: string

Used in debugging messages. You might want to set it explicitly if you want to display a different name for debugging purposes.

See

Legacy React Docs

OptionalpropTypes

propTypes?: WeakValidationMap<((Omit<CommonProps & { customWidth?: undefined; size?: "small" | "extraSmall" | "wide" | undefined; }, "ref"> | Omit<CommonProps & { customWidth?: string | undefined; size?: undefined; }, "ref">) & RefAttributes<...>)>

Settings

Member Visibility

On This Page

NotesAccessibility
Properties