Animated Search Bar

A Vue component that creates an animated search bar with customizable styles.

Usage

Props

PropTypeDefaultDescription
placeholder
String
"Type to Search.."Placeholder text for the search input.
cancel_btn_color
String
"white"Color of the cancel button.
cancel_btn_hover_color
String
"#9E9E9E"Hover color of the cancel button.
search_btn_color
String
"white"Color of the search button.
background
String
"#191919"Background color of the search bar.
background_hover
String
"#212121"Background color of the search bar on hover.
text_color
String
"white"Text color for the search input.

Events

EventDescription
handleInputEmitted when the input value changes, passing the current input value.

Customization

You can customize the appearance of the AnimatedSearchBar component:

  • Modify the props to change colors, placeholder text, and other visual aspects.
  • Adjust the CSS variables in the <style> section to fine-tune sizes and animation properties.
  • Extend the component's functionality by listening to the handleInput event.
Animated Beam
A Vue component that creates an animated SVG line connecting two elements with a gradient effect.
Animated Tooltip
A Vue component that creates an animated tooltip with a dynamic hover effect.