This package provides a FluentUI React Native implementation of the WinUI 2.6 Expander control.
This component is only supported on Windows.
$ npm install @fluentui-react-native/experimental-expander --save
or
$ yarn add @fluentui-react-native/experimental-expander
After the package has been installed, run the following command to link the package.
npx react-native autolink-windows
Import Expander from @fluentui-react-native/experimental-expander
import { Expander } from @fluentui-react-native/experimental-expander
Add Expander
as follows:
<Expander collapsedHeight={50} expandedHeight={100}>
<Text>Text in the header</Text>
<Text>Text in the content</Text>
</Expander>
The first child element of Expander will be assigned to the header, and the second child element will be assigned to the content. If you would like multiple components in the header or the content, wrap them in View
as follows:
<Expander collapsedHeight={75} expandedHeight={150}>
<View>
<Text>Text in the header</Text>
<Text>Second line of text in the header<Text>
</View>
<View>
<Text>Text in the content</Text>
<Text>Second line of text in the content<Text>
</View>
</Expander>
width
contentHorizontalAlignment
contentVerticalAlignment
headerBackground
headerForeground
headerForegroundPointerOver
headerForegroundPressed
headerBorderBrush
headerBorderPointerOverBrush
headerBorderPressedBrush
headerDisabledForeground
headerDisabledBorderBrush
headerBorderThickness
contentBackground
contentBorderBrush
chevronBackground
chevronForeground
chevronPointerOverBackground
chevronPointerOverForeground
chevronPressedBackground
chevronPressedForeground
chevronBorderThickness
chevronBorderBrush
chevronBorderPointerOverBrush
chevronBorderPressedBrush
-
collapsedHeight
andexpandedHeight
must be set for Expander to display correctly. There is no need to set theheight
prop. - Non-native components within the header will not be interactable (i.e. if there is a
Button
in the header, and you press it, the Expander will expand, and theButton
functionality will not be performed). We recommend using react-native-xaml controls in the header if you would like an interactive control that does not have a native implementation.
Specifies the direction that the Expander should expand.
- 'down': Expands downward. This is the default.
- 'up': Expands upward.
Type | Required |
---|---|
enum('up', 'down') | No |
Specifies if the Expander is expanded. Default is false
.
Type | Required |
---|---|
boolean | No |
If set to false, the Expander will be disabled, i.e. the user will not be able to expand it.
Type | Required |
---|---|
boolean | No |
Sets the height of the Expander. In order to maintain expand/collapse functionality, do not set this value. Instead, use collapsedHeight
and expandedHeight
.
Type | Required |
---|---|
number | No |
Sets the height of the Expander while it is expanded.
Type | Required |
---|---|
number | Yes |
Sets the height of the Expander while it is collapsed.
Type | Required |
---|---|
number | Yes |
Callback for when the Expander begins to collapse.
Type | Required |
---|---|
function | No |
Callback for when the Expander begins to expand.
Type | Required |
---|---|
function | No |
Sets the width of the Expander.
Type | Required |
---|---|
number | No |
Sets the horizontal alignment of the Expander's content.
- 'center': The content is aligned in the center of the Expander.
- 'left': The content is aligned to the left of the Expander.
- 'right': The content is aligned to the right of the Expander.
- 'stretch': The content will stretch to fit the Expander.
Type | Required |
---|---|
enum('center', 'left', 'right', 'stretch') | No |
Sets the vertical alignment of the Expander's content.
- 'bottom': The content is aligned to the bottom of the Expander.
- 'center': The content is aligned in the center of the Expander.
- 'stretch': The content will stretch to fit the Expander.
- 'top': The content is aligned to the top of the Expander.
Type | Required |
---|---|
enum('bottom', 'center', 'stretch', 'top') | No |
Header background color. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header foreground color at rest. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header foreground color on pointer over. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header foreground color when pressed. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header border color at rest. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header border color on pointer over. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header border color when pressed. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header foreground color when disabled. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header border color when disabled. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Header border thickness.
Type | Required |
---|---|
number | No |
Content background color. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Content border color. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron background color at rest. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron foreground color at rest. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron background color on pointer over. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron foreground color on pointer over. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron background color when pressed. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron foreground color when pressed. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron border thickness.
Type | Required |
---|---|
number | No |
Chevron border color at rest. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron border color on pointer over. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |
Chevron border color when pressed. Input value should be hexadecimal string or a predefined color name string.
Type | Required |
---|---|
string | No |