Searchbar Vue Component

• Searchbar Properties
• Searchbar Events
• Access To Searchbar Instance

Searchbar Vue component represents Framework7’s component.

Searchbar Properties

You can pass all parameters in single params property or use separate props for each parameter to specify them via component attributes:

Searchbar Events

• **default** - element will be inserted as a child of <div class="searchbar-inner"> element in the end. Same as **inner-end** slot
• **before-inner** - element will be inserted right before <div class="searchbar-inner"> element
• **after-inner** - element will be inserted right after element
• **inner-start** - element will be inserted as a child of <div class="searchbar-inner"> element in the beginning
• **inner-end** - element will be inserted as a child of <div class="searchbar-inner"> element in the end
• **input-wrap-start** - element will be inserted as a child of <div class="searchbar-input-wrap"> element in the beginning
• **input-wrap-end** - element will be inserted as a child of <div class="searchbar-input-wrap"> element in the end

Without Slots:

With Slots:

Access To Searchbar Instance

If you use automatic initalization to init Searchbar (with init:true prop) and need to use Searchbar API you can access its initialized instance by accessing component’s property.

Usual Searchbar

Expandable Searchbar