@fluentui-react-native/experimental-expander

This package provides a FluentUI React Native implementation of the WinUI 2.6 Expander control.

This component is only supported on Windows.

Getting started

$ 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

Usage

Import Expander from @fluentui-react-native/experimental-expander

import { Expander } from @fluentui-react-native/experimental-expander

Add Expander as follows:

``javascript

Text in the header
Text in the content

`

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:

`javascript


Text in the header
Second line of text in the header


Text in the content
Second line of text in the content


`

$3

- expandDirection
- expanded
- enabled
- height
- expandedHeight
- collapsedHeight
- onCollapsing
- onExpanding

$3

- 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

$3

- collapsedHeight and expandedHeight must be set for Expander to display correctly. There is no need to set the height 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 the Button 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.

---

Reference

Props

$3

Specifies the direction that the Expander should expand.

- 'down': Expands downward. This is the default.
- 'up': Expands upward.

| Type | Required |
| ------------------ | -------- |
| enum('up', 'down') | No |

---

$3

Specifies if the Expander is expanded. Default is false.

| Type | Required |
| ------- | -------- |
| boolean | No |

---

$3

If set to false, the Expander will be disabled, i.e. the user will not be able to expand it.

| Type | Required |
| ------- | -------- |
| boolean | No |

---

$3

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 |

---

$3

Sets the height of the Expander while it is expanded.

| Type | Required |
| ------ | -------- |
| number | Yes |

---

$3

Sets the height of the Expander while it is collapsed.

| Type | Required |
| ------ | -------- |
| number | Yes |

---

$3

Callback for when the Expander begins to collapse.

| Type | Required |
| -------- | -------- |
| function | No |

---

$3

Callback for when the Expander begins to expand.

| Type | Required |
| -------- | -------- |
| function | No |

---

Tokens

$3

Sets the width of the Expander.

| Type | Required |
| ------ | -------- |
| number | No |

---

$3

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 |

---

$3

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 |

---

$3

Header background color. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header foreground color at rest. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header foreground color on pointer over. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header foreground color when pressed. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header border color at rest. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header border color on pointer over. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header border color when pressed. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header foreground color when disabled. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header border color when disabled. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Header border thickness.

| Type | Required |
| ------ | -------- |
| number | No |

---

$3

Content background color. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Content border color. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron background color at rest. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron foreground color at rest. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron background color on pointer over. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron foreground color on pointer over. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron background color when pressed. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron foreground color when pressed. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron border thickness.

| Type | Required |
| ------ | -------- |
| number | No |

---

$3

Chevron border color at rest. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron border color on pointer over. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |

---

$3

Chevron border color when pressed. Input value should be hexadecimal string or a predefined color name string.

| Type | Required |
| ------ | -------- |
| string | No |