Smd-kit

Dependencies

• Angular
• Ionic

Installation

npm install smd-kit

Configuration

Add styles in angular.json

{
  "styles": [
    "node_modules/smd-kit/src/lib/smd.scss"
  ]
}

Import SmdModule in component module

import {SmdModule} from 'smd-kit';

@NgModule({
  imports: [SmdModule],
  declarations: [AppComponent]
})
export class AppModule {
}

Components

Avatar

<smd-avatar></smd-avatar>

Properties

| Attribute | Type | Default | |:----------|:---------------------|-------------| | picture | string｜undefined | undefined |

Badge

<smd-badge></smd-badge>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------|-----------| | type | dot｜digit | digit | | color | primary｜success｜error｜warning｜info｜medium｜light｜dark | primary |

Button

<smd-button></smd-button>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------|-------------| | type | clear｜outline｜solid｜default｜undefined | undefined | | expand | block｜full｜undefined | undefined | | size | small｜medium｜large | medium | | color | primary｜success｜error｜warning｜info｜medium｜light｜dark | primary | | disabled | boolean | false |

Events

| Name | Description | |:---------|:------------------------------------------| | smdBlur | Emitted when the button loses focus. | | smdFocus | Emitted when the button has focus. | | smdClick | Emitted when the button has been clicked. |

Checkbox

<smd-checkbox></smd-checkbox>

Properties

| Attribute | Type | Default | |:-----------------|:--------------------------------|-----------------| | justify | end｜space-between｜start | space-between | | labelPlacement | end｜fixed｜stacked｜start | start | | alignment | start｜center | center | | indeterminate | boolean | false | | disabled | boolean | false | | helperText | string｜undefined | undefined | | isIncorrectValue | boolean | false |

Events

| Name | Description | |:---------|:---------------------------------------| | smdBlur | Emitted when the checkbox loses focus. | | smdFocus | Emitted when the checkbox has focus. |

Helper

<smd-helper></smd-helper>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------|-------------| | icon | string｜undefined | undefined | | color | primary｜success｜error｜warning｜info｜medium｜light｜dark | primary |

Icon

List of all icons: https://phosphoricons.com/

<smd-icon></smd-icon>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------|---------| | name | string | | | color | primary｜success｜error｜warning｜info｜medium｜light｜dark | dark |

CSS Custom Properties

| Name | Description | |:---------------------|:------------------------| | --smd-icon-size | Font size of the icon | | --smd-icon-weight | Font weight of the icon |

Input

<smd-input></smd-input>

Properties

| Attribute | Type | Default | |:-----------------|:------------------------------------------------------------------------------------------------------|-------------| | label | string | | | placeholder | string | | | type | date｜datetime-local｜email｜month｜number｜password｜search｜tel｜text｜time｜url｜week | text | | inputmode | decimal｜email｜none｜numeric｜search｜tel｜text｜url｜password｜undefined | undefined | | autocapitalize | string | off | | passwordToggle | boolean | false | | disabled | boolean | false | | helperText | string｜undefined | undefined | | isIncorrectValue | boolean | false |

Events

| Name | Description | |:---------|:------------------------------------| | smdBlur | Emitted when the input loses focus. | | smdFocus | Emitted when the input has focus. |

List action

<smd-list-action></smd-list-action>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------|-----------| | color | primary｜success｜error｜warning｜info｜medium｜light｜dark | primary |

Searchbar

<smd-searchbar></smd-searchbar>

Properties

| Attribute | Type | Default | |:------------|:----------|------------| | placeholder | string | "Buscar" | | setFocus | boolean | false |

Events

| Name | Description | |:---------|:------------------------------------------------| | smdBlur | Emitted when the input loses focus. | | smdFocus | Emitted when the input has focus. | | smdClear | Emitted when the clear input button is clicked. | | smdCancel | Emitted when the cancel button is clicked. |

Tag

<smd-tag></smd-tag>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------|-------------| | icon | string｜undefined | undefined | | type | contained｜outlined | contained | | color | primary｜success｜error｜warning｜info｜medium｜light｜dark | primary | | disabled | boolean | false |

Textarea

<smd-textarea></smd-textarea>

Properties

| Attribute | Type | Default | |:-----------------|:------------------------------------------------------------------------------------------------------|-------------| | label | string | | | placeholder | string | | | type | date｜datetime-local｜email｜month｜number｜password｜search｜tel｜text｜time｜url｜week | text | | inputmode | decimal｜email｜none｜numeric｜search｜tel｜text｜url｜password｜undefined | undefined | | autocapitalize | string | off | | rows | number｜undefined | undefined | | cols | number｜undefined | undefined | | autoGrow | boolean | false | | disabled | boolean | false | | helperText | string｜undefined | undefined | | isIncorrectValue | boolean | false |

Events

| Name | Description | |:---------|:---------------------------------------| | smdBlur | Emitted when the textarea loses focus. | | smdFocus | Emitted when the textarea has focus. |

Toggle

<smd-toggle></smd-toggle>

Properties

| Attribute | Type | Default | |:-----------------|:--------------------------------|-----------------| | justify | end｜space-between｜start | space-between | | labelPlacement | end｜fixed｜stacked｜start | start | | alignment | start｜center | center | | disabled | boolean | false | | helperText | string｜undefined | undefined | | isIncorrectValue | boolean | false |

Events

| Name | Description | |:---------|:-------------------------------------| | smdBlur | Emitted when the toggle loses focus. | | smdFocus | Emitted when the toggle has focus. |

Alert

Animations.

• enterAnimation
• leaveAnimation

NOTE: The animations are in an external service

Buttons

• Principal button:

  • role: destructive

• Cancel button:

  • role: cancel

const alert = await this.alertCtrl.create({
  enterAnimation: this.animationsService.showAlertAnimation,
  leaveAnimation: this.animationsService.hideAlertAnimation,
  header: 'Alert!',
  buttons: [
    {
      text: 'Cancel',
      role: 'cancel',
    },
    {
      text: 'OK',
      role: 'destructive',
    }
  ]
});

await alert.present();

Action sheet

Buttons

• Principal button:

  • role: principal

• Cancel button:

  • text: empty text
  • role: cancel

const actionSheet = await this.actionSheetCtrl.create({
  header: 'Options',
  buttons: [
    {
      text: 'Share',
    },
    {
      text: 'Delete all',
      role: 'principal',
    },
    {
      text: '',
      role: 'cancel',
    }
  ]
});

await actionSheet.present();

Toast

Icons

The icons shown are from ionic. For a list of all available icons, see https://ionic.io/ionicons.

Color

The color to use, it must establish the class smd-color-${color}

Buttons

• Cancel button:
  • text: empty text
  • icon: close
  • role: cancel

const toast = await this.toastCtrl.create({
  header: 'Hello world!',
  message: 'Show toast during 3 seconds',
  icon: 'warning-outline',
  duration: 3000,
  position: 'top',
  cssClass: `smd-color-warning`,
  buttons: [
    {
      text: '',
      icon: 'close',
      role: 'cancel',
    }
  ]
});

await toast.present();