Segmented
The Segmented component is a horizontal control made of multiple segments, each segment functioning as a button.
Usage
Inputs with type="radio" and mbsc-segmented attributes will be transformed into a segmented control.
The segments are grouped by a container with the mbsc-segmented-group attribute.
In single selection mode the functionality is similar to the radio buttons, where selecting one will deselect all others.
<div mbsc-segmented-group>
<label>
<input type="radio" mbsc-segmented data-icon="plus" name="group1" checked>
</label>
<label>
<input type="radio" mbsc-segmented data-icon="minus" name="group1">
</label>
<label>
<input type="radio" mbsc-segmented data-icon="key2" name="group1">
</label>
</div>
<div mbsc-segmented-group>
<label>
Option 1
<input type="radio" mbsc-segmented name="group2">
</label>
<label>
Option 2
<input type="radio" mbsc-segmented name="group2" checked>
</label>
<label>
Option 3
<input type="radio" mbsc-segmented name="group2">
</label>
<label>
Option 4
<input type="radio" mbsc-segmented name="group2">
</label>
</div>
Value binding
Set the initially selected segment with the native checked attribute. To change the selection later, get the segment's instance with getInst and set its checked property to true. The other segments in the group are deselected automatically. Read the same property to get the segment's current state.
<div mbsc-segmented-group>
<label>
Show as busy
<input id="event-status-busy" mbsc-segmented type="radio" name="event-status" value="busy" checked>
</label>
<label>
Show as free
<input id="event-status-free" mbsc-segmented type="radio" name="event-status" value="free">
</label>
</div>
const freeSegment = mobiscroll.getInst(document.getElementById('event-status-free'));
// Select "Show as free"
freeSegment.checked = true;
// Read the current state
console.log(freeSegment.checked); // true
Setting checked doesn't trigger a change event. To react when the user changes the selection, listen to the change event of the inputs:
document.querySelectorAll('input[name="event-status"]').forEach(function (input) {
input.addEventListener('change', function (ev) {
console.log('Selected value:', ev.target.value);
});
});
Always update the selection through the instance. Changing the checked property of the underlying input directly isn't reliably reflected in the component.
Color presets
Mobiscroll includes several predefined color presets, each serving its own semantic purpose.
<div mbsc-segmented-group data-color="danger">
<label>
Desktop
<input type="radio" mbsc-segmented data-icon="home" name="group-danger">
</label>
<label>
Mobile
<input type="radio" mbsc-segmented data-icon="mobile" name="group-danger" checked>
</label>
<label>
Cloud
<input type="radio" mbsc-segmented data-icon="cloud-upload" name="group-danger">
</label>
</div>
<div mbsc-segmented-group data-color="warning">
<label>
Desktop
<input type="radio" mbsc-segmented data-icon="home" name="group-warning">
</label>
<label>
Mobile
<input type="radio" mbsc-segmented data-icon="mobile" name="group-warning" checked>
</label>
<label>
Cloud
<input type="radio" mbsc-segmented data-icon="cloud-upload" name="group-warning">
</label>
</div>
<div mbsc-segmented-group data-color="info">
<label>
Desktop
<input type="radio" mbsc-segmented data-icon="home" name="group-info">
</label>
<label>
Mobile
<input type="radio" mbsc-segmented data-icon="mobile" name="group-info" checked>
</label>
<label>
Cloud
<input type="radio" mbsc-segmented data-icon="cloud-upload" name="group-info">
</label>
</div>
Auto vs. manual initialization
If the component is added later to the DOM, e.g. with an AJAX page load, a custom function named enhance needs to be called in order to initialize the dynamically added component. When the enhance function is called on a DOM element, all form elements will be initialized inside this element.
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
var page = document.getElementById('page');
page.innerHTML = xhr.responseText;
mobiscroll.enhance(page);
}
}
xhr.open('GET', '/myform', true);
xhr.send();
Options
Explore the following API options that help you easily configure the Segmented component.
ariaLabel
string
Specifies the accessible name of the segmented button. Recommended for icon-only buttons.
Default value: undefined
color
"success" | "light" | "dark" | "primary" | "secondary" | "danger" | "warning" | "info"
Specifies the predefined color of the segmented button.
Default value: undefined
cssClass
string
Specifies a custom CSS class for the component.
Default value: undefined
description
string
Specifies the description text of the segmented button.
Default value: undefined
disabled
boolean
Specifies the disabled state of the segmented button.
Default value: false
endIcon
any
Specifies the icon which will be displayed at the end of the segmented button. Use the startIcon option for specifying an icon at the start.
Default value: undefined
icon
any
Specifies the icon for an icon-only segmented button.
Default value: undefined
id
string
Specifies the id of the segmented button.
Default value: undefined
label
string
Specifies the label of the segmented button.
Default value: undefined
name
string
Specifies the name of the segmented button.
Default value: undefined
startIcon
any
Specifies the icon which will be displayed at the start of the segmented button. Use the endIcon option for specifying an icon at the end.
Default value: undefined
theme
string
Specifies the visual appearance of the component.
If it is 'auto' or undefined, the theme will automatically be chosen based on the platform.
If custom themes are also present, they will take precedence over the built in themes, e.g. if there's an iOS based custom theme,
it will be chosen on the iOS platform instead of the default iOS theme.
Supplied themes:
'ios'- iOS theme'material'- Material theme'windows'- Windows theme
It's possible to modify theme colors or create custom themes.
Make sure that the theme you set is included in the downloaded package.
Default value: undefined
themeVariant
"auto" | "light" | "dark"
Controls which variant of the theme will be used (light or dark).
Possible values:
'light'- Use the light variant of the theme.'dark'- Use the dark variant of the theme.'auto'orundefined- Detect the preferred system theme on devices where this is supported.
To use the option with custom themes, make sure to create two custom themes, where the dark version has the same name as the light one,
suffixed with '-dark', e.g.: 'my-theme' and 'my-theme-dark'.
Default value: undefined
Events
The Segmented component ships with different event hooks for deep customization. Events are triggered through the lifecycle of the component where you can tie in custom functionality and code.
onDestroy
(args: any, inst: any) => void
Triggered when the component is destroyed.
Parameters:
-
args - The event argument object.
-
inst - The component instance.
onInit
(args: any, inst: any) => void
Triggered when the component is initialized.
Parameters:
-
args - The event argument object.
-
inst - The component instance.
Localization
The Segmented component is fully localized. This covers date and time format, button copy, rtl and more.
locale
Sets the language of the component. The locale object contains all the translations for a given language. The built in language modules are listed below. If a language is not listed, it can be provided as a custom language module.
Supported values:
- Arabic:
localeAr,'ar' - Bulgarian:
localeBg,'bg' - Catalan:
localeCa,'ca' - Czech:
localeCs,'cs' - Chinese:
localeZh,'zh' - Croatian:
localeHr,'hr' - Danish:
localeDa,'da' - Dutch:
localeNl,'nl' - English:
localeEnorundefined,'en' - English (UK):
localeEnGB,'en-GB' - Farsi:
localeFa,'fa' - German:
localeDe,'de' - Greek:
localeEl,'el' - Spanish:
localeEs,'es' - Finnish:
localeFi,'fi' - French:
localeFr,'fr' - Hebrew:
localeHe,'he' - Hindi:
localeHi,'hi' - Hungarian:
localeHu,'hu' - Italian:
localeIt,'it' - Japanese:
localeJa,'ja' - Korean:
localeKo,'ko' - Lithuanian:
localeLt,'lt' - Norwegian:
localeNo,'no' - Polish:
localePl,'pl' - Portuguese (Brazilian):
localePtBR,'pt-BR' - Portuguese (European):
localePtPT,'pt-PT' - Romanian:
localeRo,'ro' - Russian:
localeRu,'ru' - Russian (UA):
localeRuUA,'ru-UA' - Slovak:
localeSk,'sk' - Serbian:
localeSr,'sr' - Swedish:
localeSv,'sv' - Thai:
localeTh,'th' - Turkish:
localeTr,'tr' - Ukrainian:
localeUa,'ua'
Default value: undefined
rtl
boolean
Enables right-to-left display.
Default value: false
