@natec/mef-dev-ui-kit documentation
  1. Components
  2. SlideRightComponent

File

src/lib/markup-kit/modals/slide-right/slide-right.component.ts

Description

A component representing a slide-right modal window.

Example of usage:

<mefdev-slide-right-modal [size]="ModalSize.lg" [show]="showModal">
  <ng-template #modal_header>
    <h4>Modal Header</h4>
  </ng-template>
  <ng-template #modal_footer>
    <button (click)="closeModal()">Close</button>
  </ng-template>
  <div class="modal-body">
    Content goes here...
  </div>
</mefdev-slide-right-modal>

https://mef.dev/ui_kit_demo/view/page_components/modals/slide_right

Implements

OnInit

Metadata

selector mefdev-slide-right-modal
styleUrls ./slide-right.component.scss
templateUrl ./slide-right.component.html

Index

Properties
Methods
Inputs
Outputs
Accessors

Constructor

constructor()

Inputs

show
Type : boolean

Flag indicating whether the modal should be shown or hidden. Set it to true to show the modal and false to hide it.
size
Type : ModalSize
Default value : ModalSize.md

Size of the modal. Defaults to ModalSize.md. Possible values: ModalSize.sm, ModalSize.md, ModalSize.lg, ModalSize.xl.

Outputs

visibleChange
Type : EventEmitter

Event emitted when the modal is change state. Emits a boolean value indicating if the modal is closed(false), or open(true). Example:

<mefdev-fill-modal (visibleChange)="onModalClosed($event)"></mefdev-fill-modal>

Methods

getModalState
getModalState()

Shows the modal state. Return a boolean value indicating if the modal is closed(false), or open(true)

Returns : boolean
Public hideModal
hideModal()

Hides the modal. Call this method to close the modal window.

Returns : void
Public showModal
showModal()

Shows the modal. Call this method to open the modal window.

Returns : void

Properties

Protected dialog
Type : ElementRef
Decorators :
@ViewChild('dialog')
modal_footer
Type : TemplateRef<void>
Decorators :
@ContentChild('modal_footer')

Reference to the template for the modal footer. Use this template to customize the footer of the modal.
modal_header
Type : TemplateRef<void>
Decorators :
@ContentChild('modal_header')

Reference to the template for the modal header. Use this template to customize the header of the modal.
Protected visible
Type : boolean
Default value : false

Accessors

show
setshow(val: boolean)

Flag indicating whether the modal should be shown or hidden. Set it to true to show the modal and false to hide it.

Parameters :
Name Type Optional
val boolean No
Returns : void

results matching ""

    No results matching ""