Angular Mobile Buttons
Angular Mobile Buttons - Bootstrap 4 & Material Design
Use Angular Mobile Bootstrap’s custom button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more..
Basic example
Angular Mobile Bootstrap includes several predefined button styles, each serving its own semantic purpose, with a few extras thrown in for more control.
<ScrollView>
<StackLayout>
<Button mdbBtn theme="primary" text="Primary"></Button>
<Button mdbBtn theme="secondary" text="Secondary"></Button>
<Button mdbBtn theme="success" text="Success"></Button>
<Button mdbBtn theme="danger" text="Danger"></Button>
<Button mdbBtn theme="warning" text="Warning"></Button>
<Button mdbBtn theme="info" text="Info"></Button>
<Button mdbBtn theme="light" text="Light"></Button>
<Button mdbBtn theme="dark" text="Dark"></Button>
</StackLayout>
</ScrollView>
Additional buttons
<ScrollView>
<StackLayout>
<Button mdbBtn theme="elegant" text="Elegant"></Button>
<Button mdbBtn theme="unique" text="Unique"></Button>
<Button mdbBtn theme="pink" text="Pink"></Button>
<Button mdbBtn theme="purple" text="Purple"></Button>
<Button mdbBtn theme="deep-purple" text="Deep Purple"></Button>
<Button mdbBtn theme="indigo" text="Indigo"></Button>
<Button mdbBtn theme="light-blue" text="Light Blue"></Button>
<Button mdbBtn theme="cyan" text="Cyan"></Button>
<Button mdbBtn theme="dark-green" text="Dark Green"></Button>
<Button mdbBtn theme="light-green" text="Light Green"></Button>
<Button mdbBtn theme="yellow" text="Yellow"></Button>
<Button mdbBtn theme="amber" text="Amber"></Button>
<Button mdbBtn theme="deep-orange" text="Deep Orange"></Button>
<Button mdbBtn theme="brown" text="Brown"></Button>
<Button mdbBtn theme="blue-grey" text="Blue Grey"></Button>
<Button mdbBtn theme="mdb-color" text="MDB Color"></Button>
</StackLayout>
</ScrollView>
Gradient buttons
<StackLayout>
<Button mdbBtn gradient="peach" text="Peach"></Button>
<Button mdbBtn gradient="purple" text="Purple"></Button>
<Button mdbBtn gradient="aqua" text="Elegant"></Button>
</StackLayout>
Outline buttons
Use outline="true" input to create colorful outline buttons.
<StackLayout>
<Button mdbBtn theme="primary" outline="true" text="Primary"></Button>
<Button mdbBtn theme="default" outline="true" text="Default"></Button>
<Button mdbBtn theme="secondary" outline="true" text="Secondary"></Button>
<Button mdbBtn theme="success" outline="true" text="Success"></Button>
<Button mdbBtn theme="info" outline="true" text="Info"></Button>
<Button mdbBtn theme="warning" outline="true" text="Warning"></Button>
<Button mdbBtn theme="danger" outline="true" text="Danger"></Button>
</StackLayout>
Disabled buttons
Use isEnabled="false" input to disable the button.
<StackLayout>
<Button mdbBtn theme="primary" text="Disabled" isEnabled="false"></Button>
<Button mdbBtn theme="secondary" text="Disabled" isEnabled="false"></Button>
<Button mdbBtn theme="default" text="Disabled" isEnabled="false"></Button>
</StackLayout>
Angular Mobile Buttons - API
In this section you will find informations about buttons and its required modules and available inputs, outputs, methods and events.
Modules used
In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular Mobile library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors.
// MDB Angular Mobile Free
import { MdbButtonsModule } from 'mdb-angular-mobile'
Directives
MdbButton
Selector: [mdbBtn]
Type: MdbBtnDirective
Inputs
| Name | Type | Default | Description | Example |
|---|---|---|---|---|
gradient
|
string | ' ' | Allow to add a gradient background color to the button. | gradient="peach" |
isEnabled
|
boolean | true | Allow to disable button. | isEnabled="false" |
outline
|
boolean | false | Allow to change button style to outline. | outline="true" |
theme
|
string | ' ' | Allow to set color of a button. | theme="primary" |