@instructure/ui-layout

---

category: packages

ui-layout

     

Deprecated Components

The ui-layout package will be removed in version 7.0.0. Please update your imports as follows:

• Flex will be removed in version 7.0.0. Use Flex from ui-flex.
• Grid will be removed in version 7.0.0. Use Grid from ui-grid.
• Media will be removed in version 7.0.0. Use Byline from ui-byline.
• Position will be removed in version 7.0.0. Use Position from ui-position.
• Responsive will be removed in version 7.0.0. Use Responsive from ui-responsive.
• View will be removed in version 7.0.0. Use View from ui-view.
• ContextView will be removed in version 7.0.0. Use ContextView from ui-view.
• DrawerLayout will be removed in version 7.0.0. Use DrawerLayout from ui-drawer-layout.

Codemods are provided to assist in updating the packages. See ui-codemods

Deprecated Utilities

The ui-layout package will be removed in version 7.0.0. Please update your imports as follows:

• calculateElementPosition will be removed in version 7.0.0. Use calculateElementPosition from ui-position.
• addElementQueryMatchListener will be removed in version 7.0.0. Use addElementQueryMatchListener from ui-position.
• addMediaQueryMatchListener will be removed in version 7.0.0. Use addMediaQueryMatchListener from ui-position.

Installation

yarn add @instructure/ui-layout

Usage

import React from 'react'
import { DrawerLayout } from '@instructure/ui-layout'

const MyLayout = () => {
  return (
    <DrawerLayout>
      <DrawerLayout.Tray>Hello from layout tray</DrawerLayout.Tray>
      <DrawerLayout.Content>Hello from layout content</DrawerLayout.Content>
    </DrawerLayout>
  )
}