필터컴포넌트
어두운 테마를 지원하는 전자 상거래 애플리케이션을 위해 Material Design 스타일로 설계된 반응형 필터 구성 요소입니다. 향상된 쇼핑 경험을 위한 여러 대화형 요소가 포함되어 있습니다.
HTML 코드
<div class="p-6 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">
<h2 class="text-lg font-bold mb-4 text-gray-900 dark:text-gray-100">Filters</h2>
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Categories</h3>
<ul class="mt-2">
<li><input type="checkbox" id="category1" class="mr-2"> <label for="category1" class="text-gray-700 dark:text-gray-300">Electronics</label></li>
<li><input type="checkbox" id="category2" class="mr-2"> <label for="category2" class="text-gray-700 dark:text-gray-300">Fashion</label></li>
<li><input type="checkbox" id="category3" class="mr-2"> <label for="category3" class="text-gray-700 dark:text-gray-300">Home Appliances</label></li>
<li><input type="checkbox" id="category4" class="mr-2"> <label for="category4" class="text-gray-700 dark:text-gray-300">Books</label></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Price Range</h3>
<input type="range" class="w-full" min="0" max="1000" step="10" value="500">
<div class="flex justify-between text-gray-700 dark:text-gray-300">
<span>$0</span>
<span>$1000</span>
</div>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Brands</h3>
<ul class="mt-2">
<li><input type="checkbox" id="brand1" class="mr-2"> <label for="brand1" class="text-gray-700 dark:text-gray-300">Brand A</label></li>
<li><input type="checkbox" id="brand2" class="mr-2"> <label for="brand2" class="text-gray-700 dark:text-gray-300">Brand B</label></li>
<li><input type="checkbox" id="brand3" class="mr-2"> <label for="brand3" class="text-gray-700 dark:text-gray-300">Brand C</label></li>
</ul>
</div>
<div class="bg-white dark:bg-gray-700 p-4 rounded-lg shadow-md">
<h3 class="text-md font-semibold text-gray-900 dark:text-gray-100">Ratings</h3>
<ul class="mt-2">
<li><input type="radio" id="rating1" name="rating" class="mr-2" value="5"> <label for="rating1" class="text-gray-700 dark:text-gray-300">5 Stars</label></li>
<li><input type="radio" id="rating2" name="rating" class="mr-2" value="4"> <label for="rating2" class="text-gray-700 dark:text-gray-300">4 Stars</label></li>
<li><input type="radio" id="rating3" name="rating" class="mr-2" value="3"> <label for="rating3" class="text-gray-700 dark:text-gray-300">3 Stars</label></li>
</ul>
</div>
</div>
<button class="mt-4 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600">Apply Filters</button>
</div>관련 구성 요소
브루탈리스트필터컴포넌트
브루탈리즘 스타일의 필터 구성 요소로, 높은 대비, 대담한 타이포그래피, 특이한 간격이 있습니다. 여기에는 확인란, 라디오 버튼 및 가격대 슬라이더가 포함됩니다. 반응형 효과는 미디어 쿼리와 유체 단위를 통해 달성됩니다. 다크 모드는 CSS를 통해 지원됩니다.