검색 애니메이션
<script>
import { onMount, onDestroy } from "svelte";
let display = false;
let searchText = '';
let selectValue ='all';
onMount(async () => {
document.addEventListener("click", handleOutsideClick);
});
onDestroy(() => {
clearInterval(interval);
document.removeEventListener("click", handleOutsideClick);
});
function searchFilter(){
let lowSearchText = searchText.toLowerCase();
// 검색 로직
}
function searchOn(){
display =true;
}
function searchOff(){
display =false;
searchText = '';
selectValue ='all';
searchFilter();
}
function handleOutsideClick(event) {
const container = document.querySelector(".search-container");
if (container && !container.contains(event.target)) {
if(searchText.length<=0) display = false;
}
}
</script>
<div style="display: flex;flex: 1; justify-content: flex-end;">
<div class="search-container">
<div class="search-border">
<select class="search-select {display ? 'active' : ''}" bind:value={selectValue} on:change={searchFilter} >
<option value={'all'}>전체</option>
<option value={'creater'}>요청자</option>
<option value={'closer'}>담당자</option>
<option value={'message'}>작업명</option>
</select>
<input type="text" id="searchInput" class="search-input {display ? 'active' : ''}" placeholder="{display ? '검색어를 입력하세요' : '검색'}" bind:value={searchText} on:input={searchFilter} on:focus={searchOn} />
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span id="searchIcon" class="search-icon {display ? '': 'active'}" on:click={searchOn}><i class="fa fa-search"></i></span>
<!-- svelte-ignore a11y-no-static-element-interactions -->
<!-- svelte-ignore a11y-click-events-have-key-events -->
<span id="closeIcon" class="search-icon {display ? 'active' : ''}" on:click={searchOff}><i class="fa fa-times"></i></span>
</div>
</div>
</div>
<style scoped>
.search-container {
margin: 0 20px;
display: flex;
height: 30px;
align-items: center;
}
.search-input {
padding: 0;
border: none;
outline: none;
background-color: #ffffff;
cursor: text;
width: 40px;
padding: 0 4px;
opacity: 1;
transition: width 0.5s ease;
font-size: 0.875em;
}
.search-input.active {
width: 160px;
}
.search-select {
display: none;
border: none;
outline: none;
transition: opacity 0.5s ease;
font-size: 0.875em;
}
.search-select.active {
display: inline-block;
opacity: 1;
}
.search-icon {
display: none;
cursor: pointer;
font-size: 13px;
padding: 0 5px;
}
.active {
display: inline-block;
}
.search-container .search-border {
display: flex;
border-bottom: 1px solid #888;
padding-bottom: 2px;
}
</style>
fa fa-search 는 Font Awesome 아이콘 라이브러리의 클래스를 사용
사용하려면 Font Awesome의 CSS 파일을 포함하거나 설치해야 함.
HTML 파일의 <head>에 Font Awesome의 CSS 파일을 추가합니다.
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet" />
</head>
사용
<i class="fa fa-search"></i>
'프론트' 카테고리의 다른 글
| BootstrapDialog로 사용자 확인(체크박스) 다이얼로그 만들기 (1) | 2025.01.17 |
|---|---|
| 복사 방지 해제 법 (0) | 2024.12.13 |
| [Svelte] input type="text" change event (1) | 2024.12.12 |
| 텍스트 무지개 애니메이션 (1) | 2024.11.27 |
| 쉘 스크립트 - 변수 (0) | 2024.11.14 |
