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..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. | @@ -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/). @@ -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`. @@ -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. | @@ -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: @@ -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 | @@ -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: @@ -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. @@ -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. @@ -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`. @@ -858,6 +858,72 @@ 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} + +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} The activity indicator widget displays a circular loading indicator. This is how an activity indicator widget could look in an app: @@ -884,11 +950,67 @@ export const com_mendix_widget_native_activityindicator_ActivityIndicator = { The default class to style all activity indicators is named `com_mendix_widget_native_activityindicator_ActivityIndicator`. -### App Events +### 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: + +```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. | N/A | + +The default class to style all animation widgets is named `com_mendix_widget_native_animation_Animation`. + +### 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 Image +### Background Gradient {#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` | 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` | 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`. + +#### 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 {#background-image} The background image widget enables layering one or more widgets on top of an image. @@ -906,13 +1028,13 @@ 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`. -### Badge +### Badge {#badge} The badge widget displays text or values as a badge. This is how a badge widget could look in an app: @@ -931,12 +1053,146 @@ 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`. -### Barcode Scanner +### 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. + +```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. | 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). | +| `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. | N/A | +| `xAxis` > `label` | `relativePositionGrid` | Positions the axis label at the **bottom** or **right** side of the grid. | +| `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. | 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). | +| `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 {#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. @@ -956,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. | @@ -965,33 +1221,276 @@ 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`. -### Color Picker +### Bottom Sheet {#bottom-sheet} -The color picker widget allows a user to pick a color from a color spectrum. +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_colorpicker_ColorPicker = { +export const com_mendix_widget_native_bottomsheet_BottomSheet = { container: { // This has all ViewStyle properties. }, - preview: { - // This has all ViewStyle properties. Styles the color preview swatch (defaults to borderRadius: 5, minHeight: 50). + 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 | +| Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | Styles the wrapper view around the whole widget. | -| `preview` | This has all ViewStyle properties. | Styles the color preview swatch (defaults to `borderRadius: 5`, `minHeight: 50`). | +| `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 color picker widgets is named `com_mendix_widget_native_colorpicker_ColorPicker`. +The default class to style all bottom sheet widgets is named `com_mendix_widget_native_bottomsheet_BottomSheet`. -### Feedback +### Carousel {#carousel} -The feedback widget allows users to give direct feedback. This is how a feedback widget could look in an app: +The carousel widget allows you to show swipeable items in a carousel. -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/feedback-two.png" alt="feedback" width="350" class="no-border" >}} +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. + +```javascript +export const com_mendix_widget_native_colorpicker_ColorPicker = { + container: { + // This has all ViewStyle properties. + }, + preview: { + // This has all ViewStyle properties. Styles the color preview swatch (defaults to borderRadius: 5, minHeight: 50). + }, +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `container` | This has all ViewStyle properties. | Styles the wrapper view around the whole widget. | +| `preview` | This has all ViewStyle properties. | Styles the color preview swatch (defaults to `borderRadius: 5`, `minHeight: 50`). | + +The default class to style all color picker widgets is named `com_mendix_widget_native_colorpicker_ColorPicker`. + +### 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. + +```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. | 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). | +| `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. | 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. | 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). | +| `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 {#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 = { @@ -1037,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. | @@ -1059,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: @@ -1097,476 +1596,293 @@ 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`. -### Maps +### Gallery {#gallery} -The maps widget supports various digital map providers. This is how a maps widget could look in an app: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/maps.png" alt="maps" width="350" class="no-border" >}} +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_maps_Maps = { +export const com_mendix_widget_native_gallery_Gallery = { container: { - // This has all ViewStyle properties. + // This has all ViewStyle properties. }, - loadingOverlay: { - // This has all ViewStyle properties. + emptyPlaceholder: { + // This has all ViewStyle properties. Applies a view style to the empty placeholder. }, - loadingIndicator: { - color: null, // This is the color of the loading indicator. + firstItem: { + // This has all ViewStyle properties. Applies a view style to the first item of the list. }, - marker: { - color: null, // This is the color of the location marker. - opacity: null, // This is the opacity of the location marker. + 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) }, }; ``` -The widget's style properties are as follows: - -| Element | Style Properties | Description | +| Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `loadingOverlay` | This has all ViewStyle properties. | | -| `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. | - -The default class to style all map widgets is named `com_mendix_widget_native_maps_Maps`. - -### 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. - -### Progress Bar - -The progress bar widget shows percentage of progress. This is how a progress bar widget could look in an app: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/progress-bar.png" alt="progress bar" width="300" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_progressbar_ProgressBar = { - container: { - // This has all ViewStyle properties. - }, - bar: { - // This has all ViewStyle properties. - }, - fill: { - backgroundColor: null, // This is the background color of the filled progress bar portion. - }, - validationMessage: { - // This has all TextStyle properties. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `bar` | This has all ViewStyle properties. | | -| `fill` | `backgroundColor` | This is the background color of the filled progress bar portion. | -| `validationMessage` | This has all TextStyle properties. | | - -The default class to style all progress bars is named `com_mendix_widget_native_progressbar_ProgressBar`. +| `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. | +| `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. | -### Progress Circle +The default class to style all Gallery widgets is named `com_mendix_widget_native_gallery_Gallery`. -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: +#### Gallery Filtering -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/progress-circle.png" alt="progress circle" width="300" class="no-border" >}} +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_progresscircle_ProgressCircle = { - container: { - // This has all ViewStyle properties. - }, - circle: { - size: null, // This is the radius of the progress circle. - borderWidth: null, // This is the border width of the progress circle. - borderColor: null, // This is the color of the progress circle border. - }, - fill: { - backgroundColor: null, // This is the color of the circle’s filled portion. - width: null, // This is the width of the progress circle. - lineCapRounded: null, // This determines if the rotating line’s front tip is rounded off or not. - }, - text: { - // This has all TextStyle properties. +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. }, - validationMessage: { - // This has all TextStyle properties. + textInputContainerFocused: { + // This has all ViewStyle properties. Applies a view style to the container of the text input when the text box is focused. }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `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. | | - -The default class to style all progress circles is named `com_mendix_widget_native_progresscircle_ProgressCircle`. - -### 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: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/qr-code.png" alt="qr code" width="350" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_qrcode_QRCode = { - container: { - // This has all ViewStyle properties. + textInput: { + // This has all ViewStyle properties. Applies a view style to the text input. }, - qrcode: { - size: null, // The size of the QR code. - color: null, // The color of the QR code. - borderColor: null, // The background color behind the QR code. + textInputClearIcon: { + // This has all ViewStyle properties. Applies style to the text clear button in the text box. }, }; ``` -| Element | Style Properties | Description | +| Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `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. | +| `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 QR codes is named `com_mendix_widget_native_qrcode_QRCode`. +The default class to style all gallery text filter widgets is named `com_mendix_widget_native_gallerytextfilter_GalleryTextFilter`. -### Range Slider {#range-slider} +### Intro Screen {#intro-screen} -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: +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/range-slider.png" alt="range slider" width="300" class="no-border" >}} +{{< 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_rangeslider_RangeSlider = { - container: { - // This has all ViewStyle properties. - }, - track: { - // This has all ViewStyle properties. - }, - trackDisabled: { +export const com_mendix_widget_native_animation_Animation = { + fullscreenContainer: { // This has all ViewStyle properties. }, - highlight: { + popupContainer: { // This has all ViewStyle properties. }, - highlightDisabled: { + paginationContainer: { // This has all ViewStyle properties. }, - marker: { - // This has all ViewStyle properties. + paginationText: { + // This has all TextStyle properties. }, - markerActive: { + dotStyle: { // This has all ViewStyle properties. }, - markerDisabled: { + activeDotStyle: { // This has all ViewStyle properties. }, - validationMessage: { - // This has all TextStyle properties. - }, -}; -``` - -| 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. | | - -The default class to style all range slider inputs is named `com_mendix_widget_native_rangeslider_RangeSlider`. - -### 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. - -The widget's style properties are as follows: - -```javascript -export const com_mendix_widget_native_safeareaview_SafeAreaView = { - container: { + buttonsContainer: { // This has all ViewStyle properties. }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | - -The default class to style all safe area views is named `com_mendix_widget_native_safeareaview_SafeAreaView`. - -### 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: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/slider.png" alt="slider" width="300" class="no-border" >}} - -This widget supports the same style properties as the [range slider](#range-slider) widget above. - -The default class to style all slider inputs is named `com_mendix_widget_native_slider_Slider`. - -### Ratings - -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. + // This has all ViewStyle properties. Meant for buttonSkip, buttonDone, buttonPrevious, and buttonNext. }, - containerDisabled: { + caption: { // 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 | +| Element | Style Properties | Description | | --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `containerDisabled` | This has all ViewStyle properties. | | -| `icon` | 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. | 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. | - -The default class to style all rating inputs is named `com_mendix_widget_native_rating_Rating`. -### Toggle Buttons +The default class to style all into screen widgets is named `com_mendix_widget_native_introscreen_IntroScreen`. -The toggle buttons widget allows you to set an enumeration attribute. This is how a toggle buttons widget could look in an app: +### Line Chart {#line-chart} -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/toggle-buttons.png" alt="toggle buttons" width="350" class="no-border" >}} +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_togglebuttons_ToggleButtons = { +export const com_mendix_widget_native_linechart_LineChart = { container: { - // This has all ViewStyle properties. - }, - containerDisabled: { - // This has all ViewStyle properties. + // This has all ViewStyle properties. }, - button: { - // This has all ViewStyle properties. + errorMessage: { + // This has all TextStyle properties. }, - text: { - // This has all TextStyle properties. + chart: { + // This has all ViewStyle properties. }, - activeButton: { - // 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. }, - activeButtonText: { - // This has all TextStyle properties. + 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"). + }, }, - validationMessage: { - // This has all TextStyle properties. + yAxis: { + // All `xAxis` element styles. }, -}; -``` - -| 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. | | - -The default class to style all toggle buttons is named `com_mendix_widget_native_togglebuttons_ToggleButtons`. - -### 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: - -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/video-player.png" alt="video player" width="300" class="no-border" >}} - -```javascript -export const com_mendix_widget_native_videoplayer_VideoPlayer = { - container: { - // This has all ViewStyle properties. - }, - indicator: { - color: null, // The loading indicator color. - }, - video: { - // This has all ViewStyle properties. - }, - errorMessage: { - // This has all TextStyle properties. - }, - fullScreenVideoPlayer: { - // This has all ViewStyle properties. Android only. - }, - controlBtnContainerStyle: { - // This has all ViewStyle properties. Android only. - }, - fullScreenVideoStyle: { - // This has all ViewStyle properties. Android only. - }, - fullScreenActivityIndicatorStyle: { - // This has all ViewStyle properties. Android only. - }, -}; -``` - -The widget’s style properties are as follows: - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `indicator` | `color` | The loading indicator color. | -| `video` | This has all ViewStyle properties. | | -| `errorMessage` | This has all TextStyle properties. | | -| `fullScreenVideoPlayer` | This has all ViewStyle properties. | Android only | -| `controlBtnContainerStyle` | This has all ViewStyle properties. | Android only | -| `fullScreenVideoStyle` | This has all ViewStyle properties. | Android only | -| `fullScreenActivityIndicatorStyle` | This has all ViewStyle properties. | Android only | - -The default class to style all video players is named `com_mendix_widget_native_videoplayer_VideoPlayer`. - -### 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: - -```javascript -export const com_mendix_widget_native_webview_WebView = { - container: { - // This has all ViewStyle properties. - }, - errorContainer: { - // This has all ViewStyle properties. - }, - errorText: { - // This has all TextSTyle properties. - }, -}; -``` - -| Element | Style Properties | Description | -| --- | --- | --- | -| `container` | This has all ViewStyle properties. | | -| `errorContainer` | This has all ViewStyle properties. | | -| `errorText` | This has all TextStyle properties. | | - -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: - -{{< 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. + 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 | | --- | --- | --- | -| `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. | +| `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). | +| `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. | 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. | 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. | 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"). | +| `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 into screen widgets is named `com_mendix_widget_native_introscreen_IntroScreen`. +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: @@ -1602,69 +1918,113 @@ 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" >}} +### Maps {#maps} -* Expanding bottom sheet: +The maps widget supports various digital map providers. This is how a maps widget could look in an app: - {{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/expanding-bottom-sheet.gif" alt="expanding bottom sheet" width="350" class="no-border" >}} +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/maps.png" alt="maps" width="350" class="no-border" >}} ```javascript -export const com_mendix_widget_native_bottomsheet_BottomSheet = { +export const com_mendix_widget_native_maps_Maps = { 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. + loadingOverlay: { + // This has all ViewStyle properties. }, - dangerStyle: { - // This has all TextStyle properties. Available when `Danger` is selected as style for basic items. + loadingIndicator: { + color: null, // This is the color of the loading indicator. }, - customStyle: { - // This has all TextStyle properties. Available when `Custom` is selected as style for basic items. + marker: { + color: null, // This is the color of the location marker. + opacity: null, // This is the opacity of the location marker. }, }; ``` -| Element | Style Properties | Description | +The widget's style properties are as follows: + +| 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. | +| `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. | -The default class to style all bottom sheet widgets is named `com_mendix_widget_native_bottomsheet_BottomSheet`. +The default class to style all map widgets is named `com_mendix_widget_native_maps_Maps`. -### Popup Menu +### Notifications {#notifications} -The popup menu widget allows you to show a context menu exactly where the user taps. +The notifications widget lets you display a custom message in your app. This widget has no user interface so does not support any styling. -A main object has four objects: +### 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. ```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. - }, +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 {#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. @@ -1700,11 +2060,13 @@ 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. | +The default class to style all popup menus is named `com_mendix_widget_native_popupmenu_PopupMenu`. + #### BasicItemStyle | Element | Style Properties | Description | @@ -1726,128 +2088,150 @@ export const com_mendix_widget_native_popupmenu_PopupMenu = { #### 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. | - -The default class to style all popup menus is named `com_mendix_widget_native_popupmenu_PopupMenu`. +| `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. | -### Carousel +### Progress Bar {#progress-bar} -The carousel widget allows you to show swipeable items in a carousel. +The progress bar widget shows percentage of progress. This is how a progress bar widget could look in an app: -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. +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/progress-bar.png" alt="progress bar" width="300" class="no-border" >}} ```javascript -export const com_mendix_widget_native_carousel_Carousel = { +export const com_mendix_widget_native_progressbar_ProgressBar = { container: { - // This has all ViewStyle properties. Styles the view surrounding the carousel widget. For best results, make sure to give a fixed `height` + // This has all ViewStyle properties. }, - 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**. - }, - }, + bar: { + // This has all ViewStyle properties. }, - - fullWidthLayout: { - // Styles the carousel when the layout is set to full width. - // Same properties as cardLayout. + fill: { + backgroundColor: null, // This is the background color of the filled progress bar portion. + }, + validationMessage: { + // This has all TextStyle properties. }, }; ``` -| Element | Style Properties | Description | +| 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. | +| `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. | N/A | -#### LayoutStyle +The default class to style all progress bars is named `com_mendix_widget_native_progressbar_ProgressBar`. -| Element | Style Properties | Description | +### 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: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/progress-circle.png" alt="progress circle" width="300" class="no-border" >}} + +```javascript +export const com_mendix_widget_native_progresscircle_ProgressCircle = { + container: { + // This has all ViewStyle properties. + }, + circle: { + size: null, // This is the radius of the progress circle. + borderWidth: null, // This is the border width of the progress circle. + borderColor: null, // This is the color of the progress circle border. + }, + fill: { + backgroundColor: null, // This is the color of the circle’s filled portion. + width: null, // This is the width of the progress circle. + lineCapRounded: null, // 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. + }, +}; +``` + +| Element | Style Properties | Description | | --- | --- | --- | -| slideItem | This has all ViewStyle properties. | Styles the view surrounding each slide, including inactive slides. | -| inactiveSlideItem | `opacity: number, scale: number` | `inactiveSlideOpacity` and `inactiveSlideScale`, will allow inactive slides smaller and faded. | -| indicator | `color: string` | Styles the loading indicator which will be shown while the carousel is loading. | -| pagination | Pagination | Styles pagination container, dots, active dots, and text. | +| `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. | N/A | +| `validationMessage` | This has all TextStyle properties. | N/A | -#### Pagination +The default class to style all progress circles is named `com_mendix_widget_native_progresscircle_ProgressCircle`. -| Element | Style Properties | Description | -| ---|--- | --- | -| container | This has all ViewStyle properties. | Styles the main view around pagination, regardless of text or dot. | -| dotStyle | All ViewStyle properties + `color: string` | Styles all the pagination dots. | -| inactiveDotStyle| All ViewStyle properties + `opacity: number; scale: number; color: string` | Additional styles for inactive dots. Will be merged with `dotStyle`. | -| 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**. | +### QR Code {#qr-code} -The default class to style all popup menus is named `com_mendix_widget_native_carousel_Carousel`. +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: -### Signature {#signature} +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/qr-code.png" alt="qr code" width="350" class="no-border" >}} -The signature widget allows you to draw and save a signature. The signature widget looks like this: +```javascript +export const com_mendix_widget_native_qrcode_QRCode = { + container: { + // This has all ViewStyle properties. + }, + qrcode: { + size: null, // The size of the QR code. + color: null, // The color of the QR code. + borderColor: null, // The background color behind the QR code. + }, +}; +``` -{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/signature.png" alt="signature" width="350" class="no-border" >}} +| Element | Style Properties | Description | +| --- | --- | --- | +| `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. | + +The default class to style all QR codes is named `com_mendix_widget_native_qrcode_QRCode`. + +### Radio Buttons {#radio-buttons} + +The radio buttons widget allows users to select a single option from a list of choices. ```javascript -export const com_mendix_widget_native_signature_Signature = { +export const com_mendix_widget_native_radiobuttons_RadioButtons = { container: { - // This has all ViewStyle properties. - penColor: null, // This will change the color of the stroke. + // This has all ViewStyle properties. }, - buttonWrapper: { - // This has all ViewStyle properties. + containerHorizontal: { + // 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. + labelTextStyle: { + // This has all TextStyle properties. }, - buttonClearCaption: { - // This has all TextStyle properties. + radioButtonItemContainerStyle: { + // This has all ViewStyle properties. }, - buttonSaveContainer: { + radioButtonItemContainerDisabledStyle: { // 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: { + 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. }, }; @@ -1855,341 +2239,211 @@ export const com_mendix_widget_native_signature_Signature = { | 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. | +| `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`. -The default class to style all text boxes is named `com_mendix_widget_native_signature_Signature`. +### Range Slider {#range-slider} -### Line Chart +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: -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. +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/range-slider.png" alt="range slider" width="300" class="no-border" >}} ```javascript -export const com_mendix_widget_native_linechart_LineChart = { +export const com_mendix_widget_native_rangeslider_RangeSlider = { container: { - // This has all ViewStyle properties. + // This has all ViewStyle properties. }, - errorMessage: { - // This has all TextStyle properties. + track: { + // This has all ViewStyle properties. }, - chart: { - // This has all ViewStyle properties. + trackDisabled: { + // 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. + highlight: { + // This has all ViewStyle properties. }, - 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"). - }, + highlightDisabled: { + // This has all ViewStyle properties. }, - yAxis: { - // All `xAxis` element styles. + marker: { + // This has all ViewStyle properties. }, - legend: { - container: { - // All ViewStyle properties. - }, - item: { - // All ViewStyle properties. - }, - indicator: { - // All ViewStyle properties. - }, - label: { - // All ViewStyle properties. - } + markerActive: { + // This has all ViewStyle properties. + }, + markerDisabled: { + // This has all ViewStyle properties. + }, + validationMessage: { + // This has all TextStyle 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"). | +| Element | Style Properties | Description | +| ---| --- | --- | +| `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 line chart widgets is named `com_mendix_widget_native_linechart_LineChart`. +The default class to style all range slider inputs is named `com_mendix_widget_native_rangeslider_RangeSlider`. -### Bar Chart +### Rating {#rating} -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. +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_barchart_BarChart = { +export const com_mendix_widget_native_rating_Rating = { 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. + // This has all ViewStyle properties. }, - 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. - } + containerDisabled: { + // This has all ViewStyle properties. }, - yAxis: { - // All `xAxis` element styles. + 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. }, - legend: { - container: { - // All ViewStyle properties. - }, - item: { - // All ViewStyle properties. - }, - indicator: { - // All ViewStyle properties. - }, - label: { - // All TextStyle properties. - } +}; +``` + +| Element | Style Properties | Description | +| --- | --- | --- | +| `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. | + +The default class to style all rating inputs is named `com_mendix_widget_native_rating_Rating`. + +### Repeater {#repeater} + +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. }, - 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). - }, +}; +``` + +| 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 {#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. + +The widget's style properties are as follows: + +```javascript +export const com_mendix_widget_native_safeareaview_SafeAreaView = { + container: { + // This has all ViewStyle properties. }, - 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 | +| 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"). | +| `container` | This has all ViewStyle properties. | | -The default class to style all bar chart widgets is named `com_mendix_widget_native_barchart_BarChart`. +The default class to style all safe area views is named `com_mendix_widget_native_safeareaview_SafeAreaView`. + +### Signature {#signature} -### Pie/Doughnut Chart +The signature widget allows you to draw and save a signature. The signature widget looks like this: -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. +{{< 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_piedoughnutchart_PieDoughnutChart = { +export const com_mendix_widget_native_signature_Signature = { container: { // This has all ViewStyle properties. + penColor: null, // This will change the color of the stroke. }, - 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). + 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 | +| 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). | +| `container` | This has all ViewStyle properties. | N/A | +| `container` | `penColor` | This will change the color of the stroke. | +| `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. | 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. | N/A | -The default class to style all Pie/Doughnut Chart widgets is named `com_mendix_widget_native_piedoughnutchart_PieDoughnutChart`. +The default class to style all text boxes is named `com_mendix_widget_native_signature_Signature`. + +### Slider -### Switch +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: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/slider.png" alt="slider" width="300" class="no-border" >}} + +This widget supports the same style properties as the [range slider](#range-slider) widget above. + +The default class to style all slider inputs is named `com_mendix_widget_native_slider_Slider`. + +### 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: @@ -2231,278 +2485,162 @@ 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` | `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`. - -### 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} +| `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 | 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. | N/A | -An object `{ color: string, offset: number }` that represents the color and the offset. +The default class to style all checkbox inputs is named `com_mendix_widget_native_switch_Switch`. -| 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`) | +### Toggle Buttons {#toggle-buttons} -### Column Chart +The toggle buttons widget allows you to set an enumeration attribute. This is how a toggle buttons widget could look in an app: -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. +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/toggle-buttons.png" alt="toggle buttons" width="350" class="no-border" >}} ```javascript -export const com_mendix_widget_native_columnchart_ColumnChart = { +export const com_mendix_widget_native_togglebuttons_ToggleButtons = { container: { - // All ViewStyle properties. - }, - errorMessage: { - // All TextStyle properties. + // This has all ViewStyle properties. }, - chart: { - // All ViewStyle properties. + containerDisabled: { + // 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. + button: { + // This has all ViewStyle properties. }, - 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. - } + text: { + // This has all TextStyle properties. }, - yAxis: { - // All xAxis properties + activeButton: { + // This has all ViewStyle properties. }, - legend: { - container: { - // All ViewStyle properties. - }, - item: { - // All ViewStyle properties. - }, - indicator: { - // All ViewStyle properties. - }, - label: { - // All TextStyle properties. - }, + activeButtonText: { + // This has 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). - } + validationMessage: { + // This has all TextStyle properties. }, - 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 | +| 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"). | +| `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 column chart widgets is named `com_mendix_widget_native_columnchart_ColumnChart`. +The default class to style all toggle buttons is named `com_mendix_widget_native_togglebuttons_ToggleButtons`. -### Gallery +### Video Player {#video-player} -The Gallery widget (a replacement for both template grids and list views) helps you build beautiful lists and grids for tablet and mobile devices. +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: + +{{< figure src="/attachments/refguide/mobile/native-mobile/native-styling-refguide/video-player.png" alt="video player" width="300" class="no-border" >}} ```javascript -export const com_mendix_widget_native_gallery_Gallery = { +export const com_mendix_widget_native_videoplayer_VideoPlayer = { container: { - // This has all ViewStyle properties. + // This has all ViewStyle properties. }, - emptyPlaceholder: { - // This has all ViewStyle properties. Applies a view style to the empty placeholder. + indicator: { + color: null, // The loading indicator color. }, - firstItem: { - // This has all ViewStyle properties. Applies a view style to the first item of the list. + video: { + // This has all ViewStyle properties. }, - lastItem: { - // This has all ViewStyle properties. Applies a view style to the last item of the list. + errorMessage: { + // This has all TextStyle properties. }, - list: { - // This has all ViewStyle properties. Applies a view style to the list container. + fullScreenVideoPlayer: { + // This has all ViewStyle properties. Android only. }, - listitem: { - // This has all ViewStyle properties. Applies a view style to each item container in the list. + controlBtnContainerStyle: { + // This has all ViewStyle properties. Android only. }, - loadMoreButtonContainer: { - // This has all ViewStyle properties. Applies a view style to the load more button container. + fullScreenVideoStyle: { + // This has all ViewStyle properties. Android only. }, - 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) + fullScreenActivityIndicatorStyle: { + // This has all ViewStyle properties. Android only. }, }; ``` -| Element | Style Properties | Description | +The widget’s style properties are as follows: + +| 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. | +| `container` | This has all ViewStyle properties. | N/A | +| `indicator` | `color` | The loading indicator color. | +| `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 | +| `fullScreenActivityIndicatorStyle` | This has all ViewStyle properties. | Android only | -The default class to style all Gallery widgets is named `com_mendix_widget_native_gallery_Gallery`. +The default class to style all video players is named `com_mendix_widget_native_videoplayer_VideoPlayer`. -#### Gallery Filtering +### Web View {#web-view} -In order to enable filtering within the gallery items you need to select the desired attributes to be filtered in the **Filtering** tab. +The web view widget allows you to embed static or dynamic websites in your app. The widget's style properties are as follows: ```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. +export const com_mendix_widget_native_webview_WebView = { + container: { + // This has all ViewStyle properties. }, - textInput: { - // This has all ViewStyle properties. Applies a view style to the text input. + errorContainer: { + // This has all ViewStyle properties. }, - textInputClearIcon: { - // This has all ViewStyle properties. Applies style to the text clear button in the text box. + errorText: { + // This has all TextSTyle properties. }, }; ``` -| Element | Style Properties | Description | +| 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. | +| `container` | This has all ViewStyle properties. | | +| `errorContainer` | This has all ViewStyle properties. | | +| `errorText` | This has all TextStyle properties. | | -The default class to style all gallery text filter widgets is named `com_mendix_widget_native_gallerytextfilter_GalleryTextFilter`. +The default class to style all web views is named `com_mendix_widget_native_webview_WebView`. + +#### LayoutStyle + +| Element | Style Properties | Description | +| --- | --- | --- | +| slideItem | This has all ViewStyle properties. | Styles the view surrounding each slide, including inactive slides. | +| inactiveSlideItem | `opacity: number, scale: number` | `inactiveSlideOpacity` and `inactiveSlideScale`, will allow inactive slides smaller and faded. | +| indicator | `color: string` | Styles the loading indicator which will be shown while the carousel is loading. | +| pagination | Pagination | Styles pagination container, dots, active dots, and text. | + +#### Pagination + +| Element | Style Properties | Description | +| ---|--- | --- | +| container | This has all ViewStyle properties. | Styles the main view around pagination, regardless of text or dot. | +| dotStyle | All ViewStyle properties + `color: string` | Styles all the pagination dots. | +| inactiveDotStyle| All ViewStyle properties + `opacity: number; scale: number; color: string` | Additional styles for inactive dots. Will be merged with `dotStyle`. | +| 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**. | + +The default class to style all popup menus is named `com_mendix_widget_native_carousel_Carousel`. ## Read More