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

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();