• EnglishEspañol日本語한국어Português
  • Log inStart now

LayoutItem

Child element of the <Layout> component.

By default uses the main type, to span the full width of the Layout area. Split left and split right provide a fixed left/right area. Layout only supports one type of each.

Usage

import { LayoutItem } from 'nr1'

Props

children

REQUIRED
node

Content to display inside the child item.

className

string

Appends class names to the component.

sizeType

enum

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

LayoutItem.SIZE_TYPE.MEDIUM, LayoutItem.SIZE_TYPE.SMALL,

>

style

object

Inline style for custom styling.

testId

string

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.

type

enum

Type can be:

  • Main — Used to place the main content on each view. It spans the full width of the layout area.

  • 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

    LayoutItem.TYPE.MAIN, LayoutItem.TYPE.SPLIT_LEFT, LayoutItem.TYPE.SPLIT_RIGHT,

    >
Copyright © 2024 New Relic Inc.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.