A cube is a three-dimensional solid object in geometry. A cube has eight vertices and twelve straight edges of the same length, so that these edges form six faces.
Выделение совпадений позволяет пользователю быстро понять, почему результат релевантен, и ускоряет навигацию по спискам. В зависимости от контекста применяется один из двух способов оформления.
Koobiq предоставляет два pipe для подсветки совпадений текста — kbqHighlightBackground и kbqHighlightBold. Оба принимают строку и аргумент для поиска, оборачивая найденные совпадения в тег <mark> — с классом kbq-highlight-background для выделения цветом и kbq-highlight для жирного шрифта.
Применяется в селектах и других выпадающих списках с фильтрацией, а также для выделения совпадений в сложном контенте: описаниях, сообщениях и статьях. Сплошной фон остается читаемым в состояниях hover и active внутри оверлея и делает совпадения заметными даже в длинных текстах.
Совпадения в тексте:
Совпадения в результатах поиска со сложной версткой:
A cube is a three-dimensional solid object in geometry. A cube has eight vertices and twelve straight edges of the same length, so that these edges form six faces.
Cube is a 1997 Canadian science fiction horror film directed and co-written by Vincenzo Natali. A product of the Canadian Film Centre's First Feature Project.
In arithmetic and algebra, the cube of a number n is its third power, that is, the result of multiplying three instances of n together.
The story centers on a group of strangers who awaken in a cube-shaped room connected to adjacent rooms, forming an elaborate maze filled with traps.
Совпадения в таблице:
| City | Company | Person | Notes |
|---|---|---|---|
| Manchester | Blue Harbor Ltd | Alice Brown | Annual review completed |
| Liverpool | Mancraft Studio | Daniel Reed | New client onboarded |
| Bristol | GreenField Tech | Mancini Robert | Budget approved |
| Leeds | Northwind Labs | Emma Stone | Visit planned for Manchester office |
| York | Delta Systems | Michael Turner | Contract with Mancorp signed |
| Oxford | Silver Bridge | Laura Green | Archived in mancategory B |
Этот способ ненавязчив и идеален для быстрого сканирования знакомых данных: пользователь сразу видит, что искомое слово есть в строке, но не отвлекается от основного выбора.
<span [innerHTML]="item | kbqHighlightBold: searchQuery"></span>Раньше этот пайп назывался mcHighlight: это имя устарело и будет удалено в 22.0.0.