Yukit

Dependencies

• Angular
• Ionic

Installation

npm install yukit

Configuration

Add styles in angular.json

{
  "styles": [
    "node_modules/yukit/src/lib/yukit.scss"
  ]
}

Import YukitModule in component module

import {YukitModule} from 'yukit';

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

Components

Avatar

<yu-avatar></yu-avatar>

Properties

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

Badge

<yu-badge></yu-badge>

Properties

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

Button

<yu-button></yu-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｜gradient｜light｜dark | primary | | disabled | boolean | false |

Events

| Name | Description | |:---------|:------------------------------------------| | yuBlur | Emitted when the button loses focus. | | yuFocus | Emitted when the button has focus. | | yuClick | Emitted when the button has been clicked. |

Checkbox

<yu-checkbox></yu-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 | |:---------|:---------------------------------------| | yuBlur | Emitted when the checkbox loses focus. | | yuFocus | Emitted when the checkbox has focus. |

Chip

<yu-chip></yu-chip>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------------------|-------------| | startIcon | string｜undefined | undefined | | endIcon | string｜undefined | undefined | | badge | primary｜success｜error｜warning｜info｜medium｜gradient｜light｜dark｜undefined | undefined |

Helper

<yu-helper></yu-helper>

Properties

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

Icon

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

<yu-icon></yu-icon>

Properties

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

CSS Custom Properties

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

Input

<yu-input></yu-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 | |:---------|:------------------------------------| | yuBlur | Emitted when the input loses focus. | | yuFocus | Emitted when the input has focus. |

List action

<yu-list-action></yu-list-action>

Properties

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

Notice

<yu-notice></yu-notice>

Properties

| Attribute | Type | Default | |:----------|:--------------------------------------------------------------------------------|--------------------| | name | string | | | message | string | | | icon | string | "warning-circle" | | color | primary｜success｜error｜warning｜info｜medium｜gradient｜light｜dark | primary |

Searchbar

<yu-searchbar></yu-searchbar>

Properties

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

Events

| Name | Description | |:---------|:------------------------------------------------| | yuBlur | Emitted when the input loses focus. | | yuFocus | Emitted when the input has focus. | | yuClear | Emitted when the clear input button is clicked. | | yuCancel | Emitted when the cancel button is clicked. |

Tag

<yu-tag></yu-tag>

Properties

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

Textarea

<yu-textarea></yu-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 | |:---------|:---------------------------------------| | yuBlur | Emitted when the textarea loses focus. | | yuFocus | Emitted when the textarea has focus. |

Toggle

<yu-toggle></yu-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 | |:---------|:-------------------------------------| | yuBlur | Emitted when the toggle loses focus. | | yuFocus | 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 yu-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: `yu-color-warning`,
  buttons: [
    {
      text: '',
      icon: 'close',
      role: 'cancel',
    }
  ]
});

await toast.present();