@fluentui/react-drawer v9.3.2
@fluentui/react-drawer
React Drawer components for Fluent UI React
These are not production-ready components and should never be used in product. This space is useful for testing new components whose APIs might change before final release.
The Drawer gives users a quick entry point to configuration and information. It should be used when retaining context is beneficial to users. An overlay is optional depending on whether or not interacting with the background content is beneficial to the user’s context/scenario. An overlay makes the Drawer blocking and signifies that the users full attention is required when making configurations.
Usage
To import React Drawer components:
import {
Drawer,
OverlayDrawer,
InlineDrawer,
DrawerHeader,
DrawerHeaderTitle,
DrawerHeaderNavigation,
DrawerBody
} from "@fluentui/react-components';
Simple example of Drawer Usage:
import { DrawerBody, DrawerHeader, DrawerHeaderTitle, Drawer } from '@fluentui/react-components';
import { Button } from '@fluentui/react-components';
import { Dismiss24Regular } from '@fluentui/react-icons';
export const App = () => (
<Drawer type="inline" open>
<DrawerHeader>
<DrawerHeaderTitle
action={
<Button
appearance="subtle"
aria-label="Close drawer"
icon={<Dismiss24Regular />}
onClick={() => setIsOpen(false)}
/>
}
>
Title goes here
</DrawerHeaderTitle>
</DrawerHeader>
<DrawerBody>
<p>Content goes here</p>
</DrawerBody>
</Drawer>
);
Specification
See the Spec.md file for background information on the design/engineering decisions of the component.
API
For information about the components, please refer to the API documentation.
1 day ago
1 day ago
4 days ago
5 days ago
5 days ago
6 days ago
7 days ago
8 days ago
8 days ago
12 days ago
11 days ago
12 days ago
13 days ago
15 days ago
14 days ago
15 days ago
18 days ago
19 days ago
19 days ago
20 days ago
21 days ago
22 days ago
25 days ago
26 days ago
27 days ago
28 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
9 months ago
6 months ago
11 months ago
11 months ago
10 months ago
10 months ago
10 months ago
10 months ago
9 months ago
10 months ago
9 months ago
8 months ago
6 months ago
7 months ago
7 months ago
9 months ago
8 months ago
10 months ago
6 months ago
7 months ago
10 months ago
10 months ago
6 months ago
8 months ago
6 months ago
10 months ago
9 months ago
11 months ago
11 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
11 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
10 months ago
10 months ago
11 months ago
11 months ago
8 months ago
8 months ago
6 months ago
7 months ago
6 months ago
7 months ago
7 months ago
7 months ago
6 months ago
7 months ago
8 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
8 months ago
9 months ago
9 months ago
9 months ago
10 months ago
11 months ago
6 months ago
9 months ago
9 months ago
10 months ago
9 months ago
10 months ago
9 months ago
10 months ago
10 months ago
10 months ago
9 months ago
6 months ago
8 months ago
10 months ago
8 months ago
7 months ago
8 months ago
6 months ago
7 months ago
7 months ago
6 months ago
7 months ago
8 months ago
8 months ago
8 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
7 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
7 months ago
10 months ago
10 months ago
11 months ago
10 months ago
7 months ago
7 months ago
9 months ago
7 months ago
6 months ago
9 months ago
9 months ago
10 months ago
7 months ago
7 months ago
8 months ago
9 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
9 months ago
6 months ago
8 months ago
8 months ago
10 months ago
11 months ago
10 months ago
10 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago