From d4ff980ea86a6376056e74ad2d0cb951dd0484d7 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Fri, 25 Sep 2026 16:02:25 +0200 Subject: [PATCH 01/10] reorder sections and add placeholders for missing ones --- .../native-styling-element-guide.md | 950 +++++++++--------- 1 file changed, 479 insertions(+), 471 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index 34aa89cf1c6..ae36c5f48d7 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -858,6 +858,10 @@ The default class to style the navigation is named `navigationStyle`. There is n Add-on widgets are distributed through the [Native Mobile Resources](/appstore/modules/native-mobile-resources/) module, and are not shipped with Mendix Studio Pro. Other add-ons might also be distributed through app templates, as well as modules importing pages from other apps. +### Accordion + +PLACEHOLDER + ### Activity Indicator {#activity-indicator} The activity indicator widget displays a circular loading indicator. This is how an activity indicator widget could look in an app: @@ -884,10 +888,66 @@ export const com_mendix_widget_native_activityindicator_ActivityIndicator = { The default class to style all activity indicators is named `com_mendix_widget_native_activityindicator_ActivityIndicator`. +### Animation + +The animation widget allows you to animate a container. You can make the content wiggle, move, change size, and more. The widget's style properties are as follows: + +```javascript +export const com_mendix_widget_native_animation_Animation = { + container: { + // This has all ViewStyle properties. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | | + +The default class to style all animation widgets is named `com_mendix_widget_native_animation_Animation`. + ### App Events The app events widget allows you to set actions when your app’s network status is changed, and can let you set limits on action calls. This widget has no user interface so does not support any styling. +### Background Gradient + +The background gradient widget allows you to apply a background that transitions between multiple colors in a linear direction. + +```javascript +export const com_mendix_widget_native_backgroundgradient_BackgroundGradient = { + container: { + // This has all ViewStyle properties. + }, + colorList: { + color: null, // Colors can be passed in different formats. Valid color value formats are #d0d0d0, rgb(115,155,155), or rgba(195,226,226,0.5) + offset: null, // A color-stop's value, followed by one or more optional stop positions (should be between 0.0 and 1.0) + }, + angle: null, // Line of direction. Takes a value from `0` to `360`. A value of 0 is equivalent to top; increasing values rotate the design clockwise. + opacity: null, // Takes a value from `0` to `100`. The lower the value, the more transparent. +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `angle` | | Line of direction. Takes a value from `0` to `360`. A value of 0 is equivalent to top; increasing values rotate the design clockwise. | +| `colorList` | [gradient_color_object](#gradient-color-object) | Passes the colors you want to display in an array. Example: `[{ color: "#fff", offset: 0 }, { color: "#000", offset: 1 }]` | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `opacity` | | Takes a value from `0` to `100`. The lower the value, the more transparent. | + +The default class to style all background gradients is named `com_mendix_widget_native_backgroundgradient_BackgroundGradient`. + +#### Background Gradient Types + +##### gradient_color_object {#gradient-color-object} + +An object `{ color: string, offset: number }` that represents the color and the offset. + +| Name | Type | Description | +| --- | --- | --- | +| color | `string` | Colors can be passed in different formats. Valid color value formats are `#d0d0d0`, `rgb(115,155,155)`, or `rgba(195,226,226,0.5)` | +| offset | `number` | A color-stop's value, followed by one or more optional stop positions (should be between `0.0` and `1.0`) | + ### Background Image The background image widget enables layering one or more widgets on top of an image. @@ -936,6 +996,140 @@ export const com_mendix_widget_native_badge_Badge = { The default class to style all badges is named `com_mendix_widget_native_badge_Badge`. +### Bar Chart + +The [Bar Chart](https://github.com/mendix/widgets-resources/tree/master/packages/pluggableWidgets/bar-chart-native) widget renders a horizontal bar graph based on static and dynamic data sets. + +```javascript +export const com_mendix_widget_native_barchart_BarChart = { + container: { + // This has all ViewStyle properties. + }, + errorMessage: { + // This has all TextStyle properties. + }, + chart: { + // This has all ViewStyle properties. + }, + grid: { + backgroundColor: null, // Applies a color to the grid background (string). + dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). + lineColor: null, // Applies a color to the grid lines (string). + width: null, // Applies a width to the grid lines (number). + padding: null, // Applies padding to all sides of the grid (number). This makes axis value labels visible. + paddingBottom: null, // Applies padding to the bottom side of the grid (number). This makes axis value labels visible. + paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. + paddingLeft: null, // Applies padding to the left side of the grid (number). This makes axis value labels visible. + paddingRight: null, // Applies padding to the right side of the grid (number). This makes axis value labels visible. + paddingTop: null, // Applies padding to the top side of the grid (number). This makes axis value labels visible. + paddingVertical: null, // Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. + }, + xAxis: { + color: null, // Applies a color to the grid background (string). + dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). + fontFamily: null, // Applies a font type to the axis value labels (string). + fontSize: null, // Applies a size to the axis value labels (number). + fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic"). + fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). + lineColor: null, // Applies a color to the axis line (string). + width: null, // Applies a width to the axis line (number). + label: { + // All TextStyle properties. + relativePositionGrid: null, // Positions the axis label at the **bottom** or **right** side of the grid. + } + }, + yAxis: { + // All `xAxis` element styles. + }, + legend: { + container: { + // All ViewStyle properties. + }, + item: { + // All ViewStyle properties. + }, + indicator: { + // All ViewStyle properties. + }, + label: { + // All TextStyle properties. + } + }, + domain: { + padding: { + x: null, // Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). + y: null, // Applies a number of pixels of padding to add the beginning and end of the y axis domain (number). + }, + }, + bars: { + barColorPalette: null, // Provides colors to bars that do not have a bar color configured (string with list of colors separated by ';', one color for each series). + barsOffset: null, // Determines the number of pixels each bar in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. + customBarStyles: { + any_custom_bar_style_name: { + bar: { + ending: null, // Specifies a radius to apply to each bar. + barColor: null, // Applies a color to the bar (string). If bars are configured to have labels, the labels will be the same color as the bar. + width: null, // Applies a width to the bar (number). + }, + label: { + fontFamily: null, // Applies a font type to the bar label (string). + fontSize: null, // Applies a size to the bar label (number). + fontStyle: null, // Applies a font style to the bar label (**normal** or **italic**). + fontWeight: null, // Applies a font weight to the bar label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). + } + } + } + } +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `grid` | `backgroundColor` | Applies a color to the grid background (string). | +| `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | +| `grid` | `lineColor` | Applies a color to the grid lines (string). | +| `grid` | `width` | Applies a width to the grid lines (number). | +| `grid` | `padding` | Applies padding to all sides of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingBottom` | Applies padding to the bottom side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingHorizontal` | Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingLeft` | Applies padding to the left side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingRight` | Applies padding to the right side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingTop` | Applies padding to the top side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingVertical` | Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. | +| `xAxis` | `color` | Applies a color to the axis value labels (string). | +| `xAxis` | `dashArray` | Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | +| `xAxis` | `fontFamily` | Applies a font type to the axis value labels (string). | +| `xAxis` | `fontSize` | Applies a size to the axis value labels (number). | +| `xAxis` | `fontStyle` | Applies a font style to the axis value labels ("normal" or "italic"). | +| `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | +| `xAxis` | `lineColor` | Applies a color to the axis line (string). | +| `xAxis` | `width` | Applies a width to the axis line (number). | +| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **bottom** or **right** side of the grid. | +| `yAxis` | All `xAxis` element styles. | | +| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **top** or **left** side of the grid. | +| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `domain` > `padding` | `x` | Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). | +| `domain` > `padding` | `y` | Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). | +| `bars` | `barColorPalette` | Provides colors to bars that do not have a bar color configured (string with list of colors separated by ';', one color for each series). | +| `bars` | `barsOffset` | Determines the number of pixels each bar in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. | +| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `bar` | `ending` | Specifies a radius to apply to each bar. | +| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `bar` | `barColor` | Applies a color to the bar (string). If bars are configured to have labels, the labels will be the same color as the bar. | +| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `bar` | `width` | Applies a width to the bar (number). | +| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontFamily` | Applies a font type to the bar label (string). | +| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontSize` | Applies a size to the bar label (number). | +| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontStyle` | Applies a font style to the bar label (**normal** or **italic**). | +| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontWeight` | Applies a font weight to the bar label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | + +The default class to style all bar chart widgets is named `com_mendix_widget_native_barchart_BarChart`. + ### Barcode Scanner The barcode scanner widget allows your app to scan barcodes and QR codes. This widget renders a camera view in a styleable container. @@ -965,6 +1159,60 @@ export const com_mendix_widget_native_barcodescanner_BarcodeScanner = { The default class to style all barcode scanner widgets is named `com_mendix_widget_native_barcodescanner_BarcodeScanner`. +### Bottom Sheet + +The bottom sheet widget creates a set of options while blocking interaction with the rest of the screen or a draggable surface anchored to the bottom of the screen. There are two customizable variations: + +* Modal bottom sheet: + + {{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/modal-bottom-sheet.gif" alt="modal bottom sheet" width="350" class="no-border" >}} + +* Expanding bottom sheet: + + {{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/expanding-bottom-sheet.gif" alt="expanding bottom sheet" width="350" class="no-border" >}} + +```javascript +export const com_mendix_widget_native_bottomsheet_BottomSheet = { + container: { + // This has all ViewStyle properties. + }, + containerWhenExpandedFullscreen: { + // This has all ViewStyle properties. This has all ViewStyle properties. Only available if `Expading` and `Enable full screen` are enabled. + }, + modal: { + // This has all ViewStyle properties. + }, + defaultStyle: { + // This has all TextStyle properties. Available when `Default` is selected as style for basic items. + }, + primaryStyle: { + // This has all TextStyle properties. Available when `Primary` is selected as style for basic items. + }, + dangerStyle: { + // This has all TextStyle properties. Available when `Danger` is selected as style for basic items. + }, + customStyle: { + // This has all TextStyle properties. Available when `Custom` is selected as style for basic items. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | | +| `containerWhenExpandedFullscreen` | This has all ViewStyle properties. | Only available if `Expading` and `Enable full screen` are enabled. | +| `modal` | This has all ViewStyle properties. | | +| `defaultStyle` | This has all TextStyle properties. | Available when `Default` is selected as style for basic items. | +| `primaryStyle` | This has all TextStyle properties. | Available when `Primary` is selected as style for basic items. | +| `dangerStyle` | This has all TextStyle properties. | Available when `Danger` is selected as style for basic items. | +| `customStyle` | This has all TextStyle properties. | Available when `Custom` is selected as style for basic items. | + +The default class to style all bottom sheet widgets is named `com_mendix_widget_native_bottomsheet_BottomSheet`. + +### Carousel + +PLACEHOLDER + ### Color Picker The color picker widget allows a user to pick a color from a color spectrum. @@ -987,18 +1235,152 @@ export const com_mendix_widget_native_colorpicker_ColorPicker = { The default class to style all color picker widgets is named `com_mendix_widget_native_colorpicker_ColorPicker`. -### Feedback - -The feedback widget allows users to give direct feedback. This is how a feedback widget could look in an app: +### Column Chart -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/feedback-two.png" alt="feedback" width="350" class="no-border" >}} +The [column chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/column-chart-native) widget renders a vertical column graph based on static and dynamic data sets. ```javascript -export const com_mendix_widget_native_feedback_Feedback = { - floatingButton: { - // This has all ViewStyle properties. - }, - dialog: { +export const com_mendix_widget_native_columnchart_ColumnChart = { + container: { + // All ViewStyle properties. + }, + errorMessage: { + // All TextStyle properties. + }, + chart: { + // All ViewStyle properties. + }, + grid: { + backgroundColor: null, // Applies a color to the grid background (string). + dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). + lineColor: null, // Applies a color to the grid lines (string). + width: null, // Applies a width to the grid lines (number). + padding: null, // Applies padding to all sides of the grid (number). This makes axis value labels visible. + paddingBottom: null, // Applies padding to the bottom side of the grid (number). This makes axis value labels visible. + paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. + paddingLeft: null, // Applies padding to the left side of the grid (number). This makes axis value labels visible. + paddingRight: null, // Applies padding to the right side of the grid (number). This makes axis value labels visible. + paddingTop: null, // Applies padding to the top side of the grid (number). This makes axis value labels visible. + paddingVertical: null, // Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. + }, + xAxis: { + color: null, // Applies a color to the axis value labels (string). + dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). + fontFamily: null, // Applies a font type to the axis value labels (string). + fontSize: null, // Applies a size to the axis value labels (number). + fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic"). + fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). + lineColor: null, // Applies a color to the axis line (string). + width: null, // Applies a width to the axis line (number). + label: { + // All TextStyle properties. + relativePositionGrid: null, //P ositions the axis label at the **bottom** or **right** side of the grid. + } + }, + yAxis: { + // All xAxis properties + }, + legend: { + container: { + // All ViewStyle properties. + }, + item: { + // All ViewStyle properties. + }, + indicator: { + // All ViewStyle properties. + }, + label: { + // All TextStyle properties. + }, + }, + domain: { + padding: { + x: null, // Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). + y: null, // Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). + } + }, + columns: { + columnColorPalette: null, // Provides colors to columns that do not have a column color configured (string with list of colors separated by ';', one color for each series). + columnsOffset: null, // Determines the number of pixels each column in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. + customColumnStyles: { + any_custom_column_style_name: { + column: { + ending: null, // Specifies a radius to apply to each column. + columnColor: null, // Applies a color to the column (string). If columns are configured to have labels, the labels will be the same color as the column. + width: null, // Applies a width to the column (number). + }, + label: { + fontFamily: null, // Applies a font type to the column label (string). + fontSize: null, // Applies a size to the column label (number). + fontStyle: null, // Applies a font style to the column label (**normal** or **italic**). + fontWeight: null, // Applies a font weight to the column label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). + } + } + } + } +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `grid` | `backgroundColor` | Applies a color to the grid background (string). | +| `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | +| `grid` | `lineColor` | Applies a color to the grid lines (string). | +| `grid` | `width` | Applies a width to the grid lines (number). | +| `grid` | `padding` | Applies padding to all sides of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingBottom` | Applies padding to the bottom side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingHorizontal` | Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingLeft` | Applies padding to the left side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingRight` | Applies padding to the right side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingTop` | Applies padding to the top side of the grid (number). This makes axis value labels visible. | +| `grid` | `paddingVertical` | Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. | +| `xAxis` | `color` | Applies a color to the axis value labels (string). | +| `xAxis` | `dashArray` | Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | +| `xAxis` | `fontFamily` | Applies a font type to the axis value labels (string). | +| `xAxis` | `fontSize` | Applies a size to the axis value labels (number). | +| `xAxis` | `fontStyle` | Applies a font style to the axis value labels ("normal" or "italic"). | +| `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | +| `xAxis` | `lineColor` | Applies a color to the axis line (string). | +| `xAxis` | `width` | Applies a width to the axis line (number). | +| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **bottom** or **right** side of the grid. | +| `yAxis` | All `xAxis` element styles. | | +| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **top** or **left** side of the grid. | +| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `domain` > `padding` | `x` | Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). | +| `domain` > `padding` | `y` | Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). | +| `columns` | `columnColorPalette` | Provides colors to columns that do not have a column color configured (string with list of colors separated by ';', one color for each series). | +| `columns` | `columnsOffset` | Determines the number of pixels each column in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. | +| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `column` | `ending` | Specifies a radius to apply to each column. | +| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `column` | `columnColor` | Applies a color to the column (string). If columns are configured to have labels, the labels will be the same color as the column. | +| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `column` | `width` | Applies a width to the column (number). | +| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontFamily` | Applies a font type to the column label (string). | +| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontSize` | Applies a size to the column label (number). | +| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontStyle` | Applies a font style to the column label (**normal** or **italic**). | +| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontWeight` | Applies a font weight to the column label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | + +The default class to style all column chart widgets is named `com_mendix_widget_native_columnchart_ColumnChart`. + +### Feedback + +The feedback widget allows users to give direct feedback. This is how a feedback widget could look in an app: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/feedback-two.png" alt="feedback" width="350" class="no-border" >}} + +```javascript +export const com_mendix_widget_native_feedback_Feedback = { + floatingButton: { + // This has all ViewStyle properties. + }, + dialog: { // This has all ViewStyle properties. }, title: { @@ -1110,6 +1492,91 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton The default class to style all floating actions buttons is named `com_mendix_widget_native_floatingactionbutton_FloatingActionButton`. +### Gallery + +The Gallery widget (a replacement for both template grids and list views) helps you build beautiful lists and grids for tablet and mobile devices. + +```javascript +export const com_mendix_widget_native_gallery_Gallery = { + container: { + // This has all ViewStyle properties. + }, + emptyPlaceholder: { + // This has all ViewStyle properties. Applies a view style to the empty placeholder. + }, + firstItem: { + // This has all ViewStyle properties. Applies a view style to the first item of the list. + }, + lastItem: { + // This has all ViewStyle properties. Applies a view style to the last item of the list. + }, + list: { + // This has all ViewStyle properties. Applies a view style to the list container. + }, + listitem: { + // This has all ViewStyle properties. Applies a view style to each item container in the list. + }, + loadMoreButtonContainer: { + // This has all ViewStyle properties. Applies a view style to the load more button container. + }, + loadMoreButtonPressableContainer: { + // This has all ViewStyle properties. Applies a view style to the load more button container. + rippleColor: null, // Defines the color of the ripple effect. ([color](https://reactnative.dev/docs/colors)) (Android only) + borderless: null, // Defines if ripple effect should not include border. (Boolean) (Android only) + radius: null, // Defines the radius of the ripple effect. (number) (Android only) + foreground: null, // Set to true to add the ripple effect to the foreground of the view, instead of the background. (Boolean) (Android only) + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `emptyPlaceholder` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the empty placeholder. | +| `firstItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the first item of the list. | +| `lastItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the last item of the list. | +| `list` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the list container. | +| `listItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to each item container in the list. | +| `loadMoreButtonContainer` | All [ViewStyle](https://reactnative.dev/docs/text-style-props) properties. | Applies a view style to the load more button container. | +| `loadMoreButtonPressableContainer` | All [ViewStyle](https://reactnative.dev/docs/text-style-props) properties. | Applies a view style to the load more button container. | +| `loadMoreButtonPressableContainer` | rippleColor | Defines the color of the ripple effect. ([color](https://reactnative.dev/docs/colors)) (Android only) | +| `loadMoreButtonPressableContainer` | borderless | Defines if ripple effect should not include border. (Boolean) (Android only) | +| `loadMoreButtonPressableContainer` | radius | Defines the radius of the ripple effect. (number) (Android only) | +| `loadMoreButtonPressableContainer` | foreground | Set to true to add the ripple effect to the foreground of the view, instead of the background. (Boolean) (Android only) | +| `loadMoreButtonCaption` | All [TextStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a text style to the load more button caption. | + +The default class to style all Gallery widgets is named `com_mendix_widget_native_gallery_Gallery`. + +#### Gallery Filtering + +In order to enable filtering within the gallery items you need to select the desired attributes to be filtered in the **Filtering** tab. + +```javascript +export const com_mendix_widget_native_gallerytextfilter_GalleryTextFilter = { + textInputContainer: { + // This has all ViewStyle properties. Applies a view style to the container of the text input. + }, + textInputContainerFocused: { + // This has all ViewStyle properties. Applies a view style to the container of the text input when the text box is focused. + }, + textInput: { + // This has all ViewStyle properties. Applies a view style to the text input. + }, + textInputClearIcon: { + // This has all ViewStyle properties. Applies style to the text clear button in the text box. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `textInputContainer` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the container of the text input. | +| `textInputContainerFocused` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the container of the text input when the text box is focused. | +| `textInput` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the text input. | +| `textInputClearIcon` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies style to the text clear button in the text box. | + +The default class to style all gallery text filter widgets is named `com_mendix_widget_native_gallerytextfilter_GalleryTextFilter`. + ### Maps The maps widget supports various digital map providers. This is how a maps widget could look in an app: @@ -1490,24 +1957,6 @@ export const com_mendix_widget_native_webview_WebView = { The default class to style all web views is named `com_mendix_widget_native_webview_WebView`. -### Animation - -The animation widget allows you to animate a container. You can make the content wiggle, move, change size, and more. The widget's style properties are as follows: - -```javascript -export const com_mendix_widget_native_animation_Animation = { - container: { - // This has all ViewStyle properties. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | - -The default class to style all animation widgets is named `com_mendix_widget_native_animation_Animation`. - ### Introduction Screen This introduction screen widget displays paginated contents you can swipe through, and offers buttons on each page to proceed or go back: @@ -1602,61 +2051,11 @@ export const com_mendix_widget_native_listviewswipe_ListViewSwipe = { The default class to style all animation widgets is named `com_mendix_widget_native_listviewswipe_ListViewSwipe`. -### Bottom Sheet - -The bottom sheet widget creates a set of options while blocking interaction with the rest of the screen or a draggable surface anchored to the bottom of the screen. There are two customizable variations: - -* Modal bottom sheet: - - {{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/modal-bottom-sheet.gif" alt="modal bottom sheet" width="350" class="no-border" >}} +### Popup Menu -* Expanding bottom sheet: +The popup menu widget allows you to show a context menu exactly where the user taps. - {{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/expanding-bottom-sheet.gif" alt="expanding bottom sheet" width="350" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_bottomsheet_BottomSheet = { - container: { - // This has all ViewStyle properties. - }, - containerWhenExpandedFullscreen: { - // This has all ViewStyle properties. This has all ViewStyle properties. Only available if `Expading` and `Enable full screen` are enabled. - }, - modal: { - // This has all ViewStyle properties. - }, - defaultStyle: { - // This has all TextStyle properties. Available when `Default` is selected as style for basic items. - }, - primaryStyle: { - // This has all TextStyle properties. Available when `Primary` is selected as style for basic items. - }, - dangerStyle: { - // This has all TextStyle properties. Available when `Danger` is selected as style for basic items. - }, - customStyle: { - // This has all TextStyle properties. Available when `Custom` is selected as style for basic items. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `containerWhenExpandedFullscreen` | This has all ViewStyle properties. | Only available if `Expading` and `Enable full screen` are enabled. | -| `modal` | This has all ViewStyle properties. | | -| `defaultStyle` | This has all TextStyle properties. | Available when `Default` is selected as style for basic items. | -| `primaryStyle` | This has all TextStyle properties. | Available when `Primary` is selected as style for basic items. | -| `dangerStyle` | This has all TextStyle properties. | Available when `Danger` is selected as style for basic items. | -| `customStyle` | This has all TextStyle properties. | Available when `Custom` is selected as style for basic items. | - -The default class to style all bottom sheet widgets is named `com_mendix_widget_native_bottomsheet_BottomSheet`. - -### Popup Menu - -The popup menu widget allows you to show a context menu exactly where the user taps. - -A main object has four objects: +A main object has four objects: ```javascript export const com_mendix_widget_native_popupmenu_PopupMenu = { @@ -2001,140 +2400,6 @@ export const com_mendix_widget_native_linechart_LineChart = { The default class to style all line chart widgets is named `com_mendix_widget_native_linechart_LineChart`. -### Bar Chart - -The [Bar Chart](https://github.com/mendix/widgets-resources/tree/master/packages/pluggableWidgets/bar-chart-native) widget renders a horizontal bar graph based on static and dynamic data sets. - -```javascript -export const com_mendix_widget_native_barchart_BarChart = { - container: { - // This has all ViewStyle properties. - }, - errorMessage: { - // This has all TextStyle properties. - }, - chart: { - // This has all ViewStyle properties. - }, - grid: { - backgroundColor: null, // Applies a color to the grid background (string). - dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). - lineColor: null, // Applies a color to the grid lines (string). - width: null, // Applies a width to the grid lines (number). - padding: null, // Applies padding to all sides of the grid (number). This makes axis value labels visible. - paddingBottom: null, // Applies padding to the bottom side of the grid (number). This makes axis value labels visible. - paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. - paddingLeft: null, // Applies padding to the left side of the grid (number). This makes axis value labels visible. - paddingRight: null, // Applies padding to the right side of the grid (number). This makes axis value labels visible. - paddingTop: null, // Applies padding to the top side of the grid (number). This makes axis value labels visible. - paddingVertical: null, // Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. - }, - xAxis: { - color: null, // Applies a color to the grid background (string). - dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). - fontFamily: null, // Applies a font type to the axis value labels (string). - fontSize: null, // Applies a size to the axis value labels (number). - fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic"). - fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). - lineColor: null, // Applies a color to the axis line (string). - width: null, // Applies a width to the axis line (number). - label: { - // All TextStyle properties. - relativePositionGrid: null, // Positions the axis label at the **bottom** or **right** side of the grid. - } - }, - yAxis: { - // All `xAxis` element styles. - }, - legend: { - container: { - // All ViewStyle properties. - }, - item: { - // All ViewStyle properties. - }, - indicator: { - // All ViewStyle properties. - }, - label: { - // All TextStyle properties. - } - }, - domain: { - padding: { - x: null, // Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). - y: null, // Applies a number of pixels of padding to add the beginning and end of the y axis domain (number). - }, - }, - bars: { - barColorPalette: null, // Provides colors to bars that do not have a bar color configured (string with list of colors separated by ';', one color for each series). - barsOffset: null, // Determines the number of pixels each bar in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. - customBarStyles: { - any_custom_bar_style_name: { - bar: { - ending: null, // Specifies a radius to apply to each bar. - barColor: null, // Applies a color to the bar (string). If bars are configured to have labels, the labels will be the same color as the bar. - width: null, // Applies a width to the bar (number). - }, - label: { - fontFamily: null, // Applies a font type to the bar label (string). - fontSize: null, // Applies a size to the bar label (number). - fontStyle: null, // Applies a font style to the bar label (**normal** or **italic**). - fontWeight: null, // Applies a font weight to the bar label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). - } - } - } - } -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `grid` | `backgroundColor` | Applies a color to the grid background (string). | -| `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | -| `grid` | `lineColor` | Applies a color to the grid lines (string). | -| `grid` | `width` | Applies a width to the grid lines (number). | -| `grid` | `padding` | Applies padding to all sides of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingBottom` | Applies padding to the bottom side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingHorizontal` | Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingLeft` | Applies padding to the left side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingRight` | Applies padding to the right side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingTop` | Applies padding to the top side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingVertical` | Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. | -| `xAxis` | `color` | Applies a color to the axis value labels (string). | -| `xAxis` | `dashArray` | Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | -| `xAxis` | `fontFamily` | Applies a font type to the axis value labels (string). | -| `xAxis` | `fontSize` | Applies a size to the axis value labels (number). | -| `xAxis` | `fontStyle` | Applies a font style to the axis value labels ("normal" or "italic"). | -| `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | -| `xAxis` | `lineColor` | Applies a color to the axis line (string). | -| `xAxis` | `width` | Applies a width to the axis line (number). | -| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **bottom** or **right** side of the grid. | -| `yAxis` | All `xAxis` element styles. | | -| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **top** or **left** side of the grid. | -| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `domain` > `padding` | `x` | Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). | -| `domain` > `padding` | `y` | Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). | -| `bars` | `barColorPalette` | Provides colors to bars that do not have a bar color configured (string with list of colors separated by ';', one color for each series). | -| `bars` | `barsOffset` | Determines the number of pixels each bar in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. | -| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `bar` | `ending` | Specifies a radius to apply to each bar. | -| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `bar` | `barColor` | Applies a color to the bar (string). If bars are configured to have labels, the labels will be the same color as the bar. | -| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `bar` | `width` | Applies a width to the bar (number). | -| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontFamily` | Applies a font type to the bar label (string). | -| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontSize` | Applies a size to the bar label (number). | -| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontStyle` | Applies a font style to the bar label (**normal** or **italic**). | -| `bars` > `customBarStyles` > `any_custom_bar_style_name` > `label` | `fontWeight` | Applies a font weight to the bar label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | - -The default class to style all bar chart widgets is named `com_mendix_widget_native_barchart_BarChart`. - ### Pie/Doughnut Chart The [Pie/Doughnut Chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/pie-doughnut-chart-native) widget renders a dataset as a pie or doughnut chart (depending on its configuration) based on static data sets. @@ -2247,263 +2512,6 @@ export const com_mendix_widget_native_switch_Switch = { The default class to style all checkbox inputs is named `com_mendix_widget_native_switch_Switch`. -### Background Gradient - -The background gradient widget allows you to apply a background that transitions between multiple colors in a linear direction. - -```javascript -export const com_mendix_widget_native_backgroundgradient_BackgroundGradient = { - container: { - // This has all ViewStyle properties. - }, - colorList: { - color: null, // Colors can be passed in different formats. Valid color value formats are #d0d0d0, rgb(115,155,155), or rgba(195,226,226,0.5) - offset: null, // A color-stop's value, followed by one or more optional stop positions (should be between 0.0 and 1.0) - }, - angle: null, // Line of direction. Takes a value from `0` to `360`. A value of 0 is equivalent to top; increasing values rotate the design clockwise. - opacity: null, // Takes a value from `0` to `100`. The lower the value, the more transparent. -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `angle` | | Line of direction. Takes a value from `0` to `360`. A value of 0 is equivalent to top; increasing values rotate the design clockwise. | -| `colorList` | [gradient_color_object](#gradient-color-object) | Passes the colors you want to display in an array. Example: `[{ color: "#fff", offset: 0 }, { color: "#000", offset: 1 }]` | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `opacity` | | Takes a value from `0` to `100`. The lower the value, the more transparent. | - -The default class to style all background gradients is named `com_mendix_widget_native_backgroundgradient_BackgroundGradient`. - -#### Background Gradient Types - -##### gradient_color_object {#gradient-color-object} - -An object `{ color: string, offset: number }` that represents the color and the offset. - -| Name | Type | Description | -| --- | --- | --- | -| color | `string` | Colors can be passed in different formats. Valid color value formats are `#d0d0d0`, `rgb(115,155,155)`, or `rgba(195,226,226,0.5)` | -| offset | `number` | A color-stop's value, followed by one or more optional stop positions (should be between `0.0` and `1.0`) | - -### Column Chart - -The [column chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/column-chart-native) widget renders a vertical column graph based on static and dynamic data sets. - -```javascript -export const com_mendix_widget_native_columnchart_ColumnChart = { - container: { - // All ViewStyle properties. - }, - errorMessage: { - // All TextStyle properties. - }, - chart: { - // All ViewStyle properties. - }, - grid: { - backgroundColor: null, // Applies a color to the grid background (string). - dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). - lineColor: null, // Applies a color to the grid lines (string). - width: null, // Applies a width to the grid lines (number). - padding: null, // Applies padding to all sides of the grid (number). This makes axis value labels visible. - paddingBottom: null, // Applies padding to the bottom side of the grid (number). This makes axis value labels visible. - paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. - paddingLeft: null, // Applies padding to the left side of the grid (number). This makes axis value labels visible. - paddingRight: null, // Applies padding to the right side of the grid (number). This makes axis value labels visible. - paddingTop: null, // Applies padding to the top side of the grid (number). This makes axis value labels visible. - paddingVertical: null, // Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. - }, - xAxis: { - color: null, // Applies a color to the axis value labels (string). - dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). - fontFamily: null, // Applies a font type to the axis value labels (string). - fontSize: null, // Applies a size to the axis value labels (number). - fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic"). - fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). - lineColor: null, // Applies a color to the axis line (string). - width: null, // Applies a width to the axis line (number). - label: { - // All TextStyle properties. - relativePositionGrid: null, //P ositions the axis label at the **bottom** or **right** side of the grid. - } - }, - yAxis: { - // All xAxis properties - }, - legend: { - container: { - // All ViewStyle properties. - }, - item: { - // All ViewStyle properties. - }, - indicator: { - // All ViewStyle properties. - }, - label: { - // All TextStyle properties. - }, - }, - domain: { - padding: { - x: null, // Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). - y: null, // Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). - } - }, - columns: { - columnColorPalette: null, // Provides colors to columns that do not have a column color configured (string with list of colors separated by ';', one color for each series). - columnsOffset: null, // Determines the number of pixels each column in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. - customColumnStyles: { - any_custom_column_style_name: { - column: { - ending: null, // Specifies a radius to apply to each column. - columnColor: null, // Applies a color to the column (string). If columns are configured to have labels, the labels will be the same color as the column. - width: null, // Applies a width to the column (number). - }, - label: { - fontFamily: null, // Applies a font type to the column label (string). - fontSize: null, // Applies a size to the column label (number). - fontStyle: null, // Applies a font style to the column label (**normal** or **italic**). - fontWeight: null, // Applies a font weight to the column label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). - } - } - } - } -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `grid` | `backgroundColor` | Applies a color to the grid background (string). | -| `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | -| `grid` | `lineColor` | Applies a color to the grid lines (string). | -| `grid` | `width` | Applies a width to the grid lines (number). | -| `grid` | `padding` | Applies padding to all sides of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingBottom` | Applies padding to the bottom side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingHorizontal` | Applies padding to the horizontal sides of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingLeft` | Applies padding to the left side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingRight` | Applies padding to the right side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingTop` | Applies padding to the top side of the grid (number). This makes axis value labels visible. | -| `grid` | `paddingVertical` | Applies padding to the vertical sides of the grid (number). This makes axis value labels visible. | -| `xAxis` | `color` | Applies a color to the axis value labels (string). | -| `xAxis` | `dashArray` | Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | -| `xAxis` | `fontFamily` | Applies a font type to the axis value labels (string). | -| `xAxis` | `fontSize` | Applies a size to the axis value labels (number). | -| `xAxis` | `fontStyle` | Applies a font style to the axis value labels ("normal" or "italic"). | -| `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | -| `xAxis` | `lineColor` | Applies a color to the axis line (string). | -| `xAxis` | `width` | Applies a width to the axis line (number). | -| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **bottom** or **right** side of the grid. | -| `yAxis` | All `xAxis` element styles. | | -| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **top** or **left** side of the grid. | -| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `domain` > `padding` | `x` | Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). | -| `domain` > `padding` | `y` | Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). | -| `columns` | `columnColorPalette` | Provides colors to columns that do not have a column color configured (string with list of colors separated by ';', one color for each series). | -| `columns` | `columnsOffset` | Determines the number of pixels each column in a group should be offset from its original position on the Y axis (number). This is only applicable when presentation mode is **Grouped**. | -| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `column` | `ending` | Specifies a radius to apply to each column. | -| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `column` | `columnColor` | Applies a color to the column (string). If columns are configured to have labels, the labels will be the same color as the column. | -| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `column` | `width` | Applies a width to the column (number). | -| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontFamily` | Applies a font type to the column label (string). | -| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontSize` | Applies a size to the column label (number). | -| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontStyle` | Applies a font style to the column label (**normal** or **italic**). | -| `columns` > `customColumnStyles` > `any_custom_column_style_name` > `label` | `fontWeight` | Applies a font weight to the column label ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | - -The default class to style all column chart widgets is named `com_mendix_widget_native_columnchart_ColumnChart`. - -### Gallery - -The Gallery widget (a replacement for both template grids and list views) helps you build beautiful lists and grids for tablet and mobile devices. - -```javascript -export const com_mendix_widget_native_gallery_Gallery = { - container: { - // This has all ViewStyle properties. - }, - emptyPlaceholder: { - // This has all ViewStyle properties. Applies a view style to the empty placeholder. - }, - firstItem: { - // This has all ViewStyle properties. Applies a view style to the first item of the list. - }, - lastItem: { - // This has all ViewStyle properties. Applies a view style to the last item of the list. - }, - list: { - // This has all ViewStyle properties. Applies a view style to the list container. - }, - listitem: { - // This has all ViewStyle properties. Applies a view style to each item container in the list. - }, - loadMoreButtonContainer: { - // This has all ViewStyle properties. Applies a view style to the load more button container. - }, - loadMoreButtonPressableContainer: { - // This has all ViewStyle properties. Applies a view style to the load more button container. - rippleColor: null, // Defines the color of the ripple effect. ([color](https://reactnative.dev/docs/colors)) (Android only) - borderless: null, // Defines if ripple effect should not include border. (Boolean) (Android only) - radius: null, // Defines the radius of the ripple effect. (number) (Android only) - foreground: null, // Set to true to add the ripple effect to the foreground of the view, instead of the background. (Boolean) (Android only) - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `emptyPlaceholder` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the empty placeholder. | -| `firstItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the first item of the list. | -| `lastItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the last item of the list. | -| `list` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the list container. | -| `listItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to each item container in the list. | -| `loadMoreButtonContainer` | All [ViewStyle](https://reactnative.dev/docs/text-style-props) properties. | Applies a view style to the load more button container. | -| `loadMoreButtonPressableContainer` | All [ViewStyle](https://reactnative.dev/docs/text-style-props) properties. | Applies a view style to the load more button container. | -| `loadMoreButtonPressableContainer` | rippleColor | Defines the color of the ripple effect. ([color](https://reactnative.dev/docs/colors)) (Android only) | -| `loadMoreButtonPressableContainer` | borderless | Defines if ripple effect should not include border. (Boolean) (Android only) | -| `loadMoreButtonPressableContainer` | radius | Defines the radius of the ripple effect. (number) (Android only) | -| `loadMoreButtonPressableContainer` | foreground | Set to true to add the ripple effect to the foreground of the view, instead of the background. (Boolean) (Android only) | -| `loadMoreButtonCaption` | All [TextStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a text style to the load more button caption. | - -The default class to style all Gallery widgets is named `com_mendix_widget_native_gallery_Gallery`. - -#### Gallery Filtering - -In order to enable filtering within the gallery items you need to select the desired attributes to be filtered in the **Filtering** tab. - -```javascript -export const com_mendix_widget_native_gallerytextfilter_GalleryTextFilter = { - textInputContainer: { - // This has all ViewStyle properties. Applies a view style to the container of the text input. - }, - textInputContainerFocused: { - // This has all ViewStyle properties. Applies a view style to the container of the text input when the text box is focused. - }, - textInput: { - // This has all ViewStyle properties. Applies a view style to the text input. - }, - textInputClearIcon: { - // This has all ViewStyle properties. Applies style to the text clear button in the text box. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `textInputContainer` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the container of the text input. | -| `textInputContainerFocused` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the container of the text input when the text box is focused. | -| `textInput` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the text input. | -| `textInputClearIcon` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies style to the text clear button in the text box. | - -The default class to style all gallery text filter widgets is named `com_mendix_widget_native_gallerytextfilter_GalleryTextFilter`. - ## Read More * [Native Styling](/refguide/mobile/designing-mobile-user-interfaces/native-styling/) From 9e1d27f9e2e606ca21b3144f045c3bf95c58c766 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Thu, 1 Oct 2026 10:39:31 +0200 Subject: [PATCH 02/10] fix order, add TODOs for missing docs --- .../native-styling-element-guide.md | 672 +++++++++--------- 1 file changed, 340 insertions(+), 332 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index ae36c5f48d7..8a257c67957 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -1577,6 +1577,176 @@ export const com_mendix_widget_native_gallerytextfilter_GalleryTextFilter = { The default class to style all gallery text filter widgets is named `com_mendix_widget_native_gallerytextfilter_GalleryTextFilter`. +### Intro Screen {#intro-screen} + +todo: docs currently missing + +### Line Chart + +The [line chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/line-chart-native) widget renders a scalable line graph based on static and dynamic data sets. + +```javascript +export const com_mendix_widget_native_linechart_LineChart = { + container: { + // This has all ViewStyle properties. + }, + errorMessage: { + // This has all TextStyle properties. + }, + chart: { + // This has all ViewStyle properties. + }, + grid: { + backgroundColor: null, // Applies a color to the grid background (string). + dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty). + lineColor: null, // Applies a color to the grid lines (string). + lineWidth: null, // Applies a width to the grid lines (number). + padding: null, // Applies padding to all sides of the grid (number). Use it to make axis value labels visible. + paddingBottom: null, // Applies padding to the bottom side of the grid (number). Use it to make axis value labels visible. + paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). Use it to make axis value labels visible. + paddingLeft: null, // Applies padding to the left side of the grid (number). Use it to make axis value labels visible. + paddingRight: null, // Applies padding to the right side of the grid (number). Use it to make axis value labels visible. + paddingTop: null, // Applies padding to the top side of the grid (number). Use it to make axis value labels visible. + paddingVertical: null, // Applies padding to the vertical sides of the grid (number). Use it to make axis value labels visible. + }, + xAxis: { + color: null, // Applies a color to the axis value labels (string). + dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). + fontFamily: null, // Applies fonts to the axis value labels (string). + fontSize: null, // Applies a size to the axis value labels (number). + fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic"). + fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). + lineColor: null, // Applies a color to the axis line (string). + lineWidth: null, // Applies a width to the axis line (number). + label: { + // All TextStyle properties. + relativePositionGrid: null, // Positions the axis label at the bottom or right side of the grid ("bottom" or "right"). + }, + }, + yAxis: { + // All `xAxis` element styles. + }, + legend: { + container: { + // All ViewStyle properties. + }, + item: { + // All ViewStyle properties. + }, + indicator: { + // All ViewStyle properties. + }, + label: { + // All ViewStyle properties. + } + }, + lines: { + lineColorPalette: null, // Provides colors to lines that do not have a line color configured (string with list of colors separated by ';'). + customLineStyles: { + any_custom_line_style_name: { + line: { + dashArray: null, // Applies a pattern of dashes and gaps to the graph line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). + ending: null, // Applies a flat or rounded line end to the graph line ("flat" or "round"). + lineColor: null, // Applies a color to the graph line (string). + lineWidth: null, // Applies a width to the graph line (number). + }, + markers: { + backgroundColor: null, // Applies a background color to the markers of the graph line (string). + borderColor: null, // Applies a border color to the markers of the graph line (string). + borderWidth: null, // Applies a border width to the markers of the graph line (string). + display: null, // Influences whether markers are displayed. When displayed, it positions the markers of the graph line on top or underneath the line ("false" or "underneath" or "onTop"). + size: null, // Applies a size to the markers of the graph line (number). + symbol: null, // Applies a symbol to the markers of the graph line ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp"). + } + } + } + } +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `grid` | `backgroundColor` | Applies a color to the grid background (string). | +| `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | +| `grid` | `lineColor` | Applies a color to the grid lines (string). | +| `grid` | `lineWidth` | Applies a width to the grid lines (number). | +| `grid` | `padding` | Applies padding to all sides of the grid (number). Use it to make axis value labels visible. | +| `grid` | `paddingBottom` | Applies padding to the bottom side of the grid (number). Use it to make axis value labels visible. | +| `grid` | `paddingHorizontal` | Applies padding to the horizontal sides of the grid (number). Use it to make axis value labels visible. | +| `grid` | `paddingLeft` | Applies padding to the left side of the grid (number). Use it to make axis value labels visible. | +| `grid` | `paddingRight` | Applies padding to the right side of the grid (number). Use it to make axis value labels visible. | +| `grid` | `paddingTop` | Applies padding to the top side of the grid (number). Use it to make axis value labels visible. | +| `grid` | `paddingVertical` | Applies padding to the vertical sides of the grid (number). Use it to make axis value labels visible. | +| `xAxis` | `color` | Applies a color to the axis value labels (string). | +| `xAxis` | `dashArray` | Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | +| `xAxis` | `fontFamily` | Applies fonts to the axis value labels (string). | +| `xAxis` | `fontSize` | Applies a size to the axis value labels (number). | +| `xAxis` | `fontStyle` | Applies a font style to the axis value labels ("normal" or "italic"). | +| `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | +| `xAxis` | `lineColor` | Applies a color to the axis line (string). | +| `xAxis` | `lineWidth` | Applies a width to the axis line (number). | +| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the bottom or right side of the grid ("bottom" or "right"). | +| `yAxis` | All `xAxis` element styles. | | +| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the top or left side of the grid ("top" or "left"). | +| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `lines` | `lineColorPalette` | Provides colors to lines that do not have a line color configured (string with list of colors separated by ';'). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `dashArray` | Applies a pattern of dashes and gaps to the graph line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `ending` | Applies a flat or rounded line end to the graph line ("flat" or "round"). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `lineColor` | Applies a color to the graph line (string). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `lineWidth` | Applies a width to the graph line (number). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `backgroundColor` | Applies a background color to the markers of the graph line (string). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `borderColor` | Applies a border color to the markers of the graph line (string). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `borderWidth` | Applies a border width to the markers of the graph line (string). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `display` | Influences whether markers are displayed. When displayed, it positions the markers of the graph line on top or underneath the line ("false" or "underneath" or "onTop"). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `size` | Applies a size to the markers of the graph line (number). | +| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `symbol` | Applies a symbol to the markers of the graph line ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp"). | + +The default class to style all line chart widgets is named `com_mendix_widget_native_linechart_LineChart`. + +### List View Swipe + +The list view swipe widget can make a list view interactive by adding swipe gestures and extra buttons in the background behind a list item: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/list-view-swipe-buttons.gif" alt="list view swipe" width="350" class="no-border" >}} + +```javascript +export const com_mendix_widget_native_listviewswipe_ListViewSwipe = { + container: { + // This has all ViewStyle properties. + }, + leftAction: { + // This has all ViewStyle properties. + panelSize: null, // The number of pixels and the combined size of the background buttons. + threshold: null, // The number of pixels to accept the swipe action. + }, + rightAction: { + // This has all ViewStyle properties. + panelSize: null, // The number of pixels and the combined size of the background buttons. + threshold: null, // The number of pixels to accept the swipe action. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | | +| `leftAction` | This has all ViewStyle properties. | | +| `leftAction` |`panelSize` | The number of pixels and the combined size of the background buttons. | +| `leftAction` |`threshold` | The number of pixels to accept the swipe action. | +| `rightAction` | This has all ViewStyle properties. | | +| `rightAction` |`panelSize` | The number of pixels and the combined size of the background buttons. | +| `rightAction` |`threshold` | The number of pixels to accept the swipe action. | + +The default class to style all animation widgets is named `com_mendix_widget_native_listviewswipe_ListViewSwipe`. + ### Maps The maps widget supports various digital map providers. This is how a maps widget could look in an app: @@ -1617,6 +1787,132 @@ The default class to style all map widgets is named `com_mendix_widget_native_ma The notifications widget lets you display a custom message in your app. This widget has no user interface so does not support any styling. +### Pie/Doughnut Chart + +The [Pie/Doughnut Chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/pie-doughnut-chart-native) widget renders a dataset as a pie or doughnut chart (depending on its configuration) based on static data sets. + +```javascript +export const com_mendix_widget_native_piedoughnutchart_PieDoughnutChart = { + container: { + // This has all ViewStyle properties. + }, + slices: { + customStyles: { + any_custom_key: { + slice: { + color: null, // Applies a color to the slice (string). If labels are configured to be shown, each label will be the same color as its corresponding slice. + fontFamily: null, // Applies a font type to the slice label (string). + fontSize: null, // Applies a size to the slice label (number). + fontStyle: null, // Applies a font style to the slice label (**normal** or **italic**). + fontWeight: null, // Applies a font weight to the slice label ("normal" or "bold" or "100"-"900" ascending by increments of 100). + }, + }, + }, + colorPalette: null, // Provides colors to slices that do not have a slice color configured (string with list of colors separated by a ';'). + innerRadius: null, // Applies an inner radius to the chart when in doughnut presentation mode (number). + padding: null, // Applies padding to all sides of the chart (number). + paddingBottom: null, // Applies padding to the bottom side of the chart (number). + paddingHorizontal: null, // Applies padding to the horizontal sides of the chart (number). + paddingLeft: null, // Applies padding to the left side of the chart (number). + paddingRight: null, // Applies padding to the right side of the chart (number). + paddingTop: null, // Applies padding to the top side of the chart (number). + paddingVertical: null, // Applies padding to the vertical sides of the chart (number). + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `slices` > `customStyles` > `any_custom_key` > `slice` | `color` | Applies a color to the slice (string). If labels are configured to be shown, each label will be the same color as its corresponding slice. | +| `slices` > `customStyles` > `any_custom_key` > `label` | `fontFamily` | Applies a font type to the slice label (string). | +| `slices` > `customStyles` > `any_custom_key` > `label` | `fontSize` | Applies a size to the slice label (number). | +| `slices` > `customStyles` > `any_custom_key` > `label` | `fontStyle` | Applies a font style to the slice label (**normal** or **italic**). | +| `slices` > `customStyles` > `any_custom_key` > `label` | `fontWeight` | Applies a font weight to the slice label ("normal" or "bold" or "100"-"900" ascending by increments of 100). | +| `slices` | `colorPalette` | Provides colors to slices that do not have a slice color configured (string with list of colors separated by a ';'). | +| `slices` | `innerRadius` | Applies an inner radius to the chart when in doughnut presentation mode (number). | +| `slices` | `padding` | Applies padding to all sides of the chart (number). | +| `slices` | `paddingBottom` | Applies padding to the bottom side of the chart (number). | +| `slices` | `paddingHorizontal` | Applies padding to the horizontal sides of the chart (number). | +| `slices` | `paddingLeft` | Applies padding to the left side of the chart (number). | +| `slices` | `paddingRight` | Applies padding to the right side of the chart (number). | +| `slices` | `paddingTop` | Applies padding to the top side of the chart (number). | +| `slices` | `paddingVertical` | Applies padding to the vertical sides of the chart (number). | + +The default class to style all Pie/Doughnut Chart widgets is named `com_mendix_widget_native_piedoughnutchart_PieDoughnutChart`. + +### Popup Menu + +The popup menu widget allows you to show a context menu exactly where the user taps. + +A main object has four objects: + +```javascript +export const com_mendix_widget_native_popupmenu_PopupMenu = { + basic: { + // BasicItemStyle. Styles basic items. + container: { + // This has all ViewStyle properties. Styles the wrapper container around a basic item. + }, + itemStyle: { + ellipsizeMode: null, // 'head', 'middle', 'tail', or 'clip'. Styles how the text will be clipped if its too long. + rippleColor: null, // Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. + defaultStyle: { + // This has all TextStyle properties. Styles all basic menu items which have the `default` style selected. + }, + primaryStyle: { + // This has all TextStyle properties. Styles all basic menu items which have the `primary` style selected. + }, + dangerStyle: { + // This has all TextStyle properties. Styles all basic menu items which have the `danger` style selected. + }, + customStyle: { + // This has all TextStyle properties. Styles all basic menu items which have the `custom` style selected. + }, + }, + dividerColor: null, // Styles the divider color. + }, + + custom: { + // CustomItemStyle. Styles custom items. + // This has the same properties as BasicItemStyle. + }, + + buttonContainer: { + // This has all ViewStyle properties. Styles the wrapper view of triggerer since there could be multiple elements, and it has to be wrapped in a view. + }, + container: { + // This has all ViewStyle properties. Styles the wrapper view around the whole menu. + }, +}; +``` + +| Element | Style Properties | Description | +| ---| --- | ---| +| `basic` | BasicItemStyle |Styles basic items. | +| `custom` | CustomItemStyle |Styles custom items. | +| `buttonContainer` | This has all ViewStyle properties. | Styles the wrapper view of triggerer since there could be multiple elements, and it has to be wrapped in a view. | +| `container` | This has all ViewStyle properties. | Styles the wrapper view around the whole menu. | + +#### BasicItemStyle + +| Element | Style Properties | Description | +| ----| ---- | ------ | +| `container` | This has all ViewStyle properties. | Styles the wrapper container around a basic item. | +| `itemStyle` | ItemStyle | Styles the basic items. | +| `dividerColor` | `string` | Styles the divider color. | + +#### ItemStyle + +| Element | Style Properties | Description | +| -------------| ----- | ----- | +| `ellipsizeMode` | `head`, `middle`, `tail`, or `clip` | Styles how the text will be clipped if its too long. | +| `rippleColor` | `string` | Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. | +| `defaultStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `default` style selected. | +| `primaryStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `primary` style selected. | +| `dangerStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `danger` style selected. | +| `customStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `custom` style selected. | + ### Progress Bar The progress bar widget shows percentage of progress. This is how a progress bar widget could look in an app: @@ -1721,6 +2017,10 @@ export const com_mendix_widget_native_qrcode_QRCode = { The default class to style all QR codes is named `com_mendix_widget_native_qrcode_QRCode`. +### Radio Buttons {#radio-buttons} + +todo -- add missing documentation + ### Range Slider {#range-slider} The range slider widget allows you to change a range of values using a slider with maximum and minimum bound values. This is how a range slider widget could look in an app: @@ -1965,163 +2265,55 @@ This introduction screen widget displays paginated contents you can swipe throug ```javascript export const com_mendix_widget_native_animation_Animation = { - fullscreenContainer: { - // This has all ViewStyle properties. - }, - popupContainer: { - // This has all ViewStyle properties. - }, - paginationContainer: { - // This has all ViewStyle properties. - }, - paginationText: { - // This has all TextStyle properties. - }, - dotStyle: { - // This has all ViewStyle properties. - }, - activeDotStyle: { - // This has all ViewStyle properties. - }, - buttonsContainer: { - // This has all ViewStyle properties. - }, - container: { - // This has all ViewStyle properties. Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. - }, - caption: { - // This has all ViewStyle properties. - }, - icon: { - size: null, // The size of the icon. - color: null, // The color of the icon. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `fullscreenContainer` | This has all ViewStyle properties. | | -| `popupContainer` | This has all ViewStyle properties. | | -| `paginationContainer` | This has all ViewStyle properties. | | -| `paginationText` | This has all TextStyle properties. | | -| `dotStyle` | This has all ViewStyle properties. | | -| `activeDotStyle` | This has all ViewStyle properties. | | -| `buttonsContainer` | This has all ViewStyle properties. | | -| `container` | This has all ViewStyle properties. | Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. | -| `caption` | This has all ViewStyle properties. | | -| `icon` | `size` | The size of the icon. | -| `icon` | `color` | The color of the icon. | - -The default class to style all into screen widgets is named `com_mendix_widget_native_introscreen_IntroScreen`. - -### List View Swipe - -The list view swipe widget can make a list view interactive by adding swipe gestures and extra buttons in the background behind a list item: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/list-view-swipe-buttons.gif" alt="list view swipe" width="350" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_listviewswipe_ListViewSwipe = { - container: { - // This has all ViewStyle properties. - }, - leftAction: { - // This has all ViewStyle properties. - panelSize: null, // The number of pixels and the combined size of the background buttons. - threshold: null, // The number of pixels to accept the swipe action. - }, - rightAction: { - // This has all ViewStyle properties. - panelSize: null, // The number of pixels and the combined size of the background buttons. - threshold: null, // The number of pixels to accept the swipe action. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `leftAction` | This has all ViewStyle properties. | | -| `leftAction` |`panelSize` | The number of pixels and the combined size of the background buttons. | -| `leftAction` |`threshold` | The number of pixels to accept the swipe action. | -| `rightAction` | This has all ViewStyle properties. | | -| `rightAction` |`panelSize` | The number of pixels and the combined size of the background buttons. | -| `rightAction` |`threshold` | The number of pixels to accept the swipe action. | - -The default class to style all animation widgets is named `com_mendix_widget_native_listviewswipe_ListViewSwipe`. - -### Popup Menu - -The popup menu widget allows you to show a context menu exactly where the user taps. - -A main object has four objects: - -```javascript -export const com_mendix_widget_native_popupmenu_PopupMenu = { - basic: { - // BasicItemStyle. Styles basic items. - container: { - // This has all ViewStyle properties. Styles the wrapper container around a basic item. - }, - itemStyle: { - ellipsizeMode: null, // 'head', 'middle', 'tail', or 'clip'. Styles how the text will be clipped if its too long. - rippleColor: null, // Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. - defaultStyle: { - // This has all TextStyle properties. Styles all basic menu items which have the `default` style selected. - }, - primaryStyle: { - // This has all TextStyle properties. Styles all basic menu items which have the `primary` style selected. - }, - dangerStyle: { - // This has all TextStyle properties. Styles all basic menu items which have the `danger` style selected. - }, - customStyle: { - // This has all TextStyle properties. Styles all basic menu items which have the `custom` style selected. - }, - }, - dividerColor: null, // Styles the divider color. + fullscreenContainer: { + // This has all ViewStyle properties. }, - - custom: { - // CustomItemStyle. Styles custom items. - // This has the same properties as BasicItemStyle. + popupContainer: { + // This has all ViewStyle properties. }, - - buttonContainer: { - // This has all ViewStyle properties. Styles the wrapper view of triggerer since there could be multiple elements, and it has to be wrapped in a view. + paginationContainer: { + // This has all ViewStyle properties. + }, + paginationText: { + // This has all TextStyle properties. + }, + dotStyle: { + // This has all ViewStyle properties. + }, + activeDotStyle: { + // This has all ViewStyle properties. + }, + buttonsContainer: { + // This has all ViewStyle properties. }, container: { - // This has all ViewStyle properties. Styles the wrapper view around the whole menu. + // This has all ViewStyle properties. Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. + }, + caption: { + // This has all ViewStyle properties. + }, + icon: { + size: null, // The size of the icon. + color: null, // The color of the icon. }, }; ``` -| Element | Style Properties | Description | -| ---| --- | ---| -| `basic` | BasicItemStyle |Styles basic items. | -| `custom` | CustomItemStyle |Styles custom items. | -| `buttonContainer` | This has all ViewStyle properties. | Styles the wrapper view of triggerer since there could be multiple elements, and it has to be wrapped in a view. | -| `container` | This has all ViewStyle properties. | Styles the wrapper view around the whole menu. | - -#### BasicItemStyle - -| Element | Style Properties | Description | -| ----| ---- | ------ | -| `container` | This has all ViewStyle properties. | Styles the wrapper container around a basic item. | -| `itemStyle` | ItemStyle | Styles the basic items. | -| `dividerColor` | `string` | Styles the divider color. | - -#### ItemStyle +| Element | Style Properties | Description | +| --- | --- | --- | +| `fullscreenContainer` | This has all ViewStyle properties. | | +| `popupContainer` | This has all ViewStyle properties. | | +| `paginationContainer` | This has all ViewStyle properties. | | +| `paginationText` | This has all TextStyle properties. | | +| `dotStyle` | This has all ViewStyle properties. | | +| `activeDotStyle` | This has all ViewStyle properties. | | +| `buttonsContainer` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. | +| `caption` | This has all ViewStyle properties. | | +| `icon` | `size` | The size of the icon. | +| `icon` | `color` | The color of the icon. | -| Element | Style Properties | Description | -| -------------| ----- | ----- | -| `ellipsizeMode` | `head`, `middle`, `tail`, or `clip` | Styles how the text will be clipped if its too long. | -| `rippleColor` | `string` | Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. | -| `defaultStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `default` style selected. | -| `primaryStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `primary` style selected. | -| `dangerStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `danger` style selected. | -| `customStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `custom` style selected. | +The default class to style all into screen widgets is named `com_mendix_widget_native_introscreen_IntroScreen`. #### CustomItemStyle @@ -2270,190 +2462,6 @@ export const com_mendix_widget_native_signature_Signature = { The default class to style all text boxes is named `com_mendix_widget_native_signature_Signature`. -### Line Chart - -The [line chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/line-chart-native) widget renders a scalable line graph based on static and dynamic data sets. - -```javascript -export const com_mendix_widget_native_linechart_LineChart = { - container: { - // This has all ViewStyle properties. - }, - errorMessage: { - // This has all TextStyle properties. - }, - chart: { - // This has all ViewStyle properties. - }, - grid: { - backgroundColor: null, // Applies a color to the grid background (string). - dashArray: null, // Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty). - lineColor: null, // Applies a color to the grid lines (string). - lineWidth: null, // Applies a width to the grid lines (number). - padding: null, // Applies padding to all sides of the grid (number). Use it to make axis value labels visible. - paddingBottom: null, // Applies padding to the bottom side of the grid (number). Use it to make axis value labels visible. - paddingHorizontal: null, // Applies padding to the horizontal sides of the grid (number). Use it to make axis value labels visible. - paddingLeft: null, // Applies padding to the left side of the grid (number). Use it to make axis value labels visible. - paddingRight: null, // Applies padding to the right side of the grid (number). Use it to make axis value labels visible. - paddingTop: null, // Applies padding to the top side of the grid (number). Use it to make axis value labels visible. - paddingVertical: null, // Applies padding to the vertical sides of the grid (number). Use it to make axis value labels visible. - }, - xAxis: { - color: null, // Applies a color to the axis value labels (string). - dashArray: null, // Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). - fontFamily: null, // Applies fonts to the axis value labels (string). - fontSize: null, // Applies a size to the axis value labels (number). - fontStyle: null, // Applies a font style to the axis value labels ("normal" or "italic"). - fontWeight: null, // Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). - lineColor: null, // Applies a color to the axis line (string). - lineWidth: null, // Applies a width to the axis line (number). - label: { - // All TextStyle properties. - relativePositionGrid: null, // Positions the axis label at the bottom or right side of the grid ("bottom" or "right"). - }, - }, - yAxis: { - // All `xAxis` element styles. - }, - legend: { - container: { - // All ViewStyle properties. - }, - item: { - // All ViewStyle properties. - }, - indicator: { - // All ViewStyle properties. - }, - label: { - // All ViewStyle properties. - } - }, - lines: { - lineColorPalette: null, // Provides colors to lines that do not have a line color configured (string with list of colors separated by ';'). - customLineStyles: { - any_custom_line_style_name: { - line: { - dashArray: null, // Applies a pattern of dashes and gaps to the graph line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). - ending: null, // Applies a flat or rounded line end to the graph line ("flat" or "round"). - lineColor: null, // Applies a color to the graph line (string). - lineWidth: null, // Applies a width to the graph line (number). - }, - markers: { - backgroundColor: null, // Applies a background color to the markers of the graph line (string). - borderColor: null, // Applies a border color to the markers of the graph line (string). - borderWidth: null, // Applies a border width to the markers of the graph line (string). - display: null, // Influences whether markers are displayed. When displayed, it positions the markers of the graph line on top or underneath the line ("false" or "underneath" or "onTop"). - size: null, // Applies a size to the markers of the graph line (number). - symbol: null, // Applies a symbol to the markers of the graph line ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp"). - } - } - } - } -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `grid` | `backgroundColor` | Applies a color to the grid background (string). | -| `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | -| `grid` | `lineColor` | Applies a color to the grid lines (string). | -| `grid` | `lineWidth` | Applies a width to the grid lines (number). | -| `grid` | `padding` | Applies padding to all sides of the grid (number). Use it to make axis value labels visible. | -| `grid` | `paddingBottom` | Applies padding to the bottom side of the grid (number). Use it to make axis value labels visible. | -| `grid` | `paddingHorizontal` | Applies padding to the horizontal sides of the grid (number). Use it to make axis value labels visible. | -| `grid` | `paddingLeft` | Applies padding to the left side of the grid (number). Use it to make axis value labels visible. | -| `grid` | `paddingRight` | Applies padding to the right side of the grid (number). Use it to make axis value labels visible. | -| `grid` | `paddingTop` | Applies padding to the top side of the grid (number). Use it to make axis value labels visible. | -| `grid` | `paddingVertical` | Applies padding to the vertical sides of the grid (number). Use it to make axis value labels visible. | -| `xAxis` | `color` | Applies a color to the axis value labels (string). | -| `xAxis` | `dashArray` | Applies a pattern of dashes and gaps to the axis line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | -| `xAxis` | `fontFamily` | Applies fonts to the axis value labels (string). | -| `xAxis` | `fontSize` | Applies a size to the axis value labels (number). | -| `xAxis` | `fontStyle` | Applies a font style to the axis value labels ("normal" or "italic"). | -| `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | -| `xAxis` | `lineColor` | Applies a color to the axis line (string). | -| `xAxis` | `lineWidth` | Applies a width to the axis line (number). | -| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the bottom or right side of the grid ("bottom" or "right"). | -| `yAxis` | All `xAxis` element styles. | | -| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the top or left side of the grid ("top" or "left"). | -| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `lines` | `lineColorPalette` | Provides colors to lines that do not have a line color configured (string with list of colors separated by ';'). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `dashArray` | Applies a pattern of dashes and gaps to the graph line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `ending` | Applies a flat or rounded line end to the graph line ("flat" or "round"). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `lineColor` | Applies a color to the graph line (string). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `lineWidth` | Applies a width to the graph line (number). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `backgroundColor` | Applies a background color to the markers of the graph line (string). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `borderColor` | Applies a border color to the markers of the graph line (string). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `borderWidth` | Applies a border width to the markers of the graph line (string). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `display` | Influences whether markers are displayed. When displayed, it positions the markers of the graph line on top or underneath the line ("false" or "underneath" or "onTop"). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `size` | Applies a size to the markers of the graph line (number). | -| `lines` > `customLineStyles` > `any_custom_line_style_name` > `markers` | `symbol` | Applies a symbol to the markers of the graph line ("circle" or "diamond" or "plus" or "minus" or "square" or "star" or "triangleDown" or "triangleUp"). | - -The default class to style all line chart widgets is named `com_mendix_widget_native_linechart_LineChart`. - -### Pie/Doughnut Chart - -The [Pie/Doughnut Chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/pie-doughnut-chart-native) widget renders a dataset as a pie or doughnut chart (depending on its configuration) based on static data sets. - -```javascript -export const com_mendix_widget_native_piedoughnutchart_PieDoughnutChart = { - container: { - // This has all ViewStyle properties. - }, - slices: { - customStyles: { - any_custom_key: { - slice: { - color: null, // Applies a color to the slice (string). If labels are configured to be shown, each label will be the same color as its corresponding slice. - fontFamily: null, // Applies a font type to the slice label (string). - fontSize: null, // Applies a size to the slice label (number). - fontStyle: null, // Applies a font style to the slice label (**normal** or **italic**). - fontWeight: null, // Applies a font weight to the slice label ("normal" or "bold" or "100"-"900" ascending by increments of 100). - }, - }, - }, - colorPalette: null, // Provides colors to slices that do not have a slice color configured (string with list of colors separated by a ';'). - innerRadius: null, // Applies an inner radius to the chart when in doughnut presentation mode (number). - padding: null, // Applies padding to all sides of the chart (number). - paddingBottom: null, // Applies padding to the bottom side of the chart (number). - paddingHorizontal: null, // Applies padding to the horizontal sides of the chart (number). - paddingLeft: null, // Applies padding to the left side of the chart (number). - paddingRight: null, // Applies padding to the right side of the chart (number). - paddingTop: null, // Applies padding to the top side of the chart (number). - paddingVertical: null, // Applies padding to the vertical sides of the chart (number). - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `slices` > `customStyles` > `any_custom_key` > `slice` | `color` | Applies a color to the slice (string). If labels are configured to be shown, each label will be the same color as its corresponding slice. | -| `slices` > `customStyles` > `any_custom_key` > `label` | `fontFamily` | Applies a font type to the slice label (string). | -| `slices` > `customStyles` > `any_custom_key` > `label` | `fontSize` | Applies a size to the slice label (number). | -| `slices` > `customStyles` > `any_custom_key` > `label` | `fontStyle` | Applies a font style to the slice label (**normal** or **italic**). | -| `slices` > `customStyles` > `any_custom_key` > `label` | `fontWeight` | Applies a font weight to the slice label ("normal" or "bold" or "100"-"900" ascending by increments of 100). | -| `slices` | `colorPalette` | Provides colors to slices that do not have a slice color configured (string with list of colors separated by a ';'). | -| `slices` | `innerRadius` | Applies an inner radius to the chart when in doughnut presentation mode (number). | -| `slices` | `padding` | Applies padding to all sides of the chart (number). | -| `slices` | `paddingBottom` | Applies padding to the bottom side of the chart (number). | -| `slices` | `paddingHorizontal` | Applies padding to the horizontal sides of the chart (number). | -| `slices` | `paddingLeft` | Applies padding to the left side of the chart (number). | -| `slices` | `paddingRight` | Applies padding to the right side of the chart (number). | -| `slices` | `paddingTop` | Applies padding to the top side of the chart (number). | -| `slices` | `paddingVertical` | Applies padding to the vertical sides of the chart (number). | - -The default class to style all Pie/Doughnut Chart widgets is named `com_mendix_widget_native_piedoughnutchart_PieDoughnutChart`. - ### Switch A switch input widget can be used to display and edit Boolean attributes and is rendered as a switch. This is how a Switch widget looks by default: From 98fae397c3c60da19d5e781658061a9c20f3b024 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Thu, 1 Oct 2026 10:45:53 +0200 Subject: [PATCH 03/10] fix order --- .../native-styling-element-guide.md | 384 +++++++++--------- 1 file changed, 192 insertions(+), 192 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index 8a257c67957..de1a46046c1 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -1579,7 +1579,61 @@ The default class to style all gallery text filter widgets is named `com_mendix_ ### Intro Screen {#intro-screen} -todo: docs currently missing +This intro screen widget displays paginated contents you can swipe through, and offers buttons on each page to proceed or go back: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/intro-screen.gif" alt="intro screen" width="350" class="no-border" >}} + +```javascript +export const com_mendix_widget_native_animation_Animation = { + fullscreenContainer: { + // This has all ViewStyle properties. + }, + popupContainer: { + // This has all ViewStyle properties. + }, + paginationContainer: { + // This has all ViewStyle properties. + }, + paginationText: { + // This has all TextStyle properties. + }, + dotStyle: { + // This has all ViewStyle properties. + }, + activeDotStyle: { + // This has all ViewStyle properties. + }, + buttonsContainer: { + // This has all ViewStyle properties. + }, + container: { + // This has all ViewStyle properties. Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. + }, + caption: { + // This has all ViewStyle properties. + }, + icon: { + size: null, // The size of the icon. + color: null, // The color of the icon. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `fullscreenContainer` | This has all ViewStyle properties. | | +| `popupContainer` | This has all ViewStyle properties. | | +| `paginationContainer` | This has all ViewStyle properties. | | +| `paginationText` | This has all TextStyle properties. | | +| `dotStyle` | This has all ViewStyle properties. | | +| `activeDotStyle` | This has all ViewStyle properties. | | +| `buttonsContainer` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. | +| `caption` | This has all ViewStyle properties. | | +| `icon` | `size` | The size of the icon. | +| `icon` | `color` | The color of the icon. | + +The default class to style all into screen widgets is named `com_mendix_widget_native_introscreen_IntroScreen`. ### Line Chart @@ -2073,6 +2127,44 @@ export const com_mendix_widget_native_rangeslider_RangeSlider = { The default class to style all range slider inputs is named `com_mendix_widget_native_rangeslider_RangeSlider`. +### Rating {#rating} + +The ratings widget allows users to rate an object from 0 to 5. This is how a ratings widget could look in an app: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/ratings.png" alt="ratings" width="350" class="no-border" >}} + +```javascript +export const com_mendix_widget_native_rating_Rating = { + container: { + // This has all ViewStyle properties. + }, + containerDisabled: { + // This has all ViewStyle properties. + }, + icon: { + // This has all ViewStyle properties. + size: null, // The size of the icon. + color: null, // The color of the icon. + selectedColor: null, // The color of the icon when selected. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | | +| `containerDisabled` | This has all ViewStyle properties. | | +| `icon` | This has all ViewStyle properties. | | +| `icon` | `size` | The size of the icon. | +| `icon` | `color` | The color of the icon. | +| `icon` | `selectedColor` | The color of the icon when selected. | + +The default class to style all rating inputs is named `com_mendix_widget_native_rating_Rating`. + +### Repeater {#repeater} + +todo -- add missing docs + ### Safe Area View The safe area view widget prevents content from being rendered in unwanted areas, such as behind rounded screen corners or notches. This widget is supported for iOS and Android apps. Note that `container` styling will only be applied to the safe area. @@ -2093,6 +2185,63 @@ export const com_mendix_widget_native_safeareaview_SafeAreaView = { The default class to style all safe area views is named `com_mendix_widget_native_safeareaview_SafeAreaView`. +### Signature {#signature} + +The signature widget allows you to draw and save a signature. The signature widget looks like this: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/signature.png" alt="signature" width="350" class="no-border" >}} + +```javascript +export const com_mendix_widget_native_signature_Signature = { + container: { + // This has all ViewStyle properties. + penColor: null, // This will change the color of the stroke. + }, + buttonWrapper: { + // This has all ViewStyle properties. + }, + buttonClearContainer: { + // This has all ViewStyle properties. + rippleColor: null, // This will change the color of the ripple on Android. + activeOpacity: null, // This will change the opacity when touch is active on iOS. + underlayColor: null, // This will change the underlay color when touch is active on iOS. + }, + buttonClearCaption: { + // This has all TextStyle properties. + }, + buttonSaveContainer: { + // This has all ViewStyle properties. + }, + buttonSaveContainer: { + // This has all ViewStyle properties. + rippleColor: null, // This will change the color of the ripple on Android. + activeOpacity: null, // This will change the opacity when touch is active on iOS. + underlayColor: null, // This will change the underlay color when touch is active on iOS. + }, + buttonSaveCaption: { + // This has all TextStyle properties. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | | This has all ViewStyle properties. | +| `container` | `penColor` | This will change the color of the stroke. | +| `buttonWrapper` | | This has all ViewStyle properties. | +| `buttonClearContainer` | | This has all ViewStyle properties. | +| `buttonClearContainer` | `rippleColor` | This will change the color of the ripple on Android. | +| `buttonClearContainer` | `activeOpacity` | This will change the opacity when touch is active on iOS. | +| `buttonClearContainer` | `underlayColor` | This will change the underlay color when touch is active on iOS. | +| `buttonClearCaption` | | This has all TextStyle properties. | +| `buttonSaveContainer` | | This has all ViewStyle properties. | +| `buttonSaveContainer` | `rippleColor` | This will change the color of the ripple on Android. | +| `buttonSaveContainer` | `activeOpacity` | This will change the opacity when touch is active on iOS. | +| `buttonSaveContainer` | `underlayColor` | This will change the underlay color when touch is active on iOS. | +| `buttonSaveCaption` | | This has all TextStyle properties. | + +The default class to style all text boxes is named `com_mendix_widget_native_signature_Signature`. + ### Slider The slider widget simply allows you to change a number value using a slider. This is how a slider widget could look in an app: @@ -2103,39 +2252,63 @@ This widget supports the same style properties as the [range slider](#range-slid The default class to style all slider inputs is named `com_mendix_widget_native_slider_Slider`. -### Ratings +### Switch -The ratings widget allows users to rate an object from 0 to 5. This is how a ratings widget could look in an app: +A switch input widget can be used to display and edit Boolean attributes and is rendered as a switch. This is how a Switch widget looks by default: -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/ratings.png" alt="ratings" width="350" class="no-border" >}} +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/check-box.png" alt="checkbox" width="350" class="no-border" >}} ```javascript -export const com_mendix_widget_native_rating_Rating = { +export const com_mendix_widget_native_switch_Switch = { container: { - // This has all ViewStyle properties. + // This has all ViewStyle properties. }, containerDisabled: { - // This has all ViewStyle properties. + // Same properties as `container`. Overrides `container` styles if the text box is non-editable. }, - icon: { - // This has all ViewStyle properties. - size: null, // The size of the icon. - color: null, // The color of the icon. - selectedColor: null, // The color of the icon when selected. + input: { + // This has all TextStyle properties. + trackColorOn: null, // Custom color for the switch track when turned on. + trackColorOff: null, // Custom color for the switch track when turned off. + thumbColorOn: null, // Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow. + thumbColorOff: null, // Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow. + }, + inputError: { + // This has the same properties as `input`. Overrides `input` styles if there are validation errors. + }, + inputDisabled: { + // This has the same properties as `input`. Overrides `input` styles if the checkbox is non-editable. + }, + label: { + // This has all TextStyle properties + numberOfLines: 1, // The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. + }, + labelDisabled: { + // Same properties as `label`. Overrides `label` styles if the checkbox is non-editable. + }, + validationMessage: { + // This has all TextStyle properties. }, }; ``` | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `containerDisabled` | This has all ViewStyle properties. | | -| `icon` | This has all ViewStyle properties. | | -| `icon` | `size` | The size of the icon. | -| `icon` | `color` | The color of the icon. | -| `icon` | `selectedColor` | The color of the icon when selected. | +| `container` | This has all ViewStyle properties. | | +| `containerDisabled` | Same properties as `container` | Overrides `container` styles if the text box is non-editable. | +| `input` | This has all TextStyle properties. | | +| `input` | `trackColorOn` | Custom color for the switch track when turned on. | +| `input` | `trackColorOff` | Custom color for the switch track when turned off. | +| `input` | `thumbColorOn` | Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow. | +| `input` | `thumbColorOff` | Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow. | +| `inputError` | This has the same properties as `input` | Overrides `input` styles if there are validation errors. | +| `inputDisabled` | This has the same properties as `input` | Overrides `input` styles if the checkbox is non-editable. | +| `label` | This has all TextStyle properties | | +| `label` | `numberOfLines` | The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Defaults to `1`. | +| `labelDisabled` | Same properties as `label` | Overrides `label` styles if the checkbox is non-editable. | +| `validationMessage` | This has all TextStyle properties. | | -The default class to style all rating inputs is named `com_mendix_widget_native_rating_Rating`. +The default class to style all checkbox inputs is named `com_mendix_widget_native_switch_Switch`. ### Toggle Buttons @@ -2257,64 +2430,6 @@ export const com_mendix_widget_native_webview_WebView = { The default class to style all web views is named `com_mendix_widget_native_webview_WebView`. -### Introduction Screen - -This introduction screen widget displays paginated contents you can swipe through, and offers buttons on each page to proceed or go back: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/intro-screen.gif" alt="intro screen" width="350" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_animation_Animation = { - fullscreenContainer: { - // This has all ViewStyle properties. - }, - popupContainer: { - // This has all ViewStyle properties. - }, - paginationContainer: { - // This has all ViewStyle properties. - }, - paginationText: { - // This has all TextStyle properties. - }, - dotStyle: { - // This has all ViewStyle properties. - }, - activeDotStyle: { - // This has all ViewStyle properties. - }, - buttonsContainer: { - // This has all ViewStyle properties. - }, - container: { - // This has all ViewStyle properties. Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. - }, - caption: { - // This has all ViewStyle properties. - }, - icon: { - size: null, // The size of the icon. - color: null, // The color of the icon. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `fullscreenContainer` | This has all ViewStyle properties. | | -| `popupContainer` | This has all ViewStyle properties. | | -| `paginationContainer` | This has all ViewStyle properties. | | -| `paginationText` | This has all TextStyle properties. | | -| `dotStyle` | This has all ViewStyle properties. | | -| `activeDotStyle` | This has all ViewStyle properties. | | -| `buttonsContainer` | This has all ViewStyle properties. | | -| `container` | This has all ViewStyle properties. | Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. | -| `caption` | This has all ViewStyle properties. | | -| `icon` | `size` | The size of the icon. | -| `icon` | `color` | The color of the icon. | - -The default class to style all into screen widgets is named `com_mendix_widget_native_introscreen_IntroScreen`. - #### CustomItemStyle | Element | Style Properties | Description | @@ -2405,121 +2520,6 @@ export const com_mendix_widget_native_carousel_Carousel = { The default class to style all popup menus is named `com_mendix_widget_native_carousel_Carousel`. -### Signature {#signature} - -The signature widget allows you to draw and save a signature. The signature widget looks like this: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/signature.png" alt="signature" width="350" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_signature_Signature = { - container: { - // This has all ViewStyle properties. - penColor: null, // This will change the color of the stroke. - }, - buttonWrapper: { - // This has all ViewStyle properties. - }, - buttonClearContainer: { - // This has all ViewStyle properties. - rippleColor: null, // This will change the color of the ripple on Android. - activeOpacity: null, // This will change the opacity when touch is active on iOS. - underlayColor: null, // This will change the underlay color when touch is active on iOS. - }, - buttonClearCaption: { - // This has all TextStyle properties. - }, - buttonSaveContainer: { - // This has all ViewStyle properties. - }, - buttonSaveContainer: { - // This has all ViewStyle properties. - rippleColor: null, // This will change the color of the ripple on Android. - activeOpacity: null, // This will change the opacity when touch is active on iOS. - underlayColor: null, // This will change the underlay color when touch is active on iOS. - }, - buttonSaveCaption: { - // This has all TextStyle properties. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | | This has all ViewStyle properties. | -| `container` | `penColor` | This will change the color of the stroke. | -| `buttonWrapper` | | This has all ViewStyle properties. | -| `buttonClearContainer` | | This has all ViewStyle properties. | -| `buttonClearContainer` | `rippleColor` | This will change the color of the ripple on Android. | -| `buttonClearContainer` | `activeOpacity` | This will change the opacity when touch is active on iOS. | -| `buttonClearContainer` | `underlayColor` | This will change the underlay color when touch is active on iOS. | -| `buttonClearCaption` | | This has all TextStyle properties. | -| `buttonSaveContainer` | | This has all ViewStyle properties. | -| `buttonSaveContainer` | `rippleColor` | This will change the color of the ripple on Android. | -| `buttonSaveContainer` | `activeOpacity` | This will change the opacity when touch is active on iOS. | -| `buttonSaveContainer` | `underlayColor` | This will change the underlay color when touch is active on iOS. | -| `buttonSaveCaption` | | This has all TextStyle properties. | - -The default class to style all text boxes is named `com_mendix_widget_native_signature_Signature`. - -### Switch - -A switch input widget can be used to display and edit Boolean attributes and is rendered as a switch. This is how a Switch widget looks by default: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/check-box.png" alt="checkbox" width="350" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_switch_Switch = { - container: { - // This has all ViewStyle properties. - }, - containerDisabled: { - // Same properties as `container`. Overrides `container` styles if the text box is non-editable. - }, - input: { - // This has all TextStyle properties. - trackColorOn: null, // Custom color for the switch track when turned on. - trackColorOff: null, // Custom color for the switch track when turned off. - thumbColorOn: null, // Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow. - thumbColorOff: null, // Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow. - }, - inputError: { - // This has the same properties as `input`. Overrides `input` styles if there are validation errors. - }, - inputDisabled: { - // This has the same properties as `input`. Overrides `input` styles if the checkbox is non-editable. - }, - label: { - // This has all TextStyle properties - numberOfLines: 1, // The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. - }, - labelDisabled: { - // Same properties as `label`. Overrides `label` styles if the checkbox is non-editable. - }, - validationMessage: { - // This has all TextStyle properties. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `containerDisabled` | Same properties as `container` | Overrides `container` styles if the text box is non-editable. | -| `input` | This has all TextStyle properties. | | -| `input` | `trackColorOn` | Custom color for the switch track when turned on. | -| `input` | `trackColorOff` | Custom color for the switch track when turned off. | -| `input` | `thumbColorOn` | Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow. | -| `input` | `thumbColorOff` | Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow. | -| `inputError` | This has the same properties as `input` | Overrides `input` styles if there are validation errors. | -| `inputDisabled` | This has the same properties as `input` | Overrides `input` styles if the checkbox is non-editable. | -| `label` | This has all TextStyle properties | | -| `label` | `numberOfLines` | The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Defaults to `1`. | -| `labelDisabled` | Same properties as `label` | Overrides `label` styles if the checkbox is non-editable. | -| `validationMessage` | This has all TextStyle properties. | | - -The default class to style all checkbox inputs is named `com_mendix_widget_native_switch_Switch`. - ## Read More * [Native Styling](/refguide/mobile/designing-mobile-user-interfaces/native-styling/) From 513f9a01182f07d5ea97fe6a4f1cf68812f3e5ad Mon Sep 17 00:00:00 2001 From: Srirang Kalantri Date: Thu, 1 Oct 2026 15:16:10 +0530 Subject: [PATCH 04/10] add native repeater and radio button styling info --- .../native-styling-element-guide.md | 68 ++++++++++++++++++- 1 file changed, 66 insertions(+), 2 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index de1a46046c1..b4567bb4753 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -2073,7 +2073,57 @@ The default class to style all QR codes is named `com_mendix_widget_native_qrcod ### Radio Buttons {#radio-buttons} -todo -- add missing documentation +The radio buttons widget allows users to select a single option from a list of choices. + +```javascript +export const com_mendix_widget_native_radiobuttons_RadioButtons = { + container: { + // This has all ViewStyle properties. + }, + containerHorizontal: { + // This has all ViewStyle properties. + }, + labelTextStyle: { + // This has all TextStyle properties. + }, + radioButtonItemContainerStyle: { + // This has all ViewStyle properties. + }, + radioButtonItemContainerDisabledStyle: { + // This has all ViewStyle properties. + }, + radioButtonItemContainerHorizontalStyle: { + // This has all ViewStyle properties. + }, + circularButtonStyle: { + // This has all ViewStyle properties. + }, + activeButtonStyle: { + // This has all ViewStyle properties. + }, + radioButtonItemTitleStyle: { + // This has all TextStyle properties. + }, + validationMessage: { + // This has all TextStyle properties. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | Styles the wrapper container around the entire widget. | +| `containerHorizontal` | This has all ViewStyle properties. | Styles the wrapper container when orientation is horizontal. | +| `labelTextStyle` | This has all TextStyle properties. | Styles the label text. | +| `radioButtonItemContainerStyle` | This has all ViewStyle properties. | Styles the container around each radio button item. | +| `radioButtonItemContainerDisabledStyle` | This has all ViewStyle properties. | Styles the container when the radio button is disabled. | +| `radioButtonItemContainerHorizontalStyle` | This has all ViewStyle properties. | Styles the radio button item container when orientation is horizontal. | +| `circularButtonStyle` | This has all ViewStyle properties. | Styles the circular button outer ring. | +| `activeButtonStyle` | This has all ViewStyle properties. | Styles the inner circle when the radio button is selected. | +| `radioButtonItemTitleStyle` | This has all TextStyle properties. | Styles the text of each radio button option. | +| `validationMessage` | This has all TextStyle properties. | Styles the validation error message. | + +The default class to style all radio buttons is named `com_mendix_widget_native_radiobuttons_RadioButtons`. ### Range Slider {#range-slider} @@ -2163,7 +2213,21 @@ The default class to style all rating inputs is named `com_mendix_widget_native_ ### Repeater {#repeater} -todo -- add missing docs +The repeater widget iterates over a data source and renders content for each item. + +```javascript +export const com_mendix_widget_native_repeater_Repeater = { + container: { + // This has all ViewStyle properties. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | Styles the wrapper container around the entire repeater. | + +The default class to style all repeater widgets is named `com_mendix_widget_native_repeater_Repeater`. ### Safe Area View From 7947a05410b969f629b987dd240a06942ae343b1 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Thu, 1 Oct 2026 12:05:41 +0200 Subject: [PATCH 05/10] Update native-styling-element-guide.md --- .../native-styling-element-guide.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index b4567bb4753..7d74c64be7b 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -860,7 +860,7 @@ Add-on widgets are distributed through the [Native Mobile Resources](/appstore/m ### Accordion -PLACEHOLDER +todo -- add missing documentation ### Activity Indicator {#activity-indicator} From 760651c82e9788a1d273a9fc2f2e56f9456459ba Mon Sep 17 00:00:00 2001 From: Srirang Kalantri Date: Thu, 1 Oct 2026 15:56:39 +0530 Subject: [PATCH 06/10] add accordian styling --- .../native-styling-element-guide.md | 64 ++++++++++++++++++- 1 file changed, 63 insertions(+), 1 deletion(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index 7d74c64be7b..1874b21e6d0 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -860,7 +860,69 @@ Add-on widgets are distributed through the [Native Mobile Resources](/appstore/m ### Accordion -todo -- add missing documentation +The accordion widget displays collapsible content sections with headers. + +```javascript +export const com_mendix_widget_native_accordion_Accordion = { + container: { + // This has all ViewStyle properties. + }, + group: { + container: { + // This has all ViewStyle properties. + }, + header: { + container: { + // This has all ViewStyle properties. + }, + heading1: { + // This has all TextStyle properties. + }, + heading2: { + // This has all TextStyle properties. + }, + heading3: { + // This has all TextStyle properties. + }, + heading4: { + // This has all TextStyle properties. + }, + heading5: { + // This has all TextStyle properties. + }, + heading6: { + // This has all TextStyle properties. + }, + icon: { + // This has all ViewStyle properties. + size: null, // The size of the expand/collapse icon. + color: null, // The color of the expand/collapse icon. + }, + }, + content: { + // This has all ViewStyle properties. + }, + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | Styles the wrapper container around the entire accordion. | +| `group` > `container` | This has all ViewStyle properties. | Styles the container around each accordion group. | +| `group` > `header` > `container` | This has all ViewStyle properties. | Styles the header container. | +| `group` > `header` > `heading1` | This has all TextStyle properties. | Styles the heading when level 1 is selected. | +| `group` > `header` > `heading2` | This has all TextStyle properties. | Styles the heading when level 2 is selected. | +| `group` > `header` > `heading3` | This has all TextStyle properties. | Styles the heading when level 3 is selected. | +| `group` > `header` > `heading4` | This has all TextStyle properties. | Styles the heading when level 4 is selected. | +| `group` > `header` > `heading5` | This has all TextStyle properties. | Styles the heading when level 5 is selected. | +| `group` > `header` > `heading6` | This has all TextStyle properties. | Styles the heading when level 6 is selected. | +| `group` > `header` > `icon` | This has all ViewStyle properties. | Styles the expand/collapse icon. | +| `group` > `header` > `icon` | `size` | The size of the expand/collapse icon. | +| `group` > `header` > `icon` | `color` | The color of the expand/collapse icon. | +| `group` > `content` | This has all ViewStyle properties. | Styles the collapsible content area. | + +The default class to style all accordion widgets is named `com_mendix_widget_native_accordion_Accordion`. ### Activity Indicator {#activity-indicator} From b9cc493800526eb33623b2b7f37a768cedc5db41 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Thu, 1 Oct 2026 15:16:01 +0200 Subject: [PATCH 07/10] move carousel and add anchor links --- .../native-styling-element-guide.md | 182 +++++++++--------- 1 file changed, 89 insertions(+), 93 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index 1874b21e6d0..4e96cf3fff7 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -124,7 +124,7 @@ The default class to style all list views is named `ListView`. Text widgets are used in almost all app pages. Because of their ubiquity, learning to style text widgets will make a large difference for your apps. -### Text +### Text {#text} The text widget shows text which can optionally contain parameters. For more information on these widgets, see [Text Widgets](/refguide/text/). @@ -468,7 +468,7 @@ export const DropDown = { The default class to style all text areas is named `DropDown`. -### Checkbox +### Checkbox {#checkbox} A checkbox input widget can be used to display and edit Boolean attributes and is rendered as either a switch or a checkbox. This is how a checkbox widget in switch render mode looks by default: @@ -551,7 +551,7 @@ export const Checkbox = { The default class to style all checkbox inputs is named `Checkbox`. -### Date Picker +### Date Picker {#date-picker} A date picker is an input widget that can be used to display and edit date or time attributes. This is how a date picker widget could look in an app: @@ -707,7 +707,7 @@ The default class to style all dynamic images is named `NativeDynamicImage`. Buttons help your user perform actions. For more information about these widgets, see [Buttons](/refguide/button-widgets/). -### Action Button +### Action Button {#action-button} An action button can perform various actions such as calling a nanoflow, opening a page. @@ -858,7 +858,7 @@ The default class to style the navigation is named `navigationStyle`. There is n Add-on widgets are distributed through the [Native Mobile Resources](/appstore/modules/native-mobile-resources/) module, and are not shipped with Mendix Studio Pro. Other add-ons might also be distributed through app templates, as well as modules importing pages from other apps. -### Accordion +### Accordion {#accordion} The accordion widget displays collapsible content sections with headers. @@ -950,7 +950,7 @@ export const com_mendix_widget_native_activityindicator_ActivityIndicator = { The default class to style all activity indicators is named `com_mendix_widget_native_activityindicator_ActivityIndicator`. -### Animation +### Animation {#animation} The animation widget allows you to animate a container. You can make the content wiggle, move, change size, and more. The widget's style properties are as follows: @@ -968,11 +968,11 @@ export const com_mendix_widget_native_animation_Animation = { The default class to style all animation widgets is named `com_mendix_widget_native_animation_Animation`. -### App Events +### App Events {#app-events} The app events widget allows you to set actions when your app’s network status is changed, and can let you set limits on action calls. This widget has no user interface so does not support any styling. -### Background Gradient +### Background Gradient {#background-gradient} The background gradient widget allows you to apply a background that transitions between multiple colors in a linear direction. @@ -1010,7 +1010,7 @@ An object `{ color: string, offset: number }` that represents the color and the | color | `string` | Colors can be passed in different formats. Valid color value formats are `#d0d0d0`, `rgb(115,155,155)`, or `rgba(195,226,226,0.5)` | | offset | `number` | A color-stop's value, followed by one or more optional stop positions (should be between `0.0` and `1.0`) | -### Background Image +### Background Image {#background-image} The background image widget enables layering one or more widgets on top of an image. @@ -1034,7 +1034,7 @@ export const com_mendix_widget_native_backgroundimage_BackgroundImage = { The default class to style all background images is named `com_mendix_widget_native_backgroundimage_BackgroundImage`. -### Badge +### Badge {#badge} The badge widget displays text or values as a badge. This is how a badge widget could look in an app: @@ -1058,7 +1058,7 @@ export const com_mendix_widget_native_badge_Badge = { The default class to style all badges is named `com_mendix_widget_native_badge_Badge`. -### Bar Chart +### Bar Chart {#bar-chart} The [Bar Chart](https://github.com/mendix/widgets-resources/tree/master/packages/pluggableWidgets/bar-chart-native) widget renders a horizontal bar graph based on static and dynamic data sets. @@ -1192,7 +1192,7 @@ export const com_mendix_widget_native_barchart_BarChart = { The default class to style all bar chart widgets is named `com_mendix_widget_native_barchart_BarChart`. -### Barcode Scanner +### Barcode Scanner {#barcode-scanner} The barcode scanner widget allows your app to scan barcodes and QR codes. This widget renders a camera view in a styleable container. @@ -1221,7 +1221,7 @@ export const com_mendix_widget_native_barcodescanner_BarcodeScanner = { The default class to style all barcode scanner widgets is named `com_mendix_widget_native_barcodescanner_BarcodeScanner`. -### Bottom Sheet +### Bottom Sheet {#bottom-sheet} The bottom sheet widget creates a set of options while blocking interaction with the rest of the screen or a draggable surface anchored to the bottom of the screen. There are two customizable variations: @@ -1271,11 +1271,66 @@ export const com_mendix_widget_native_bottomsheet_BottomSheet = { The default class to style all bottom sheet widgets is named `com_mendix_widget_native_bottomsheet_BottomSheet`. -### Carousel +### Carousel {#carousel} -PLACEHOLDER +The carousel widget allows you to show swipeable items in a carousel. -### Color Picker +Main object has to have three objects called `container`, `cardLayout`, and `fullWidthLayout`. `cardLayout` and `fullWidthLayout` will be applied automatically depending on selected layout in widget properties. + +```javascript +export const com_mendix_widget_native_carousel_Carousel = { + container: { + // This has all ViewStyle properties. Styles the view surrounding the carousel widget. For best results, make sure to give a fixed `height` + }, + cardLayout: { + // Styles the carousel when the layout is set to card. + slideItem: { + // This has all ViewStyle properties. Styles the view surrounding each slide, including inactive slides. + }, + inactiveSlideItem: { + opacity: null, // Allows inactive slides to become more smaller and faded. + scale: null, // Allows inactive slides to become more smaller and faded. + }, + indicator: { + color: null, // Styles the loading indicator which will be shown while the carousel is loading. + }, + pagination: { + container: { + // This has all ViewStyle properties. Styles the main view around pagination, regardless of text or dot. + }, + dotStyle: { + // This has all ViewStyle properties. Styles all the pagination dots. + color: null, + }, + inactiveDotStyle: { + // This has all ViewStyle properties. Additional styles for inactive dots. Will be merged with `dotStyle`. + opacity: null, + scale: null, + color: null, + }, + dotContainerStyle: { + // This has all ViewStyle properties. Styles the view around individual pagination dots. + }, + text: { + // This has all TextStyle properties. Will be applied when there are more than five elements in carousel, in which case pagination buttons become text like **1/5**. + }, + }, + }, + + fullWidthLayout: { + // Styles the carousel when the layout is set to full width. + // Same properties as cardLayout. + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| container | This has all ViewStyle properties. | Styles the view surrounding the carousel widget. For best results, make sure to give a fixed `height`. | +| cardLayout | LayoutStyle | Styles the carousel when the layout is set to card | +| fullWidthLayout | LayoutStyle | Styles the carousel when the layout is set to full width. | + +### Color Picker {#color-picker} The color picker widget allows a user to pick a color from a color spectrum. @@ -1297,7 +1352,7 @@ export const com_mendix_widget_native_colorpicker_ColorPicker = { The default class to style all color picker widgets is named `com_mendix_widget_native_colorpicker_ColorPicker`. -### Column Chart +### Column Chart {#column-chart} The [column chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/column-chart-native) widget renders a vertical column graph based on static and dynamic data sets. @@ -1431,7 +1486,7 @@ export const com_mendix_widget_native_columnchart_ColumnChart = { The default class to style all column chart widgets is named `com_mendix_widget_native_columnchart_ColumnChart`. -### Feedback +### Feedback {#feedback} The feedback widget allows users to give direct feedback. This is how a feedback widget could look in an app: @@ -1503,7 +1558,7 @@ export const com_mendix_widget_native_feedback_Feedback = { The default class to style all feedback widgets is named `com_mendix_widget_native_feedback_Feedback`. -### Floating Action Button +### Floating Action Button {#floating-action-button} The floating action button widget lets you customize the appearance and functionality of floating action buttons. The widget’s style properties are as follows: @@ -1554,7 +1609,7 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton The default class to style all floating actions buttons is named `com_mendix_widget_native_floatingactionbutton_FloatingActionButton`. -### Gallery +### Gallery {#gallery} The Gallery widget (a replacement for both template grids and list views) helps you build beautiful lists and grids for tablet and mobile devices. @@ -1697,7 +1752,7 @@ export const com_mendix_widget_native_animation_Animation = { The default class to style all into screen widgets is named `com_mendix_widget_native_introscreen_IntroScreen`. -### Line Chart +### Line Chart {#line-chart} The [line chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/line-chart-native) widget renders a scalable line graph based on static and dynamic data sets. @@ -1827,7 +1882,7 @@ export const com_mendix_widget_native_linechart_LineChart = { The default class to style all line chart widgets is named `com_mendix_widget_native_linechart_LineChart`. -### List View Swipe +### List View Swipe {#list-view-swipe} The list view swipe widget can make a list view interactive by adding swipe gestures and extra buttons in the background behind a list item: @@ -1863,7 +1918,7 @@ export const com_mendix_widget_native_listviewswipe_ListViewSwipe = { The default class to style all animation widgets is named `com_mendix_widget_native_listviewswipe_ListViewSwipe`. -### Maps +### Maps {#maps} The maps widget supports various digital map providers. This is how a maps widget could look in an app: @@ -1899,11 +1954,11 @@ The widget's style properties are as follows: The default class to style all map widgets is named `com_mendix_widget_native_maps_Maps`. -### Notifications +### Notifications {#notifications} The notifications widget lets you display a custom message in your app. This widget has no user interface so does not support any styling. -### Pie/Doughnut Chart +### Pie/Doughnut Chart {#pie-doughnut-chart} The [Pie/Doughnut Chart](https://github.com/mendix/widgets-resources/blob/master/packages/pluggableWidgets/pie-doughnut-chart-native) widget renders a dataset as a pie or doughnut chart (depending on its configuration) based on static data sets. @@ -1957,7 +2012,7 @@ export const com_mendix_widget_native_piedoughnutchart_PieDoughnutChart = { The default class to style all Pie/Doughnut Chart widgets is named `com_mendix_widget_native_piedoughnutchart_PieDoughnutChart`. -### Popup Menu +### Popup Menu {#popup-menu} The popup menu widget allows you to show a context menu exactly where the user taps. @@ -2029,7 +2084,7 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = { | `dangerStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `danger` style selected. | | `customStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `custom` style selected. | -### Progress Bar +### Progress Bar {#progress-bar} The progress bar widget shows percentage of progress. This is how a progress bar widget could look in an app: @@ -2061,7 +2116,7 @@ export const com_mendix_widget_native_progressbar_ProgressBar = { The default class to style all progress bars is named `com_mendix_widget_native_progressbar_ProgressBar`. -### Progress Circle +### Progress Circle {#progress-circle} The progress circle widget displays progress in a circle using positive or negative values. This is how a progress circle widget could look in an app: @@ -2105,7 +2160,7 @@ export const com_mendix_widget_native_progresscircle_ProgressCircle = { The default class to style all progress circles is named `com_mendix_widget_native_progresscircle_ProgressCircle`. -### QR Code +### QR Code {#qr-code} The QR code widget generates a QR code based on a value, which a user can then scan. This is how a QR code widget could look in an app: @@ -2291,7 +2346,7 @@ export const com_mendix_widget_native_repeater_Repeater = { The default class to style all repeater widgets is named `com_mendix_widget_native_repeater_Repeater`. -### Safe Area View +### Safe Area View {#safe-area-view} The safe area view widget prevents content from being rendered in unwanted areas, such as behind rounded screen corners or notches. This widget is supported for iOS and Android apps. Note that `container` styling will only be applied to the safe area. @@ -2378,7 +2433,7 @@ This widget supports the same style properties as the [range slider](#range-slid The default class to style all slider inputs is named `com_mendix_widget_native_slider_Slider`. -### Switch +### Switch {#switch} A switch input widget can be used to display and edit Boolean attributes and is rendered as a switch. This is how a Switch widget looks by default: @@ -2436,7 +2491,7 @@ export const com_mendix_widget_native_switch_Switch = { The default class to style all checkbox inputs is named `com_mendix_widget_native_switch_Switch`. -### Toggle Buttons +### Toggle Buttons {#toggle-buttons} The toggle buttons widget allows you to set an enumeration attribute. This is how a toggle buttons widget could look in an app: @@ -2480,7 +2535,7 @@ export const com_mendix_widget_native_togglebuttons_ToggleButtons = { The default class to style all toggle buttons is named `com_mendix_widget_native_togglebuttons_ToggleButtons`. -### Video Player +### Video Player {#video-player} The video player widget allows you to play video based on a URL, and is limited to MP4 only. This is how a video player widget could look in an app: @@ -2530,7 +2585,7 @@ The widget’s style properties are as follows: The default class to style all video players is named `com_mendix_widget_native_videoplayer_VideoPlayer`. -### Web View +### Web View {#web-view} The web view widget allows you to embed static or dynamic websites in your app. The widget's style properties are as follows: @@ -2566,65 +2621,6 @@ The default class to style all web views is named `com_mendix_widget_native_webv The default class to style all popup menus is named `com_mendix_widget_native_popupmenu_PopupMenu`. -### Carousel - -The carousel widget allows you to show swipeable items in a carousel. - -Main object has to have three objects called `container`, `cardLayout`, and `fullWidthLayout`. `cardLayout` and `fullWidthLayout` will be applied automatically depending on selected layout in widget properties. - -```javascript -export const com_mendix_widget_native_carousel_Carousel = { - container: { - // This has all ViewStyle properties. Styles the view surrounding the carousel widget. For best results, make sure to give a fixed `height` - }, - cardLayout: { - // Styles the carousel when the layout is set to card. - slideItem: { - // This has all ViewStyle properties. Styles the view surrounding each slide, including inactive slides. - }, - inactiveSlideItem: { - opacity: null, // Allows inactive slides to become more smaller and faded. - scale: null, // Allows inactive slides to become more smaller and faded. - }, - indicator: { - color: null, // Styles the loading indicator which will be shown while the carousel is loading. - }, - pagination: { - container: { - // This has all ViewStyle properties. Styles the main view around pagination, regardless of text or dot. - }, - dotStyle: { - // This has all ViewStyle properties. Styles all the pagination dots. - color: null, - }, - inactiveDotStyle: { - // This has all ViewStyle properties. Additional styles for inactive dots. Will be merged with `dotStyle`. - opacity: null, - scale: null, - color: null, - }, - dotContainerStyle: { - // This has all ViewStyle properties. Styles the view around individual pagination dots. - }, - text: { - // This has all TextStyle properties. Will be applied when there are more than five elements in carousel, in which case pagination buttons become text like **1/5**. - }, - }, - }, - - fullWidthLayout: { - // Styles the carousel when the layout is set to full width. - // Same properties as cardLayout. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| container | This has all ViewStyle properties. | Styles the view surrounding the carousel widget. For best results, make sure to give a fixed `height`. | -| cardLayout | LayoutStyle | Styles the carousel when the layout is set to card | -| fullWidthLayout | LayoutStyle | Styles the carousel when the layout is set to full width. | - #### LayoutStyle | Element | Style Properties | Description | From a8645ef48511d0c0f65a29349548f6f232bfdfdd Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Thu, 1 Oct 2026 15:24:19 +0200 Subject: [PATCH 08/10] fix customitem section location --- .../native-styling-element-guide.md | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index 4e96cf3fff7..9ce1abb9482 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -2065,6 +2065,8 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = { | `buttonContainer` | This has all ViewStyle properties. | Styles the wrapper view of triggerer since there could be multiple elements, and it has to be wrapped in a view. | | `container` | This has all ViewStyle properties. | Styles the wrapper view around the whole menu. | +The default class to style all popup menus is named `com_mendix_widget_native_popupmenu_PopupMenu`. + #### BasicItemStyle | Element | Style Properties | Description | @@ -2084,6 +2086,14 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = { | `dangerStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `danger` style selected. | | `customStyle` | This has all TextStyle properties. | Styles all basic menu items which have the `custom` style selected. | +#### CustomItemStyle + +| Element | Style Properties | Description | +| ---------------------------| ---- | ------------------------------------------------ | +| `container` | This has all ViewStyle properties. | Styles the wrapper container around a custom item. | +| `itemStyle` | `rippleColor: string` | Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. | +| `dividerColor` | `string` | Styles the divider color. | + ### Progress Bar {#progress-bar} The progress bar widget shows percentage of progress. This is how a progress bar widget could look in an app: @@ -2611,16 +2621,6 @@ export const com_mendix_widget_native_webview_WebView = { The default class to style all web views is named `com_mendix_widget_native_webview_WebView`. -#### CustomItemStyle - -| Element | Style Properties | Description | -| ---------------------------| ---- | ------------------------------------------------ | -| `container` | This has all ViewStyle properties. | Styles the wrapper container around a custom item. | -| `itemStyle` | `rippleColor: string` | Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. | -| `dividerColor` | `string` | Styles the divider color. | - -The default class to style all popup menus is named `com_mendix_widget_native_popupmenu_PopupMenu`. - #### LayoutStyle | Element | Style Properties | Description | From 88148d32151ba026ad7d7350a8a2419968fd5be4 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Fri, 2 Oct 2026 14:15:26 +0200 Subject: [PATCH 09/10] add N/As and fix table error --- .../native-styling-element-guide.md | 296 +++++++++--------- 1 file changed, 148 insertions(+), 148 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index 9ce1abb9482..ce06a5d44a8 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -166,8 +166,8 @@ export const PageTitle = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `text` | This has all TextStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `text` | This has all TextStyle properties. | N/A | | `text` | `numberOfLines` | This is the maximum number of lines to wrap the label text. If the text is any longer, it will be cut off with an ellipsis (defaults to `0`). | The default class to style all page titles is named `PageTitle`. @@ -209,7 +209,7 @@ export const Container = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `container` | `rippleColor` | This is the color of the ripple on Android, and will be applied only when the container has an on click action set, otherwise it will be ignored (defaults to `rgba(0, 0, 0, 0.2)`). | | `container` | `underlayColor` | This is the color while pressing the container on iOS, and will be applied only when the container has an on click action set, otherwise it will be ignored and defaulted to opacity only. | | `containerDisabled` | Same properties as `container` | This overrides `container` styles if the there is an on click action set and the action cannot be executed or is disabled during action. | @@ -260,19 +260,19 @@ The widget's style properties are as follows: | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `tabBar` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `tabBar` | This has all ViewStyle properties. | N/A | | `tabBar` | `bounces` | This is a Boolean value indicating whether the tab bar bounces when scrolling. | | `tabBar` | `pressColor` | This is a color for material ripple (Android only). | | `tabBar` | `pressOpacity` | This is opacity for a pressed tab. | | `tabBar` | `scrollEnabled` | This is a Boolean value enabling scrollable tabs. | | `tabBar` | `tabBarPosition` | This is the position of the tab bar in the tab view, and possible values are `top` and `bottom` (defaults to `top`). | -| `indicator` | This has all ViewStyle properties. | | -| `tab` | This has all ViewStyle properties. | | -| `label` | This has all TextStyle properties. | | -| `activeLabel` | This has all TextStyle properties. | | -| `badgeContainer` | This has all ViewStyle properties. | | -| `badgeCaption` | This has all TextStyle properties. | | +| `indicator` | This has all ViewStyle properties. | N/A | +| `tab` | This has all ViewStyle properties. | N/A | +| `label` | This has all TextStyle properties. | N/A | +| `activeLabel` | This has all TextStyle properties. | N/A | +| `badgeContainer` | This has all ViewStyle properties. | N/A | +| `badgeCaption` | This has all TextStyle properties. | N/A | The default class to style all tab containers is named `TabContainer`. @@ -290,7 +290,7 @@ export const ScrollContainer = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | The default class to style all scroll containers is named `ScrollContainer`. @@ -347,9 +347,9 @@ export const TextBox = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `containerDisabled` | Same properties as `container` | Overrides `container` styles if the text box is non-editable. | -| `input` | This has all TextStyle properties. | | +| `input` | This has all TextStyle properties. | N/A | | `input` | `autoCapitalize` | This automatically capitalizes certain characters when the user types: | | `input` | `placeholderTextColor` | This is the text color of the placeholder string. | | `input` | `selectionColor` | This is the highlight and cursor color of the text input. | @@ -357,10 +357,10 @@ export const TextBox = { | `inputFocused` | Same properties as `input` | Overrides `input` styles if the text box is focused. | | `inputError` | This has the same properties as `input` | Overrides `input` styles if there are validation errors. | | `inputDisabled` | Same properties as `input` | Overrides `input` styles if the text box is non-editable. | -| `label` | This has all TextStyle properties | | +| `label` | This has all TextStyle properties | N/A | | `label` | `numberOfLines` | This is the maximum number of lines to wrap the label text. If the text is any longer, it will be cut off with an ellipsis (defaults to `1`). | | `labelDisabled` | Same properties as `label` | Overrides `label` styles if the text box is non-editable. | -| `validationMessage` | This has all TextStyle properties. | | +| `validationMessage` | This has all TextStyle properties. | N/A | The default class to style all text boxes is named `TextBox`. @@ -443,18 +443,18 @@ export const DropDown = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `containerDisabled` | Same properties as `container` | Overrides `container` styles if the drop-down is non-editable. | | `iconStyle` | This has all TextStyle properties | Styles the arrow down icon next to the value.| | `item` | This has all TextStyle properties | Styles all the items in dropdown menu including selected item.| | `itemContainer` | This has all ViewStyle properties | Styles all the item containers in dropdown menu including selected item container.| -| `label` | This has all TextStyle properties. | | +| `label` | This has all TextStyle properties. | N/A| | `label` | `numberOfLines` | The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Defaults to `1`. | | `labelDisabled` | Same properties as `label` | Overrides `label` styles if the drop-down is non-editable. | | `menuWrapper` | This has all ViewStyle properties | Styles the wrapper view surrounding all the menu items.| -| `pickerIOS` | This has all ViewStyle properties. | | -| `pickerBackdropIOS` | This has all ViewStyle properties. | | -| `pickerTopIOS` | This has all ViewStyle properties. | | +| `pickerIOS` | This has all ViewStyle properties. | N/A | +| `pickerBackdropIOS` | This has all ViewStyle properties. | N/A | +| `pickerTopIOS` | This has all ViewStyle properties. | N/A | | `selectedItem` | This has all TextStyle properties | Styles the selected item in dropdown menu.| | `selectedItemContainer` | This has all ViewStyle properties | Styles the selected item's container in dropdown menu.| | `useUniformDesign` | `boolean` | Enables new uniformDesign. | @@ -530,20 +530,20 @@ export const Checkbox = { | Element | Style Properties | Description | Render mode | | --- | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | Both | +| `container` | This has all ViewStyle properties. | N/A | Both | | `containerDisabled` | Same properties as `container`. | Overrides `container` styles if the text box is non-editable. | Both | -| `label` | This has all TextStyle properties. | | Both | +| `label` | This has all TextStyle properties. | N/A| Both | | `label` | `numberOfLines` | The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Defaults to `1`. | Both | | `labelDisabled` | Same properties as `label`. | Overrides `label` styles if the checkbox is non-editable. | Both | | `validationMessage` | This has all TextStyle properties. | | Both | -| `input` | This has all ViewStyle properties. | | Switch | +| `input` | This has all ViewStyle properties. | N/A | Switch | | `input` | `trackColorOn` | Custom color for the switch track when turned on. | Switch | | `input` | `trackColorOff` | Custom color for the switch track when turned off. | Switch | | `input` | `thumbColorOn` | Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow. | Switch | | `input` | `thumbColorOff` | Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow. | Switch | | `inputError` | This has the same properties as `input`. | Overrides `input` styles if there are validation errors. | Switch | | `inputDisabled` | This has the same properties as `input`. | Overrides `input` styles if the checkbox is non-editable. | Switch | -| `checkboxInput` | This has all ViewStyle properties. | | Checkbox | +| `checkboxInput` | This has all ViewStyle properties. | N/A | Checkbox | | `checkboxInput` | `color` | Custom color for the tick icon. | Checkbox | | `checkboxInput` | `size` | Custom size for the tick icon. | Checkbox | | `checkboxInputDisabled` | This has the same properties as `checkboxInput`. | Overrides `checkboxInput` styles if the checkbox is non-editable. | Checkbox | @@ -609,23 +609,23 @@ export const DatePicker = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `containerDisabled` | Same properties as `container` | Overrides `container` styles if the date picker is non-editable. | -| `label` | This has all TextStyle properties. | | +| `label` | This has all TextStyle properties. | N/A | | `label` | `numberOfLines` | This is the maximum number of lines to wrap the label text. If the text is any longer, it will be cut off with an ellipsis (defaults to `1`.) | | `labelDisabled` | Same properties as `label` | Overrides `label` styles if the date picker is non-editable. | -| `value` | This has all TextStyle properties | | +| `value` | This has all TextStyle properties | N/A | | `value` | `rippleColor` | This is the color of the ripple on Android, and will be applied only when the date picker is pressed (defaults to `rgba(0, 0, 0, 0.2)`). | | `value` | `underlayColor` | This is the color while pressing the date picker on iOS, if not set it will be defaulted to opacity only. | | `valueDisabled` | This has all TextStyle properties | Overrides `value` styles if the date picker is non-editable. | | `valueContainerError` | This has all TextStyle properties | Overrides `value` styles if the date picker has a validation error. | -| `placeholder` | This has all TextStyle properties | | +| `placeholder` | This has all TextStyle properties | N/A | | `placeholderDisabled` | This has all TextStyle properties | Overrides `placeholder` styles if the date picker is non-editable. | -| `validationMessage` | This has all TextStyle properties | | -| `pickerBackdropIOS` | This has all ViewStyle properties | | -| `pickerIOS` | This has all ViewStyle properties | | -| `pickerIOS` | `color` | | -| `pickerTopIOS` | This has all ViewStyle properties | | +| `validationMessage` | This has all TextStyle properties | N/A | +| `pickerBackdropIOS` | This has all ViewStyle properties | N/A | +| `pickerIOS` | This has all ViewStyle properties | N/A | +| `pickerIOS` | `color` | N/A | +| `pickerTopIOS` | This has all ViewStyle properties | N/A | The default class to style all date picker inputs is named `DatePicker`. @@ -659,9 +659,9 @@ export const com_mendix_widget_native_image_Image = { | Element | Style Properties | Description | | ------------------- | ----------------------------------- | ------------------------------------------------------------ | -| `container` | This has all ViewStyle properties. | | -| `image` | This has all ImageStyle properties. | | -| `backdrop` | This has all ViewStyle properties. | Styles for the backdrop of an enlarged image view. | +| `container` | This has all ViewStyle properties. | N/A | +| `image` | This has all ImageStyle properties. | N/A | +| `backdrop` | This has all ViewStyle properties. | Styles for the backdrop of an enlarged image view. | ### Static Image {#image} @@ -688,11 +688,11 @@ export const Image = { | Element | Style Properties | Description | | ------------------- | ----------------------------------- | ------------------------------------------------------------ | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `container` | `rippleColor` | This is the color of the ripple on Android, and will be applied only when the container has an on click action set, otherwise it will be ignored (defaults to `rgba(0, 0, 0, 0.2)`). | | `container` | `underlayColor` | This is the color while pressing the container on iOS, and will be applied only when the container has an on click action set, otherwise it will be ignored and defaulted to opacity only. | | `containerDisabled` | Same properties as `container` | Overrides `container` styles if the image has an on click action and the action cannot be executed or is disabled during action. | -| `image` | This has all ImageStyle properties. | | +| `image` | This has all ImageStyle properties. | N/A | | `imageDisabled` | Same properties as `image`. | Overrides `image` styles if the image has an on click action and the action cannot be executed or is disabled during action. | The default class to style all static image styles is named `Image`. Please note that images loaded from the model are styled with `NativeDynamicImage` as described in the [Dynamic Image](#dynamic-image) section below. @@ -743,13 +743,13 @@ export const ActionButton = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `container` | `rippleColor` | This is the color of the ripple on Android (defaults to `rgba(0, 0, 0, 0.2)`). | | `container` | `underlayColor` | This is the color while pressing the button on iOS, if not set it will be defaulted to opacity only. | | `containerDisabled` | Same properties as `container` | Overrides `container` styles if the button has on click action set and it cannot be executed or is set with `Disable during action`. | -| `caption` | This has all TextStyle properties. | | +| `caption` | This has all TextStyle properties. | N/A | | `captionDisabled` | Same properties as `caption` | Overrides `caption` styles if the button has on click action set and it cannot be executed or is set with `Disable during action`. | -| `icon` | This has all ViewStyle properties. | | +| `icon` | This has all ViewStyle properties. | N/A | | `icon` | `size` | This is the size of the button icon (defaults to `12`). | | `icon` | `color` | This is the color of the button icon. | | `iconDisabled` | Same properties as `icon` | Overrides `icon` styles if the button has on click action set and it cannot be executed or is set with `Disable during action`. | @@ -794,7 +794,7 @@ export const Page = { | `header` | `title` | This has all TextStyle properties. | | `header` | `backButtonText` | This has all TextStyle properties. | | `header` | `backButtonIcon` | This has all ImageStyle properties. | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | The default classes for layouts and pages are `Layout` and `Page`. @@ -964,7 +964,7 @@ export const com_mendix_widget_native_animation_Animation = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | The default class to style all animation widgets is named `com_mendix_widget_native_animation_Animation`. @@ -1028,8 +1028,8 @@ export const com_mendix_widget_native_backgroundimage_BackgroundImage = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `image` | This has all ImageStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `image` | This has all ImageStyle properties. | N/A | | `image` | `svgColor` | Property to set the color of an SVG image (defaults to `black`). | The default class to style all background images is named `com_mendix_widget_native_backgroundimage_BackgroundImage`. @@ -1053,8 +1053,8 @@ export const com_mendix_widget_native_badge_Badge = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `caption` | This has all TextStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `caption` | This has all TextStyle properties. | N/A | The default class to style all badges is named `com_mendix_widget_native_badge_Badge`. @@ -1147,9 +1147,9 @@ export const com_mendix_widget_native_barchart_BarChart = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A| +| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A| +| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A| | `grid` | `backgroundColor` | Applies a color to the grid background (string). | | `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | | `grid` | `lineColor` | Applies a color to the grid lines (string). | @@ -1169,15 +1169,15 @@ export const com_mendix_widget_native_barchart_BarChart = { | `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | | `xAxis` | `lineColor` | Applies a color to the axis line (string). | | `xAxis` | `width` | Applies a width to the axis line (number). | -| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **bottom** or **right** side of the grid. | -| `yAxis` | All `xAxis` element styles. | | -| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `yAxis` | All `xAxis` element styles. | N/A | +| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **top** or **left** side of the grid. | -| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `domain` > `padding` | `x` | Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). | | `domain` > `padding` | `y` | Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). | | `bars` | `barColorPalette` | Provides colors to bars that do not have a bar color configured (string with list of colors separated by ';', one color for each series). | @@ -1212,8 +1212,8 @@ export const com_mendix_widget_native_barcodescanner_BarcodeScanner = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `mask` | This only allows the properties below. | | +| `container` | This has all ViewStyle properties. | N/A | +| `mask` | This only allows the properties below. | N/A | | `mask` | `color` | Property to set the color of the mask border indicators (defaults to `#62B1F6`). | | `mask` | `width` | Property to set the width of the barcode reader. | | `mask` | `height` | Property to set the height of the barcode reader. | @@ -1441,9 +1441,9 @@ export const com_mendix_widget_native_columnchart_ColumnChart = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | +| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | | `grid` | `backgroundColor` | Applies a color to the grid background (string). | | `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | | `grid` | `lineColor` | Applies a color to the grid lines (string). | @@ -1465,13 +1465,13 @@ export const com_mendix_widget_native_columnchart_ColumnChart = { | `xAxis` | `width` | Applies a width to the axis line (number). | | `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | | `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **bottom** or **right** side of the grid. | -| `yAxis` | All `xAxis` element styles. | | -| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `yAxis` | All `xAxis` element styles. | N/A | +| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **top** or **left** side of the grid. | -| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `domain` > `padding` | `x` | Applies a number of pixels of padding to add the beginning and end of the X axis domain (number). | | `domain` > `padding` | `y` | Applies a number of pixels of padding to add the beginning and end of the Y axis domain (number). | | `columns` | `columnColorPalette` | Provides colors to columns that do not have a column color configured (string with list of colors separated by ';', one color for each series). | @@ -1536,16 +1536,16 @@ export const com_mendix_widget_native_feedback_Feedback = { | Element | Style Properties | Description | | --- | --- | --- | -| `floatingButton` | This has all ViewStyle properties. | | -| `dialog` | This has all ViewStyle properties. | | -| `title` | This has all TextStyle properties. | | -| `textAreaInput` | This has all TextStyle properties. | | +| `floatingButton` | This has all ViewStyle properties. | N/A | +| `dialog` | This has all ViewStyle properties. | N/A | +| `title` | This has all TextStyle properties. | N/A | +| `textAreaInput` | This has all TextStyle properties. | N/A | | `textAreaInput` | `placeholderTextColor` | This is the text color of the placeholder string. | | `textAreaInput` | `selectionColor` | This is the highlight and cursor color of the text input. | | `textAreaInput` | `underlineColorAndroid` | This is the underline color for Android devices. | | `textAreaInput` | `numberOfLines` | This is the height of the text area is based on this number of text lines. | -| `switchLabel` | This has all TextStyle properties. | | -| `switchInput` | This has all TextStyle properties. | | +| `switchLabel` | This has all TextStyle properties. | N/A | +| `switchInput` | This has all TextStyle properties. | N/A | | `switchInput` | `trackColorOn` | This is the custom color for the switch track when turned on. | | `switchInput` | `trackColorOff` | This is the custom color for the switch track when turned off. | | `switchInput` | `thumbColorOn` | This is the color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow. | @@ -1596,16 +1596,16 @@ export const com_mendix_widget_native_floatingactionbutton_FloatingActionButton | Element | Style Properties | Description | | --- | ---| --- | -| `container` | This has all ViewStyle properties. | | -| `button` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `button` | This has all ViewStyle properties. | N/A | | `button` | `size` | This is the radius of the button. | | `button` | `rippleColor` | This is the color of the ripple on Android. | -| `buttonIcon` | This has all ImageStyle properties. | | -| `secondaryButton` | This has all ViewStyle properties. | | +| `buttonIcon` | This has all ImageStyle properties. | N/A | +| `secondaryButton` | This has all ViewStyle properties. | N/A | | `secondaryButton` | `size` | This is the radius of the secondary buttons. | -| `secondaryButtonIcon` | This has all ImageStyle properties. | | -| `secondaryButtonCaption` | This has all TextStyle properties. | | -| `secondaryButtonCaptionContainer` | This has all ViewStyle properties. | | +| `secondaryButtonIcon` | This has all ImageStyle properties. | N/A | +| `secondaryButtonCaption` | This has all TextStyle properties. | N/A | +| `secondaryButtonCaptionContainer` | This has all ViewStyle properties. | N/A | The default class to style all floating actions buttons is named `com_mendix_widget_native_floatingactionbutton_FloatingActionButton`. @@ -1648,7 +1648,7 @@ export const com_mendix_widget_native_gallery_Gallery = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | | `emptyPlaceholder` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the empty placeholder. | | `firstItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the first item of the list. | | `lastItem` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | Applies a view style to the last item of the list. | @@ -1738,15 +1738,15 @@ export const com_mendix_widget_native_animation_Animation = { | Element | Style Properties | Description | | --- | --- | --- | -| `fullscreenContainer` | This has all ViewStyle properties. | | -| `popupContainer` | This has all ViewStyle properties. | | -| `paginationContainer` | This has all ViewStyle properties. | | -| `paginationText` | This has all TextStyle properties. | | -| `dotStyle` | This has all ViewStyle properties. | | -| `activeDotStyle` | This has all ViewStyle properties. | | -| `buttonsContainer` | This has all ViewStyle properties. | | +| `fullscreenContainer` | This has all ViewStyle properties. | N/A | +| `popupContainer` | This has all ViewStyle properties. | N/A | +| `paginationContainer` | This has all ViewStyle properties. | N/A | +| `paginationText` | This has all TextStyle properties. | N/A | +| `dotStyle` | This has all ViewStyle properties. | N/A | +| `activeDotStyle` | This has all ViewStyle properties. | N/A | +| `buttonsContainer` | This has all ViewStyle properties. | N/A | | `container` | This has all ViewStyle properties. | Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. | -| `caption` | This has all ViewStyle properties. | | +| `caption` | This has all ViewStyle properties. | N/A | | `icon` | `size` | The size of the icon. | | `icon` | `color` | The color of the icon. | @@ -1837,9 +1837,9 @@ export const com_mendix_widget_native_linechart_LineChart = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | -| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | +| `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `errorMessage` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | +| `chart` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | | `grid` | `backgroundColor` | Applies a color to the grid background (string). | | `grid` | `dashArray` | Applies a pattern of dashes and gaps to the grid lines (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | | `grid` | `lineColor` | Applies a color to the grid lines (string). | @@ -1859,15 +1859,15 @@ export const com_mendix_widget_native_linechart_LineChart = { | `xAxis` | `fontWeight` | Applies a font weight to the axis value labels ("normal" or "bold" or "100" or "200" or "300" or "400" or "500" or "600" or "700" or "800" or "900"). | | `xAxis` | `lineColor` | Applies a color to the axis line (string). | | `xAxis` | `lineWidth` | Applies a width to the axis line (number). | -| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `xAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the bottom or right side of the grid ("bottom" or "right"). | -| `yAxis` | All `xAxis` element styles. | | -| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `yAxis` | All `xAxis` element styles. | N/A | +| `yAxis` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `yAxis` > `label` | `relativePositionGrid` | Positions the axis label at the top or left side of the grid ("top" or "left"). | -| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | | +| `legend` > `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `item` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `indicator` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | N/A | +| `legend` > `label` | All [TextStyle](https://reactnative.dev/docs/text-style-props) properties. | N/A | | `lines` | `lineColorPalette` | Provides colors to lines that do not have a line color configured (string with list of colors separated by ';'). | | `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `dashArray` | Applies a pattern of dashes and gaps to the graph line (string containing a [dash pattern](https://www.w3.org/TR/SVG11/painting.html#StrokeDasharrayProperty)). | | `lines` > `customLineStyles` > `any_custom_line_style_name` > `line` | `ending` | Applies a flat or rounded line end to the graph line ("flat" or "round"). | @@ -1946,8 +1946,8 @@ The widget's style properties are as follows: | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `loadingOverlay` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `loadingOverlay` | This has all ViewStyle properties. | N/A | | `loadingIndicator` | `color` | This is the color of the loading indicator. | | `marker` | `color` | This is the color of the location marker. | | `marker` | `opacity` | This is the opacity of the location marker. | @@ -2060,8 +2060,8 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = { | Element | Style Properties | Description | | ---| --- | ---| -| `basic` | BasicItemStyle |Styles basic items. | -| `custom` | CustomItemStyle |Styles custom items. | +| `basic` | BasicItemStyle |Styles basic items. | N/A | +| `custom` | CustomItemStyle |Styles custom items. | N/A | | `buttonContainer` | This has all ViewStyle properties. | Styles the wrapper view of triggerer since there could be multiple elements, and it has to be wrapped in a view. | | `container` | This has all ViewStyle properties. | Styles the wrapper view around the whole menu. | @@ -2088,11 +2088,11 @@ The default class to style all popup menus is named `com_mendix_widget_native_po #### CustomItemStyle -| Element | Style Properties | Description | -| ---------------------------| ---- | ------------------------------------------------ | +| Element | Style Properties | Description | +| ---------| ---- | ------------ | | `container` | This has all ViewStyle properties. | Styles the wrapper container around a custom item. | -| `itemStyle` | `rippleColor: string` | Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. | -| `dividerColor` | `string` | Styles the divider color. | +| `itemStyle` | `rippleColor: string` | Styles the color of touch feedback when item is tapped. Works for both iOS and Android platforms. | +| `dividerColor` | `string` | Styles the divider color. | ### Progress Bar {#progress-bar} @@ -2119,10 +2119,10 @@ export const com_mendix_widget_native_progressbar_ProgressBar = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `bar` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `bar` | This has all ViewStyle properties. | N/A | | `fill` | `backgroundColor` | This is the background color of the filled progress bar portion. | -| `validationMessage` | This has all TextStyle properties. | | +| `validationMessage` | This has all TextStyle properties. | N/A | The default class to style all progress bars is named `com_mendix_widget_native_progressbar_ProgressBar`. @@ -2158,15 +2158,15 @@ export const com_mendix_widget_native_progresscircle_ProgressCircle = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `circle` | `size` | This is the radius of the progress circle. | | `circle` | `borderWidth` | This is the border width of the progress circle. | | `circle` | `borderColor` | This is the color of the progress circle border. | | `fill` | `backgroundColor` | This is the color of the circle’s filled portion. | | `fill` | `width` | This is the width of the progress circle. | | `fill` | `lineCapRounded` | This determines if the rotating line’s front tip is rounded off or not. | -| `text` | This has all TextStyle properties. | | -| `validationMessage` | This has all TextStyle properties. | | +| `text` | This has all TextStyle properties. | N/A | +| `validationMessage` | This has all TextStyle properties. | N/A | The default class to style all progress circles is named `com_mendix_widget_native_progresscircle_ProgressCircle`. @@ -2191,7 +2191,7 @@ export const com_mendix_widget_native_qrcode_QRCode = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `qrcode` | `size` | The size of the QR code. | | `qrcode` | `color`| The color of the QR code. | | `qrcode` | `backgroundColor` | The background color behind the QR code. | @@ -2292,15 +2292,15 @@ export const com_mendix_widget_native_rangeslider_RangeSlider = { | Element | Style Properties | Description | | ---| --- | --- | -| `container` | This has all ViewStyle properties. | | -| `track` | This has all ViewStyle properties. | | -| `trackDisabled` | This has all ViewStyle properties. | | -| `highlight` | This has all ViewStyle properties. | | -| `highlightDisabled` | This has all ViewStyle properties. | | -| `marker` | This has all ViewStyle properties. | | -| `markerActive` | This has all ViewStyle properties. | | -| `markerDisabled` | This has all ViewStyle properties. | | -| `validationMessage` | This has all TextStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `track` | This has all ViewStyle properties. | N/A | +| `trackDisabled` | This has all ViewStyle properties. | N/A | +| `highlight` | This has all ViewStyle properties. | N/A | +| `highlightDisabled` | This has all ViewStyle properties. | N/A | +| `marker` | This has all ViewStyle properties. | N/A | +| `markerActive` | This has all ViewStyle properties. | N/A | +| `markerDisabled` | This has all ViewStyle properties. | N/A | +| `validationMessage` | This has all TextStyle properties. | N/A | The default class to style all range slider inputs is named `com_mendix_widget_native_rangeslider_RangeSlider`. @@ -2329,9 +2329,9 @@ export const com_mendix_widget_native_rating_Rating = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `containerDisabled` | This has all ViewStyle properties. | | -| `icon` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `containerDisabled` | This has all ViewStyle properties. | N/A | +| `icon` | This has all ViewStyle properties. | N/A | | `icon` | `size` | The size of the icon. | | `icon` | `color` | The color of the icon. | | `icon` | `selectedColor` | The color of the icon when selected. | @@ -2417,19 +2417,19 @@ export const com_mendix_widget_native_signature_Signature = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | | This has all ViewStyle properties. | +| `container` | This has all ViewStyle properties. | N/A | | `container` | `penColor` | This will change the color of the stroke. | -| `buttonWrapper` | | This has all ViewStyle properties. | -| `buttonClearContainer` | | This has all ViewStyle properties. | +| `buttonWrapper` | This has all ViewStyle properties. | N/A | +| `buttonClearContainer` | This has all ViewStyle properties. | N/A | | `buttonClearContainer` | `rippleColor` | This will change the color of the ripple on Android. | | `buttonClearContainer` | `activeOpacity` | This will change the opacity when touch is active on iOS. | | `buttonClearContainer` | `underlayColor` | This will change the underlay color when touch is active on iOS. | -| `buttonClearCaption` | | This has all TextStyle properties. | -| `buttonSaveContainer` | | This has all ViewStyle properties. | +| `buttonClearCaption` | This has all TextStyle properties. | N/A | +| `buttonSaveContainer` | This has all ViewStyle properties. | N/A | | `buttonSaveContainer` | `rippleColor` | This will change the color of the ripple on Android. | | `buttonSaveContainer` | `activeOpacity` | This will change the opacity when touch is active on iOS. | | `buttonSaveContainer` | `underlayColor` | This will change the underlay color when touch is active on iOS. | -| `buttonSaveCaption` | | This has all TextStyle properties. | +| `buttonSaveCaption` | This has all TextStyle properties. | N/A | The default class to style all text boxes is named `com_mendix_widget_native_signature_Signature`. @@ -2485,19 +2485,19 @@ export const com_mendix_widget_native_switch_Switch = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `containerDisabled` | Same properties as `container` | Overrides `container` styles if the text box is non-editable. | -| `input` | This has all TextStyle properties. | | +| `input` | This has all TextStyle properties. | N/A | | `input` | `trackColorOn` | Custom color for the switch track when turned on. | | `input` | `trackColorOff` | Custom color for the switch track when turned off. | | `input` | `thumbColorOn` | Color of the foreground switch grip when turned on. If this is set on iOS, the switch grip will lose its drop shadow. | | `input` | `thumbColorOff` | Color of the foreground switch grip when turned off. If this is set on iOS, the switch grip will lose its drop shadow. | | `inputError` | This has the same properties as `input` | Overrides `input` styles if there are validation errors. | | `inputDisabled` | This has the same properties as `input` | Overrides `input` styles if the checkbox is non-editable. | -| `label` | This has all TextStyle properties | | +| `label` | This has all TextStyle properties | N/A | | `label` | `numberOfLines` | The maximum number of lines to wrap the label text. If the text is any longer it will be cut off with an ellipsis. Defaults to `1`. | | `labelDisabled` | Same properties as `label` | Overrides `label` styles if the checkbox is non-editable. | -| `validationMessage` | This has all TextStyle properties. | | +| `validationMessage` | This has all TextStyle properties. | N/A | The default class to style all checkbox inputs is named `com_mendix_widget_native_switch_Switch`. @@ -2535,13 +2535,13 @@ export const com_mendix_widget_native_togglebuttons_ToggleButtons = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `containerDisabled` | This has all ViewStyle properties. | | -| `button` | This has all ViewStyle properties. | | -| `text` | This has all TextStyle properties. | | -| `activeButton` | This has all ViewStyle properties. | | -| `activeButtonText` | This has all TextStyle properties. | | -| `validationMessage` | This has all TextStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `containerDisabled` | This has all ViewStyle properties. | N/A | +| `button` | This has all ViewStyle properties. | N/A | +| `text` | This has all TextStyle properties. | N/A | +| `activeButton` | This has all ViewStyle properties. | N/A | +| `activeButtonText` | This has all TextStyle properties. | N/A | +| `validationMessage` | This has all TextStyle properties. | N/A | The default class to style all toggle buttons is named `com_mendix_widget_native_togglebuttons_ToggleButtons`. @@ -2584,10 +2584,10 @@ The widget’s style properties are as follows: | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | | `indicator` | `color` | The loading indicator color. | -| `video` | This has all ViewStyle properties. | | -| `errorMessage` | This has all TextStyle properties. | | +| `video` | This has all ViewStyle properties. | N/A | +| `errorMessage` | This has all TextStyle properties. | N/A | | `fullScreenVideoPlayer` | This has all ViewStyle properties. | Android only | | `controlBtnContainerStyle` | This has all ViewStyle properties. | Android only | | `fullScreenVideoStyle` | This has all ViewStyle properties. | Android only | From 9edf98932181820de40bd0d8a50ef9185d460af1 Mon Sep 17 00:00:00 2001 From: ConnorLand <47385345+ConnorLand@users.noreply.github.com> Date: Fri, 2 Oct 2026 14:28:42 +0200 Subject: [PATCH 10/10] add last missing N/As --- .../native-styling-element-guide.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md index ce06a5d44a8..0557d01e247 100644 --- a/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md +++ b/content/en/docs/refguide/mobile/designing-mobile-user-interfaces/native-styling-element-guide.md @@ -111,9 +111,9 @@ The widget's style properties are as follows: | Element | Style Properties | Description | | --- | --- | --- | -| `container` | All ViewStyle properties | | +| `container` | All ViewStyle properties | N/A | | `container` | `numColumns` | This is the number of columns that the list should render (defaults to 1). | -| `listItem` | All ViewStyle properties | | +| `listItem` | All ViewStyle properties | N/A | | `listItem` | `rippleColor` | This is the color of the ripple on Android, and will be applied only when the item has an on click action set, otherwise it will be ignored (defaults to `rgba(0, 0, 0, 0.2)`). | | `listItem` | `underlayColor` | This is the color while pressing the item on iOS, and will be applied only when the item has an on click action set, otherwise it will be ignored and defaulted to opacity only. | | `listItemDisabled` | Same properties as `listItem` | Overrides `listItem` styles if the item has an on click action and the action cannot be executed or is disabled during action. | @@ -142,8 +142,8 @@ export const Text = { | Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `text` | This has all TextStyle properties. | | +| `container` | This has all ViewStyle properties. | N/A | +| `text` | This has all TextStyle properties. | N/A | | `text` | `numberOfLines` | This is the maximum number of lines to wrap the label text. If the text is any longer, it will be cut off with an ellipsis (defaults to `0`). | The default class to style all texts is named `Text`. @@ -992,10 +992,10 @@ export const com_mendix_widget_native_backgroundgradient_BackgroundGradient = { | Element | Style Properties | Description | | --- | --- | --- | -| `angle` | | Line of direction. Takes a value from `0` to `360`. A value of 0 is equivalent to top; increasing values rotate the design clockwise. | +| `angle` | N/A | Line of direction. Takes a value from `0` to `360`. A value of 0 is equivalent to top; increasing values rotate the design clockwise. | | `colorList` | [gradient_color_object](#gradient-color-object) | Passes the colors you want to display in an array. Example: `[{ color: "#fff", offset: 0 }, { color: "#000", offset: 1 }]` | | `container` | All [ViewStyle](https://reactnative.dev/docs/view-style-props) properties. | | -| `opacity` | | Takes a value from `0` to `100`. The lower the value, the more transparent. | +| `opacity` | N/A | Takes a value from `0` to `100`. The lower the value, the more transparent. | The default class to style all background gradients is named `com_mendix_widget_native_backgroundgradient_BackgroundGradient`.