• /
  • Log in
  • Free account

CollapsibleLayoutItem

Usage

import { CollapsibleLayoutItem } from 'nr1'

Props

childrenrequirednode

Content to display inside the child item.

classNamestring

Appends class names to the component.

collapsedboolean

Set this prop to control the collapsed state of the split from your own external control.

defaultCollapsedboolean
DEFAULT
false

Not actually a "default" – this only sets the initial collapsed state of the split. Defaults to false.

onChangeCollapsedfunction

This function will be called whenever the user clicks the default trigger button to collapse or expand the split. If you are controlling the state of the component, use this to set the value of the collapsed prop.

function (
event: React.MouseEvent,
collapsed: boolean
)
sizeTypeenum
DEFAULT
CollapsibleLayoutItem.SIZE_TYPE.MEDIUM

Determines the width of the layout item. We recommend you use the small size for navigation purposes (ex. sidebars) and the medium size for showing contextualized information (ex. activity stream).

Size type only works on SPLIT_LEFT and SPLIT_RIGHT items.

<One of
CollapsibleLayoutItem.SIZE_TYPE.MEDIUM,
CollapsibleLayoutItem.SIZE_TYPE.SMALL,
>
styleobject

Inline style for custom styling.

testIdstring

Adds a data-test-id attribute. Use it to target the component in unit and E2E tests.

For a test id to be valid, prefix it with your nerdpack id, followed up by a dot.

For example, my-nerdpack.some-element.

Note: You might not see data-test-id attributes as they are removed from the DOM, to debug them pass a e2e-test query parameter to the URL.

triggerTyperequiredenum

Choose whether to use the inbuilt trigger buttons to allow collapsing/expanding the split, or your own custom ones (e.g. a switch outside the layout or a custom button inside the layout). It is strongly recommended not to mix these patterns, i.e. do not choose CollapsibleLayoutItem.TRIGGER_TYPE.INBUILT and also provide your own custom triggers.

<One of
CollapsibleLayoutItem.TRIGGER_TYPE.CUSTOM,
CollapsibleLayoutItem.TRIGGER_TYPE.INBUILT,
>
typerequiredenum

Type can be:

  • Split left — Render as a fixed area on the left of the layout.
  • Split right — Render as a fixed area on the right of the layout.
<One of
CollapsibleLayoutItem.TYPE.SPLIT_LEFT,
CollapsibleLayoutItem.TYPE.SPLIT_RIGHT,
>
Create issueEdit page
Copyright © 2021 New Relic Inc.