Creates a wrapper for an input field which opens up to the left or right to reveal the input field. Set the initial closed width of the component through its style width. The element keeps its width even on open.

It does not contain an input field on its own. Add an input field through the default slot. As an addition you can add a button to the "button" slot.

The component opens when the class "hylo-open" is added. It adds the class on its own when it gains focus or when a "click" event emits from inside the "button" slot and the component is closed. In that case the "click" event is canceled.

Properties

buttonClass: string = ''

Classes added to the button section wrapper.

direction: "left" | "right" = 'left'

The direction to which the input field opens.

inactive: boolean

If set, the component does not react to any user interactions and does not fire the events "hyloOpened" and "hyloClosed".

The class "hylo-open" can still be set manually.

inputClass: string = ''

Classes added to the input section wrapper.

wrapperClass: string = ''

Classes added to the wrapper surrounding the input and button sections.

Events

hyloClosed: EventEmitter<any>

The component closed. The component also toggles the class "hylo-open".

hyloHasFocus: EventEmitter<boolean>

Fires when the component gains or looses focus through the "tab" key. The component also toggles the class "hylo-has-focus".

The emitted boolean value indicates whether the component gained or lost the focus.

hyloOpened: EventEmitter<any>

The component opened. The component also toggles the class "hylo-open".

Generated using TypeDoc