Forms
About
The form component adds styling to standard html form elements (textboxes, textareas, selects, checkboxes, radio buttons, submit buttons) giving them a native like look and feel on various platforms.
<mobiscroll.Form />
The mobiscroll.Form by default renders a form element. If the first child of the mobiscroll.Form is a form component, then it will use that, and won't render an additional form.
Above the Forms options, it supports the following props:
<mobiscroll.Form theme="mobiscroll-dark" action="/login" method='POST'>
<p>This is a Login demo with Mobiscroll Form</p>
<mobiscroll.Input type="email" value={this.state.email} onChange={this.emailChanged}>
Email
</mobiscroll.Input>
<mobiscroll.Input type="password" value={this.state.password} onChange={this.passwordChanged}>
Password
</mobiscroll.Input>
<button type="button" onClick={this.submit}>Sign In</button>
</mobiscroll.Form>
Options
Name | Type | Default value | Description |
---|---|---|---|
context | String or HTMLElement | 'body' |
Context in which mobiscroll is appended and positioned (if not inline). Can be a selector string or a DOM element. |
inputStyle | String | 'underline' |
Defines the input rendering mode. By default the input has the underline styling. Possible values:
|
labelStyle | String | undefined |
Defines the position of the label. The default label style depends on the theme option.
With the 'ios' theme the inputs have inline labels, with 'mobiscroll', 'material' and 'windows' themes
the default label position is stacked . Possible values:
|
theme | String | undefined |
Sets the visual appearance of the component. If it is 'auto' or undefined , the theme will automatically be chosen based on the platform.
If the theme for the specific platform is not present, it will revert to the Mobiscroll theme.Supplied themes:
.mbsc-my-theme .dwwr { /* My CSS */ } , and set the theme option to 'my-theme'
Make sure that the theme you set is included in the downloaded package.
|
Events
Name | Description | |
---|---|---|
onInit(event, inst) |
Triggered when the component is initialized.
Parameters
Example
|
Methods
Name | Description | |
---|---|---|
getInst() | Returns the object instance.
Returns: Object
ExampleMethods can be called on an instance. For more details see calling methods
|
|
option(options) | Sets one or more options for the component.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
|
refresh() | Initialize dynamically added form elements.
ExampleMethods can be called on an instance. For more details see calling methods
|
|
tap(el, handler) |
Attaches the handler function to the tap event of element el .
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
Localization
Name | Type | Default value | Description |
---|---|---|---|
lang | String | 'en-US' |
Language of the component. Based on the language string the component loads the language based default settings from the language modules.
Supported languages:
|
offText | String | 'Off' |
Text of the switch button when it's turned off, only for Android Holo switch. |
onText | String | 'On' |
Text of the switch button when it's turned on, only for Android Holo switch. |
rtl | Boolean | false |
Right to left display. |
Validation
The Mobiscroll Forms component does not have built in validation mechanism, but provides error state stylings.
Use the valid
and errorMessage
props, to marke a field invalid and shown the error message wanted.
<mobiscroll.Input valid={false} errorMessage="Invalid input">
Username
</mobiscroll.Input>
Examples of how to implement simple validation logic on form fields can be found here
Sample validation using the formsy-react
package.
The formsy-react
third party package is a form input builder and validator for React.
The following is an example of how to use the mobiscroll react components with formsy:
formsy-react
package in your app.Check out formsy-react on npm
Or formsy-react on github
1. Step: Building a formsy element
First we need to import the withFormsy
higher order component from the formsy-react
package.
Then we need Mobiscroll Form Components. In this example we will use a Mobiscroll Input, but the othere form components (dropdown, textarea) work the same way.
import { withFormsy } from 'formsy-react';
import mobiscroll from './lib/mobiscroll.react';
We need a way to pass the formsy validation error and error state to the mobiscroll input. We are going to create a component for that:
/myinput.jsx
class MidInput extends React.Component {
constructor(props) {
super(props);
this.changeValue = this.changeValue.bind(this);
}
changeValue(event) {
// setValue() will set the value of the component, which in
// turn will validate it and the rest of the form
// Important: Don't skip this step. This pattern is required
// for Formsy to work.
this.props.setValue(event.currentTarget.value);
}
render() {
// An error message is returned only if the component is invalid
const errorMessage = this.props.getErrorMessage();
return (
<mobiscroll.Input onChange={this.changeValue} value={this.props.getValue() || ''} errorMessage={errorMessage} valid={!errorMessage} type={this.props.type}>
{this.props.children}
</mobiscroll.Input>
);
}
}
export default withFormsy(MidInput);
2. Step: Using the input
We can now use the component the withFormsy
higher order component returned. Let's import it and make a form:
/App.jsx
import MyInput from './myinput';
import mobiscroll from './lib/mobiscroll.react';
class App extends Component {
render() {
return (
<Formsy onValidSubmit={this.submit} onValid={this.onValid} onInvalid={this.onInvalid}>
<mobiscroll.Form renderForm={false}>
<MyInput
name="email"
validations="isEmail"
validationError="This is not a valid email"
required>My Formsy Email</MyInput>
<MyInput
name="password"
type="password"
validations="minLength:6"
validationError="Invalid"
validationErrors={{
minLength: 'Has to be min 6 chars'
}}
required>My Formsy Password</MyInput>
</mobiscroll.Form>
</Formsy>
);
}
}
export default App;
Textfields
<mobiscroll.Input />
Textfields
<mobiscroll.Input value={myValue} onChange={myChange}>
Username
</mobiscroll.Input>
<mobiscroll.Input value={myValue} onChange={myChange} />
Icons
<mobiscroll.Input icon="ion-ios7-email" type="email" value={myValue} onChange={myChange}>
Email
</mobiscroll.Input>
<mobiscroll.Input icon="ion-ios7-email" iconAlign="right" value={myValue} onChange={myChange}>
Email
</mobiscroll.Input>
Input style
This attribute can be used for customizing your form input rendering.
<mobiscroll.Input inputStyle="underline" value={myValue} onChange={myChange}>
Username
</mobiscroll.Input>
<mobiscroll.Input inputStyle="box" value={myValue} onChange={myChange}>
Username
</mobiscroll.Input>
<mobiscroll.Input inputStyle="outline" value={myValue} onChange={myChange}>
Username
</mobiscroll.Input>
Label style
With this attribute you can define the position of the label.
<mobiscroll.Input labelStyle="stacked" value={myValue} onChange={myChange}>
Username
</mobiscroll.Input>
<mobiscroll.Input labelStyle="inline" value={myValue} onChange={myChange}>
Username
</mobiscroll.Input>
<mobiscroll.Input labelStyle="floating" value={myValue} onChange={myChange}>
Username
</mobiscroll.Input>
Password
The password toggle can be used to hide or show the entered password using icons
<mobiscroll.Input type="password" placeholder="Password" value={myValue} onChange={myChange}>
Password
</mobiscroll.Input>
<mobiscroll.Input type="password" passwordToggle={true} iconShow="eye" iconHide="eye-blocked" value={myValue} onChange={myChange}>
Password
</mobiscroll.Input>
<mobiscroll.Input type="password" passwordToggle={true} iconShow="my-show-icon" iconHide="my-hide-icon" value={myValue} onChange={myChange}>
Password
</mobiscroll.Input>
Prop | Type | Description |
---|---|---|
disabled | PropTypes.bool | Disables the textfield when true. |
errorMessage | PropTypes.string | Shown error message when the field is invalid. |
icon | PropTypes.string |
Specify icon for the field. A font-icon name should be passed.
Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names,
e.g.: icon='{ "right": "plus", "left": "minus" }' .
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
iconAlign | PropTypes.string |
Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names,
e.g.: icon='{ "right": "plus", "left": "minus" }' .
|
iconHide | PropTypes.string | Specify icon for password hide. Defaults to eye-blocked . |
iconShow | PropTypes.string | Specify icon for password show. Defaults to eye . |
inputStyle | PropTypes.string | Defines the input rendering mode. Possible values: "underline" , "box" , "outline" . |
labelStyle | PropTypes.string | Defines the position of the label. Possible values: "stacked" , "inline" , "floating" . |
name | PropTypes.string | Specify name attribute of the input. |
passwordToggle | PropTypes.bool | When true, an icon is shown that toggles the visibility of the password. |
type | PropTypes.string | Specify type attribute of the input. |
valid | PropTypes.bool | Specify the valid state of the input. When false, the input will be styled as invalid. |
Textarea
Textareas will auto-grow based on the entered content up until to 10 lines. After 10 lines scroll is enabled.
<mobiscroll.Textarea value={myValue} onChange={myChange}>
About me
</mobiscroll.Textarea>
<mobiscroll.Textarea value={myValue} onChange={myChange} />
Prop | Type | Description |
---|---|---|
disabled | PropTypes.bool | Disables the textfield when true. |
errorMessage | PropTypes.string | Shown error message when the field is invalid. |
icon | PropTypes.string |
Specify icon for the field. A font-icon name should be passed.
Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names,
e.g.: icon='{ "right": "plus", "left": "minus" }' .
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
iconAlign | PropTypes.string |
Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names,
e.g.: icon='{ "right": "plus", "left": "minus" }' .
|
name | PropTypes.string | Specify name attribute of the input. |
valid | PropTypes.bool | Specify the valid state of the input. When false, the input will be styled as invalid. |
Icons
<mobiscroll.Textarea icon="line-note" value={myValue} onChange={myChange}>
About me
</mobiscroll.Textarea>
<mobiscroll.Textarea icon="line-note" iconAlign="right" value={myValue} onChange={myChange}>
About me
</mobiscroll.Textarea>
Input style
This attribute can be used for customizing your form input rendering.
<mobiscroll.Textarea inputStyle="underline" value={myValue} onChange={myChange}">
About me
</mobiscroll.Textarea>
<mobiscroll.Textarea inputStyle="box" value={myValue} onChange={myChange}">
About me
</mobiscroll.Textarea>
<mobiscroll.Textarea inputStyle="outline" value={myValue} onChange={myChange}>
About me
</mobiscroll.Textarea>
Label style
With this attribute you can define the position of the label.
<mobiscroll.Textarea labelStyle="stacked" value={myValue} onChange={myChange}>
About me
</mobiscroll.Textarea>
<mobiscroll.Textarea labelStyle="inline" value={myValue} onChange={myChange}>
About me
</mobiscroll.Textarea>
<mobiscroll.Textarea labelStyle="floating" value={myValue} onChange={myChange}>
About me
</mobiscroll.Textarea>
<mobiscroll.Dropdown />
<mobiscroll.Dropdown label="My select" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
<mobiscroll.Dropdown value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
Prop | Type | Description |
---|---|---|
disabled | PropTypes.bool | Disables the textfield when true. |
errorMessage | PropTypes.string | Shown error message when the field is invalid. |
icon | PropTypes.string |
Specify icon for the field. A font-icon name should be passed.
Icon alignment can be controlled with the iconAlign attribute. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names,
e.g.: icon='{ "right": "plus", "left": "minus" }' .
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
iconAlign | PropTypes.string |
Controls icon alignment. Icons can be displayed on both sides by passing a JSON string with left and right properties containing icon names,
e.g.: icon='{ "right": "plus", "left": "minus" }' .
|
inputStyle | PropTypes.string | Defines the input rendering mode. Possible values: "underline" , "box" , "outline" . |
labelStyle | PropTypes.string | Defines the position of the label. Possible values: "stacked" , "inline" , "floating" . |
label | PropTypes.string | Shows a label for the dropdown. |
name | PropTypes.string | Specify name attribute of the input. |
valid | PropTypes.bool | Specify the valid state of the input. When false, the input will be styled as invalid. |
Icons
<mobiscroll.Dropdown icon="line-note" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
<mobiscroll.Dropdown icon="line-note" iconAlign="right" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
Input style
This attribute can be used for customizing your form input rendering.
<mobiscroll.Dropdown inputStyle="underline" label="My select" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
<mobiscroll.Dropdown inputStyle="box" label="My select" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
<mobiscroll.Dropdown inputStyle="outline" label="My select" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
Label style
With this attribute you can define the position of the label.
<mobiscroll.Dropdown labelStyle="stacked" label="My select" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
<mobiscroll.Dropdown labelStyle="inline" label="My select" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
<mobiscroll.Dropdown labelStyle="floating" label="My select" value={myValue} onChange={myChange}>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</mobiscroll.Dropdown>
<mobiscroll.Checkbox />
<mobiscroll.Checkbox checked={myValue} onChange={myChange}>
My Label
</mobiscroll.Checkbox>
<mobiscroll.Checkbox color="primary" checked={myValue} onChange={myChange}>
My Label
</mobiscroll.Checkbox>
<mobiscroll.Checkbox color="secondary" checked={myValue} onChange={myChange}>
My Label
</mobiscroll.Checkbox>
<mobiscroll.Checkbox color="success" checked={myValue} onChange={myChange}>
My Label
</mobiscroll.Checkbox>
<mobiscroll.Checkbox color="warning" checked={myValue} onChange={myChange}>
My Label
</mobiscroll.Checkbox>
<mobiscroll.Checkbox color="danger" checked={myValue} onChange={myChange}>
My Label
</mobiscroll.Checkbox>
<mobiscroll.Checkbox color="info" checked={myValue} onChange={myChange}>
My Label
</mobiscroll.Checkbox>
Switch
Switches are bascially also checkboxes, but with a different style.
<mobiscroll.Switch />
The <mobiscroll.Switch />
renders a checkox input wrapped inside a label element.
In addition to the Switch attributes, it supports the following props:
<mobiscroll.Switch value={this.state.lights} onChange={this.lightsChanged}>
Lights
</mobiscroll.Switch>
Attributes
Methods
Name | Description | |
---|---|---|
getVal() | Returns the state of the switch (true/false).
Returns: Boolean
ExampleMethods can be called on an instance. For more details see calling methods
|
|
setVal(value) |
Sets the state of the switch (true/false).
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
<mobiscroll.Radio />
<mobiscroll.Radio name="group1" value="val1" checked={this.state.myRadio === 'val1'} onChange={this.myRadioChanged}>
Value 1
</mobiscroll.Radio>
<mobiscroll.Radio name="group1" value="val2" checked={this.state.myRadio === 'val2'} onChange={this.myRadioChanged}>
Value 2
</mobiscroll.Radio>
<mobiscroll.Radio name="group1" value="val3" checked={this.state.myRadio === 'val3'} onChange={this.myRadioChanged}>
Value 3
</mobiscroll.Radio>
<mobiscroll.Radio color="primary" name="group1" value="val1" checked={this.state.myRadio === 'val1'} onChange={this.myRadioChanged}>
Value 1
</mobiscroll.Radio>
<mobiscroll.Radio color="secondary" name="group1" value="val2" checked={this.state.myRadio === 'val2'} onChange={this.myRadioChanged}>
Value 2
</mobiscroll.Radio>
<mobiscroll.Radio color="success" name="group1" value="val3" checked={this.state.myRadio === 'val3'} onChange={this.myRadioChanged}>
Value 3
</mobiscroll.Radio>
<mobiscroll.Radio color="warning" name="group2" value="val1" checked={this.state.myRadio === 'val1'} onChange={this.myRadioChanged}>
Value 1
</mobiscroll.Radio>
<mobiscroll.Radio color="danger" name="group2" value="val2" checked={this.state.myRadio === 'val2'} onChange={this.myRadioChanged}>
Value 2
</mobiscroll.Radio>
<mobiscroll.Radio color="info" name="group2" value="val3" checked={this.state.myRadio === 'val3'} onChange={this.myRadioChanged}>
Value 3
</mobiscroll.Radio>
Buttons
The buttons come in several shapes, sizes and colors. Use the click events for attaching myClicks to it and see the examples below for the various renderings.
<mobiscroll.Button />
<!-- Simple button -->
<mobiscroll.Button onClick={myClick}>My Button</mobiscroll.Button>
<!-- With icon -->
<mobiscroll.Button icon="pencil" onClick={myClick}>My Button</mobiscroll.Button>
<!-- Just icon -->
<mobiscroll.Button icon="plus" onClick={myClick} />
<!-- Flat button -->
<mobiscroll.Button flat={true} onClick={myClick}>My Button</mobiscroll.Button>
<!-- Outline button -->
<mobiscroll.Button outline={true} onClick={myClick}>My Button</mobiscroll.Button>
<!-- Full width button -->
<mobiscroll.Button block={true} onClick={myClick}>My Button</mobiscroll.Button>
<!-- Button group -->
<div className="mbsc-btn-group">
<mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
<!-- Buttons are streched to fill the full width of the container.-->
<div className="mbsc-btn-group-justified">
<mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
<!-- Each button fills the whole width of the container. -->
<div className="mbsc-btn-group-block">
<mobiscroll.Button onClick={myClick}>Button 1</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 2</mobiscroll.Button>
<mobiscroll.Button onClick={myClick}>Button 3</mobiscroll.Button>
</div>
<mobiscroll.Button color="primary" onClick={myClick}>Button Primary</mobiscroll.Button>
<mobiscroll.Button color="secondary" onClick={myClick}>Button Secondary</mobiscroll.Button>
<mobiscroll.Button color="success" onClick={myClick}>Button Success</mobiscroll.Button>
<mobiscroll.Button color="warning" onClick={myClick}>Button Warning</mobiscroll.Button>
<mobiscroll.Button color="danger" onClick={myClick}>Button Danger</mobiscroll.Button>
<mobiscroll.Button color="info" onClick={myClick}>Button Info</mobiscroll.Button>
Prop | Type | Description |
---|---|---|
block | PropTypes.bool | When true renders the button to take the full width of the container. |
color | PropTypes.string | Specify the color preset of the button. Can be one of "primary", "secondary", "success", "danger", "warning" and "info". |
disabled | PropTypes.bool | Disables the button when true. |
flat | PropTypes.bool | When true renders the button with flat styling. |
icon | PropTypes.string |
Specify icon for the button. A font-icon name should be passed.
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
name | PropTypes.string | Specify name attribute for the button. |
outline | PropTypes.bool | When true renders the button with outline styling. |
type | PropTypes.string | Specify type attribute for the button. |
Slider
The slider control can be used to select one or more numeric value.
Inputs with type="range"
will be transformed into slider controls.
If multiple range inputs are wrapped in the same container, multiple handles will be displayed on the slider track.
<mobiscroll.Slider />
The <mobiscroll.Slider />
renders single or multiple range inputs wrapped inside a label element, based on the value prop.
In addition to the Slider attributes, it supports the following props:
<mobiscroll.Slider value={10} max={20} min={5} data-tooltip="true" data-icon="link">
My Single Slider
</mobiscroll.Slider>
<mobiscroll.Slider value={[this.state.firtValue, 50, 60]} data-icon="copy3" data-live={true} step={5} onChange={this.sliderChange} data-tooltip="true" data-step-labels="[0, 10, 20, 30, 40, 50]">
My Multi-Handle Slider
</mobiscroll.Slider>
Attributes
Name | Description |
---|---|
data-highlight | If an input has the data-highlight="false" attribute, only the handles are highlighted and the progress bar is not. |
data-icon | Specify icons for a button, textbox, textarea, stepper, segmented control, slider, progress or select.
A font-icon name should be passed.
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
data-live | If an input has the data-live="true" attribute, the value will be updated while the slider handle is moved. If data-live="false" , the value will be updated when the handle is released. |
data-step-labels | Values to display under the slider track. Should be passed as an array, e.g. data-step-labels="[0, 25, 50, 75, 100]" . |
data-target | Specify a target element, where the slider value will be displayed. The string should be a CSS selector, e.g. #slider_value |
data-template | Template for the slider value. '{value}' stands for the slider current value, and '{max}' stands for the slider maximum value. Any other character in the template will be handled as literal string. |
data-tooltip | If true, a tooltip with the current value will be displayed above the slider handle while moving. |
data-val |
Specify the value position. It can be "left" or "right" , it defaults to "left" if not specified.
|
disabled | If an element has the disabled attribute, the element will be disabled. |
max | Specify the maximum value that can be selected. |
min | Specify the minimum value that can be selected. |
step | Specify the step between values. |
value | Specify the initial value of the slider. |
Methods
Name | Description | |
---|---|---|
getVal() | Returns the slider value.
Returns: Number
ExampleMethods can be called on an instance. For more details see calling methods
|
|
setVal(value) |
Sets the slider value.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
Progress
The progress control can be used to display the completion progress of a task
<mobiscroll.Progress />
The <mobiscroll.Progress />
renders a progress element wrapped inside a label element.
In addition to the Progress attributes, it supports the following props:
Prop | Type | Description |
---|---|---|
value | number | Sets the progress value. |
<mobiscroll.Progress value={this.state.loadingProgress} max={100} data-icon="home" data-val="left">
Loading
</mobiscroll.Progress>
Attributes
Name | Description |
---|---|
data-enhance | If a form element has the data-enhance="false" attribute, the particular element won't be enhanced. |
data-icon | Specify icons for a button, textbox, textarea, stepper, segmented control, slider, progress or select.
A font-icon name should be passed.
left and right properties containing icon names,
e.g.: data-icon='{ "right": "plus", "left": "minus" }' .
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
data-icon-align | Specify icon alignment. It can be "left" or "right" , it defaults to "left" if not specified.
|
data-val |
Specify the value position. It can be "left" or "right" , it defaults to "left" if not specified.
|
disabled | If an element has the disabled attribute, the element will be disabled. |
max | Specify the final value of the progress. |
value | Specify the initial value of the progress. |
Methods
Name | Description | |
---|---|---|
getVal() | Returns the progress value.
Returns: Number
ExampleMethods can be called on an instance. For more details see calling methods
|
|
setVal(value) |
Sets the progress value.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
Segmented control
The segmented control is a horizontal control made of multiple segments, each segment functioning as a discrete button.
Inputs with type="radio"
and data-role="segmented"
will be transformed into a segmented control.
Just like radio buttons, the segments are grouped by the name
attribute of the input.
<mobiscroll.Segmented />
<mobiscroll.Segmented name="group1" value="val1" checked={this.state.myValue === 'val1'} onChange={this.myValueChanged}>
Value 1
</mobiscroll.Segmented>
<mobiscroll.Segmented name="group1" value="val2" checked={this.state.myValue === 'val2'} onChange={this.myValueChanged}>
Value 2
</mobiscroll.Segmented>
<mobiscroll.Segmented name="group1" value="val3" checked={this.state.myValue === 'val3'} onChange={this.myValueChanged}>
Value 3
</mobiscroll.Segmented>
<mobiscroll.Segmented color="primary" name="group1" value="val1" checked={this.state.myValue === 'val1'} onChange={this.myValueChanged}>
Value 1
</mobiscroll.Segmented>
<mobiscroll.Segmented color="secondary" name="group1" value="val2" checked={this.state.myValue === 'val2'} onChange={this.myValueChanged}>
Value 2
</mobiscroll.Segmented>
<mobiscroll.Segmented color="success" name="group1" value="val3" checked={this.state.myValue === 'val3'} onChange={this.myValueChanged}>
Value 3
</mobiscroll.Segmented>
<mobiscroll.Segmented color="warning" name="group2" value="val1" checked={this.state.myValue === 'val1'} onChange={this.myValueChanged}>
Value 1
</mobiscroll.Segmented>
<mobiscroll.Segmented color="danger" name="group2" value="val2" checked={this.state.myValue === 'val2'} onChange={this.myValueChanged}>
Value 2
</mobiscroll.Segmented>
<mobiscroll.Segmented color="info" name="group2" value="val3" checked={this.state.myValue === 'val3'} onChange={this.myValueChanged}>
Value 3
</mobiscroll.Segmented>
Prop | Type | Description |
---|---|---|
checked | PropTypes.bool | Sets the segmented control checked state. |
color | PropTypes.string | Specify the color preset of the segmented control. Can be one of "primary", "secondary", "success", "danger", "warning" and "info". |
disabled | PropTypes.bool | Disables the segmented control when true. |
icon | PropTypes.string |
Specify icon for the segmented control. A font-icon name should be passed.
You can build your custom icon set on our download page ("Choose Icon Set" section). See the full list of available icons here. The default icon pack contains the following icons: You can use the icons anywhere in your app using thembsc-ic mbsc-ic-{iconName} classes, e.g.:
|
name | PropTypes.string | Specify name attribute for the segmented control. The segmented buttons are grouped by their name prop |
Stepper
The stepper control lets the user adjust a value by increasing and decreasing it in small steps. Steppers are used in situations where a user needs to adjust a value by a small amount.
<mobiscroll.Stepper />
The <mobiscroll.Stepper />
renders a text input wrapped inside a label element.
In addition to the Stepper attributes, it supports the following props:
<mobiscroll.Stepper value={this.state.adults} onChange={this.adultsChanged} min={0} max={10}>
Number of adults
</mobiscroll.Stepper>
Attributes
Rating
The rating control can be used to select one numeric value.
<mobiscroll.Rating />
The <mobiscroll.Rating />
renders a rating input wrapped inside a label element.
In addition to the Rating attributes, it supports the following props:
<mobiscroll.Rating value={10} max={20} min={5} >
Simple Rating
</mobiscroll.Rating>
Attributes
Methods
Name | Description | |
---|---|---|
getVal() |
Returns the rating value.
Returns: Number
ExampleMethods can be called on an instance. For more details see calling methods
|
|
setVal(value) |
Sets the rating value.
Parameters
ExampleMethods can be called on an instance. For more details see calling methods
|
Groups
For styling the groups inside the form element you can use the mbsc-form-group
, mbsc-form-group-title
and mbsc-form-group-inset
classes.
<mobiscroll.FormGroup>
<mobiscroll.FormGroupTitle>Phone</mobiscroll.FormGroupTitle>
<mobiscroll.FormGroupContent>
<mobiscroll.Input id="email" type="email" name="Email" placeholder="Email" />
<mobiscroll.Input name="password" placeholder="Password" passwordToggle={true} icon="none" iconAlign="right" />
</mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
<mobiscroll.FormGroup inset>
<mobiscroll.FormGroupTitle>Phone</mobiscroll.FormGroupTitle>
<mobiscroll.FormGroupContent>
<mobiscroll.Input id="email" type="email" name="Email" placeholder="Email" />
<mobiscroll.Input name="password" placeholder="Password" passwordToggle={true} icon="none" iconAlign="right" />
</mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
<mobiscroll.FormGroup collapsible open>
<mobiscroll.FormGroupTitle>Phone</mobiscroll.FormGroupTitle>
<mobiscroll.FormGroupContent>
<mobiscroll.Input id="email" type="email" name="Email" placeholder="Email" />
<mobiscroll.Input name="password" placeholder="Password" passwordToggle={true} icon="none" iconAlign="right" />
</mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
Methods
Name | Description | |
---|---|---|
hide() | Hides the collapsible form group content. | |
show() | Displays the collapsible form group content. | |
toggle() | Toggles the collapsible form group content displaying. |
Notes
Provide inline feedback messages for typical user actions. The notes include several predefined colors, each serving its own semantic purpose.
<mobiscroll.Page theme="mobiscroll-dark">
<mobiscroll.Note color="primary">This is a primary note</mobiscroll.Note>
<mobiscroll.Note color="secondary">This is a secondary note</mobiscroll.Note>
<mobiscroll.Note color="success">This is a success note</mobiscroll.Note>
<mobiscroll.Note color="danger">This is a danger note</mobiscroll.Note>
<mobiscroll.Note color="warning">This is a warning note</mobiscroll.Note>
<mobiscroll.Note color="info">This is a info note</mobiscroll.Note>
<mobiscroll.Note color="light">This is a light note</mobiscroll.Note>
<mobiscroll.Note color="dark">This is a dark note</mobiscroll.Note>
</mobiscroll.Page>
Accordion
Using the Accordion component, you can organize the Form group and Card collapsible elements. Accordion allows showing only one collapsible item at the same time.
Initialization
Use the <mobiscroll.Accordion>
component for initialization.
<mobiscroll.Accordion>
<mobiscroll.FormGroup ref="mbsc" collapsible open>
<mobiscroll.FormGroupTitle>
Title
</mobiscroll.FormGroupTitle>
<mobiscroll.FormGroupContent>
Form group content...
</mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
<mobiscroll.FormGroup ref="mbsc" collapsible>
<mobiscroll.FormGroupTitle>
Title 2
</mobiscroll.FormGroupTitle>
<mobiscroll.FormGroupContent>
Form group content...
</mobiscroll.FormGroupContent>
</mobiscroll.FormGroup>
//...
</mobiscroll.Accordion>
<mobiscroll.Accordion>
<mobiscroll.Card collapsible>
<mobiscroll.CardHeader>
<mobiscroll.CardTitle>Title</mobiscroll.CardTitle>
<mobiscroll.CardSubtitle>Subtitle</mobiscroll.CardSubtitle>
</mobiscroll.CardHeader>
<mobiscroll.CardContent>
Card contetnt...
</mobiscroll.CardContent>
</mobiscroll.Card>
<mobiscroll.Card collapsible>
<mobiscroll.CardHeader>
<mobiscroll.CardTitle>Title 2</mobiscroll.CardTitle>
<mobiscroll.CardSubtitle>Subtitle</mobiscroll.CardSubtitle>
</mobiscroll.CardHeader>
<mobiscroll.CardContent>
Card contetnt...
</mobiscroll.CardContent>
</mobiscroll.Card>
//...
</mobiscroll.Accordion>