Overview

AntdSegmented is an input widget that allows for selection of one value from a list of possible enum, or association, values with highlighting and animations.

Documentation

## AntdSegmented

AntdSegmented is an input that allows for selection of one value from a list of possible enum, or association values with highlighting and animations.


## Features

1. Supports enum attribute.

2. Supports association.

3. Supports block display.

4. Supports all or some disabled options.

5. Supports custom content.

6. Supports on change actions.

7. Supports 3 size options.

## Usage

### 1. Add this widget to the Mendix Project

1. Download the mpk file from [here](https://github.com/jonathan-schmitt-mx/mendix-antd-segmented/releases).

2. Copy the mpk file to your Mendix Project directory `{YourMendixProjectFolder}/widgets/`.

3. Open your Mendix Project with Mendix Studio Pro and click on the menu `Menu > App > Synchronize App Directory`.

### 2. Set properties

#### Enumeration

* Select Type "Enumeration".

* Select Enumeration attribute.


#### Association

* Select Type "List".

* Select Datasource of available options.

* Select Display Options

- Attribute

* Select Option Type "attribute"

* Select attribute to display


- Custom Content

* Select Option Type "custom"

* Enter widgets into custom content dataview


* Select association between available options and context

* Optionally enter disabled expression (if this expression resolves to true, the option will be disabled)

### 3. Run 🙂

## Demo project

1. You can access the online demo from [here](https://demo-antdwidgets100.apps.ap-2a.mendixcloud.com) to show the features of this widget.

2. You can also download the demo project from [here](https://github.com/zjh1943/mendx-antd-widgets-show) to run it on your own PC.

## Issues, suggestions and feature requests

Submit [here](https://github.com/jonathan-schmitt-mx/mendix-antd-segmented/issues).

## Property Details

See Usage Section

### Comparison with Antd Segmented features

| Property | Description | Supported | Remarks |

| --- | --- | --- | --- |

| block | Option to fit width to its parent\'s width | Y | |

| defaultValue | Default selected value | N | Implicit by Mendix attribute value |

| disabled | Disable all segments | Y | Only supported for Type: List |

| onChange | The callback function that is triggered when the state changes | Y | |

| options | Set children optional | Y | Supports list of mendix objects or enumeration values |

| size | The size of the Segmented. | Y | Updated naming of `middle` to `medium` |

| value | Currently selected value | Y | Mendix attribute value |

## Development and contribution

1. Install NPM package dependencies by using: `npm install`. If you use NPM v7.x.x, which can be checked by executing `npm -v`, execute: `npm install --legacy-peer-deps`.

1. Run `npm start` to watch for code changes. On every change:

- the widget will be bundled;

- the bundle will be included in a `dist` folder in the root directory of the project;

- the bundle will be included in the `deployment` and `widgets` folder of the Mendix test project.