как сделать фильтр поиска?
всем привет не судите строго за вопрос, только начинаю изучать) нужно сделать меню поиска, состоящее из фильтров. в меню фильтра должен показывать выбранный фильтр, а весь список фильтра показывается в выпадающем меню, проблема в том что не получается «поставить» выбранный фильтр в меню данного фильтра.
Отслеживать
задан 12 июн 2020 в 12:11
23 3 3 бронзовых знака
1 ответ 1
Сортировка: Сброс на вариант по умолчанию
надеюсь правильно тебя понял, вот примерный код того что ты хочешь
public selectedFilter: string; // . public selectFilter(filter: string): void
Немного обьясню что происходит, на каждый элемент ngFor мы указыва функцию на клик которая принимает как параметр название фильтра, либо сам фильтр (это может быть как обьект так и простой тип данных), ну присваеваем в переменную выбранный фильтр
Также такие вот действия в представлении: typeDropdown = !typeDropdown я бы советовал всё таки вынести в компонент (ts файл), это неявная логика и вообщемто принято разделять логику от представления, инлайн функции не приветствуются
filter
Устанавливает фильтр (визуальный эффект) или их сочетание для элемента. К фильтрам относится изменение прозрачности, добавление тени, трансформация и др.
Синтаксис
filter: progid:DXImageTransform.Microsoft.Фильтр(свойства)Фильтры
Alpha Настраивает прозрачность объекта. BasicImage Устанавливает параметры цвета, поворота изображения или прозрачности. Blur Размывает содержимое. Chroma Показывает определенные цвета прозрачными. DropShadow Отображает тень. Emboss Показывает содержимое объекта в виде барельефа. Engrave Показывает содержимое объекта в виде черно-белой гравюры. Glow Добавляет свечение вокруг краев. Gradient Создаёт линейный градиент. ICMFilter Преобразует цвета содержимого на основе профиля системы управления цветом (Image Color Management, ICM). Light Создает эффект лучей света. MaskFilter Показывает прозрачные пикселы как цветную маску, а непрозрачные пикселы наоборот, прозрачными. Matrix Изменяет размер, поворачивает или отражает объект на основе матричных преобразований. MotionBlur Размывает объект так, словно он быстро движется. Shadow Добавляет тень. Wave Вносит волнообразные искажения.
HTML5 CSS2.1 IE Cr Op Sa Fx
filter 
Браузеры
В IE6 и в IE7 фильтры применяются только для элементов, у которых установлено свойство hasLayout.
Internet Explorer 9 не добавляет фильтры к элементам при печати документа.
Фильтры¶
Допустим, вам необходимо создать элемент с эффектом матового стекла, слегка непрозрачный, который располагается поверх изображения. При этом текст должен быть живым текстом, а не изображением. Как это сделать?
Сочетание CSS-фильтров и backdrop-filter позволяет нам применять эффекты и размывать то, что необходимо, в реальном времени. Размытие и непрозрачность — два из множества доступных фильтров, поэтому давайте вкратце рассмотрим, что они делают и как их использовать.
При размещении текста поверх изображений необходимо следить за тем, чтобы текст оставался читаемым, если эффект фильтрации не поддерживается браузером пользователя.
Свойство filter ¶
В качестве значения для свойства filter можно применить один или несколько из перечисленных ниже фильтров. При неправильном применении фильтра остальные фильтры, определенные для filter , работать не будут.
blur ¶
Применяет гауссово размытие, и единственным аргументом, который можно передать, является радиус , который представляет собой величину размытия. Это должна быть единица длины, например 10px . Проценты не принимаются.
1 2 3
.my-element filter: blur(0.2em); > brightness ¶
Для увеличения или уменьшения яркости элемента используется функция яркости. Значение яркости выражается в процентах, при этом неизменное изображение выражается значением 100%. При значении 0% изображение становится абсолютно черным, поэтому значения от 0% до 100% делают изображение менее ярким. Для увеличения яркости используйте значения более 100%.
1 2 3
.my-element filter: brightness(80%); > В фильтрах типа brightness можно также использовать десятичные значения вместо процентных. Чтобы задать яркость 80% с десятичной дробью, напишите 0.8 .
contrast ¶
Установите значение в диапазоне от 0% до 100% для уменьшения или увеличения контрастности соответственно.
1 2 3
.my-element filter: contrast(160%); > grayscale ¶
Вы можете применить полностью полутоновый эффект, используя 1 в качестве значения для grayscale() , или 0 для получения полностью насыщенного элемента. Также можно использовать процентные или десятичные значения для применения только частичного эффекта оттенков серого. Если аргументы не указаны, то элемент будет полностью насыщен серым цветом. Если передать значение, превышающее 100%, то оно будет ограничено 100%.
1 2 3
.my-element filter: grayscale(80%); > invert ¶
Как и grayscale , в функцию invert() можно передать значение 1 или 0 , чтобы включить или выключить ее. Если функция включена, то цвета элемента инвертируются полностью. Можно также использовать процентные или десятичные значения, чтобы применить только частичную инверсию цветов. Если не передавать никаких аргументов в функцию invert() , то элемент будет полностью инвертирован.
1 2 3
.my-element filter: invert(1); > opacity ¶
Фильтр opacity() работает так же, как свойство opacity , в котором можно передать число или процент для увеличения или уменьшения непрозрачности. Если аргументы не переданы, то элемент полностью виден.
1 2 3
.my-element filter: opacity(0.3); > saturate ¶
Фильтр saturate очень похож на фильтр brightness и принимает тот же аргумент: число или процент. Вместо того чтобы увеличивать или уменьшать эффект яркости, фильтр saturate увеличивает или уменьшает насыщенность цвета.
1 2 3
.my-element filter: saturate(155%); > sepia ¶
С помощью этого фильтра, работающего по принципу grayscale() , можно добавить эффект тона сепии. Тон сепии — это техника фотопечати, при которой черные тона преобразуются в коричневые, чтобы сделать их теплее. В качестве аргумента для sepia() можно передать число или процент, что увеличивает или уменьшает эффект. Если не передавать никаких аргументов, то эффект сепии будет полным (эквивалентно sepia(100%) ).
1 2 3
.my-element filter: sepia(70%); > hue-rotate ¶
В уроке colors вы узнали о том, как оттенок в hsl ссылается на вращение цветового круга, и этот фильтр работает аналогичным образом. Если передать угол, например, градусы или обороты, то он сдвигает оттенок всех цветов элемента, изменяя ту часть цветового круга, на которую он ссылается. Если аргумент не указан, то фильтр ничего не делает.
1 2 3
.my-element filter: hue-rotate(120deg); > drop-shadow ¶
Можно применить криволинейную падающую тень, как это делается в дизайнерских инструментах, например, в Photoshop, с помощью drop-shadow . Эта тень применяется к альфа-маске, что делает ее очень удобной для добавления тени к вырезанному изображению. Фильтр drop-shadow принимает параметр shadow , содержащий разделенные пространством значения offset-x , offset-y , blur и color . Он практически идентичен фильтру block-shadow , но ключевое слово inset и значение spread не поддерживаются.
1 2 3
.my-element filter: drop-shadow(5px 5px 10px orange); > Подробнее о различных типах теней можно узнать в модуле Тени.
url ¶
Фильтр url позволяет применять SVG-фильтр из связанного SVG-элемента или файла. Вы можете подробнее о фильтрах SVG можно прочитать здесь
Фильтр фона¶
Свойство backdrop-filter принимает все те же значения функции фильтрации, что и filter . Разница между backdrop-filter и filter заключается в том, что свойство backdrop-filter применяет фильтр только к фону, в то время как свойство filter применяет его ко всему элементу.
Пример, приведенный в начале этого урока, является идеальным примером, поскольку вы не хотите, чтобы текст был размыт, и в идеале не хотите добавлять дополнительные HTML-элементы. Возможность применять фильтры только к фону позволяет это сделать.
Как сделать — Фильтр элементов
Узнать, как фильтровать элемент DIV на основе его имени класса.
Фильтр элементов DIV
Показать все Машины Животные Фрукты Цветы
Создание фильтра элементов DIV
Шаг 1) Добавить HTML:
Пример
Шаг 2) Добавить CSS:
Пример
.filterDiv float: left;
background-color: #2196F3;
color: #ffffff;
width: 100px;
line-height: 100px;
text-align: center;
margin: 2px;
display: none; /* Скрыто по умолчанию */
>
/* В класс «show» добавляется к отфильтрованные элементы */
.show display: block;
>
/* Стиль кнопок */
.btn border: none;
outline: none;
padding: 12px 16px;
background-color: #f1f1f1;
cursor: pointer;
>
/* Добавить светло-серый фон на наведении курсора мыши */
.btn:hover background-color: #ddd;
>
/* Добавить темный фон для активной кнопки */
.btn.active background-color: #666;
color: white;
>
Шаг 3) Добавить JavaScript:
Пример
filterSelection(«all»)
function filterSelection(c) var x, i;
x = document.getElementsByClassName(«filterDiv»);
if (c == «all») c = «»;
// Добавить класс «show» (display:block) к отфильтрованным элементам и удалите класс «show» из элементов, которые не выбраны
for (i = 0; i < x.length; i++) w3RemoveClass(x[i], "show");
if (x[i].className.indexOf(c) > -1) w3AddClass(x[i], «show»);
>
>
// Показать отфильтрованные элементы
function w3AddClass(element, name) var i, arr1, arr2;
arr1 = element.className.split(» «);
arr2 = name.split(» «);
for (i = 0; i < arr2.length; i++) if (arr1.indexOf(arr2[i]) == -1) element.className += " " + arr2[i];
>
>
>
// Скрыть элементы, которые не выбраны
function w3RemoveClass(element, name) var i, arr1, arr2;
arr1 = element.className.split(» «);
arr2 = name.split(» «);
for (i = 0; i < arr2.length; i++) while (arr1.indexOf(arr2[i]) > -1) arr1.splice(arr1.indexOf(arr2[i]), 1);
>
>
element.className = arr1.join(» «);
>
// Добавить активный класс к текущей кнопке управления (выделите ее)
var btnContainer = document.getElementById(«myBtnContainer»);
var btns = btnContainer.getElementsByClassName(«btn»);
for (var i = 0; i < btns.length; i++) btns[i].addEventListener("click", function() var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(» active», «»);
this.className += » active»;
>);
>