Select
<mbsc-dropdown label="Choose one">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
<mbsc-dropdown label="Choose one">
<option *ngFor="let opt of myOptions" [value]="opt.value" >{{opt.text}}</option>
</mbsc-dropdown>
Using with Ionic
The dropdown component can be used tha same way with Ionic, as any other angular component.
Attributes
Name | Description |
---|---|
icon |
Specify icons for a form component. A font-icon name should be passed.
Icon alignment can be controlled with the icon-align attribute. Icons can be displayed on both sides by passing and object 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.:
|
icon-align |
Specify icon alignment. It can be "left" or "right" , it defaults to "left" if not specified.
|
[label] | Label for the dropdown. |
[disabled] | If an element has the disabled attribute, the element will be disabled. |
[readonly] | If an element has the readonly attribute, the element won't change it's value on user input. |
input-style | Defines the input rendering mode. Possible values: "underline" , "box" , "outline" . |
label-style | Defines the position of the label. Possible values: "stacked" , "inline" , "floating" . |
[name] | Name attribute for the dropdown. |
[error] | When true, the dropdown will be rendered with invalid styling |
[errorMessage] | The error message, that will be shown when the field is invalid. |
Icons
<mbsc-dropdown label="Choose one" icon="line-note">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
<mbsc-dropdown label="Choose one" icon="line-note" icon-align="right">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
Input style
This attribute can be used for customizing your form input rendering.
<mbsc-dropdown label="Choose one" input-style="underline">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
<mbsc-dropdown label="Choose one" input-style="box">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
<mbsc-dropdown label="Choose one" input-style="outline">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
Label style
With this attribute you can define the position of the label.
<mbsc-dropdown label="Choose one" label-style="stacked">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
<mbsc-dropdown label="Choose one" label-style="inline">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
<mbsc-dropdown label="Choose one" label-style="floating">
<option>Option 1</option>
<option>Option 2</option>
<option>Option 3</option>
</mbsc-dropdown>
For many more examples - simple and complex use-cases - check out the select demos for angular.
Dropdown theming
Global variables of the Dropdown, Input, Password and Textarea
Variable name | Description |
---|---|
$mbsc-input-background-light | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-input-background-dark | |
$mbsc-input-text-light | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-input-text-dark | |
$mbsc-form-input-border-light | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-form-input-border-dark | |
$mbsc-input-accent-light | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-input-accent-dark | |
$mbsc-input-error-light | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-input-error-dark |
iOS theme
The following variables are specific to the iOS theme light variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-ios-input-background | #ffffff | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-ios-input-text | #000000 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-ios-input-border | #cccccc | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-ios-input-error | #d8332a | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
iOS Dark theme
The following variables are specific to the iOS theme dark variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-ios-dark-input-background | #0f0f0f | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-ios-dark-input-text | #ffffff | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-ios-dark-input-border | #333333 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-ios-dark-input-error | #d8332a | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
Windows theme
The following variables are specific to the Windows theme light variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-windows-input-text | #262626 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-windows-input-border | #999999 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-windows-input-accent | #0078d7 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-windows-input-error | #d30101 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Windows Dark theme
The following variables are specific to the Windows theme dark variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-windows-dark-input-text | #ffffff | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-windows-dark-input-border | #737373 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-windows-dark-input-accent | #0078d7 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-windows-dark-input-error | #d30101 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
Material theme
The following variables are specific to the Material theme light variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-material-input-background | #eeeeee | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-input-text | #6d6d6d | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-input-border | #6d6d6d | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-input-accent | #009688 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Material Dark theme
The following variables are specific to the Material theme dark variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-material-dark-input-background | #303030 | Sets the background color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-dark-input-text | #d4d4d4 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-dark-input-border | #d4d4d4 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-dark-input-accent | #81ccc4 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-material-dark-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
Mobiscroll theme
The following variables are specific to the Mobiscroll theme light variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-mobiscroll-input-text | #454545 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-mobiscroll-input-border | #787878 | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-mobiscroll-input-accent | #4eccc4 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-mobiscroll-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Mobiscroll Dark theme
The following variables are specific to the Mobiscroll theme dark variant:
Variable name | Default value | Description |
---|---|---|
$mbsc-mobiscroll-dark-input-text | #f7f7f7 | Sets the text color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-mobiscroll-dark-input-border | #ffffff | Sets the border color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-mobiscroll-dark-input-accent | #4fccc4 | Sets the accent color of the Dropdown, along with the Input, Password and Textarea fields. |
$mbsc-mobiscroll-dark-input-error | #de3226 | Sets the error color of the Dropdown, along with the Input, Password and Textarea fields. |
Underline examples
Box examples
Outline examples
If you are looking for the generic Form variables, check out the tables here.