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>
)
}