💎
Prizm Design System Documentation
ShowcaseGitHubRepot a Bug
  • About Prizm
    • Дизайн-система Prizm
    • Changelog
    • License
  • Guidelines
    • ⭕Accessibility
    • ⭕Colors
    • 🚧Design Tokens
      • Color
      • Border Radius
      • Box Shadow
      • Font
      • Line Height
      • Size
      • Space
      • Transition
      • Page
    • ⭕Grid
    • ⭕Iconography
    • ⭕Naming
    • ⭕Typography
    • 🚧Validation
  • Components
    • 🚧Accordion
    • 🚧Breadcrumbs
    • 🚧Buttons
      • Text Button
      • Icon Buttn
      • Split Button
    • 🚧Calendars
      • Calendar
      • Calendar Range
      • ⭕Calendar Month
      • Calendar Year
    • ⭕Card
    • 🚧Checkbox
    • 🚧Chips
    • 🚧Dialogs
      • Confirm dialog
      • Dialog
      • Sidebar
    • ⭕Hierarchy
    • Hint
    • 🚧Indicator
      • 🚧Counter
      • ⭕Point
      • ⭕Icon
    • 🚧Inputs
      • Chips
      • Chips Select
      • Chips Combobox
      • Date
      • Datе Time Range
      • Date Range
    • Navigation menu
    • 🚧Navigation Panel
      • Header
      • Navigation menu
    • 🚧Dropdown Menu
      • Context Menu
      • Dropdown Menu
    • 🚧Paginator
    • 🚧Panel
    • 🚧Progress
      • Bar
      • Spinner
    • 🚧RadioButton
    • 🚧Scrollbar
    • 🚧Shell
    • ⭕Skeleton
    • 🚧Slider
    • 🚧Splitter
    • 🚧Status Panel
    • 🚧Stepper
    • 🚧Switcher
    • ⭕Table
      • Настройки таблицы
    • 🚧Tab
    • Time Picker
    • 🚧Toast
    • 🚧Toggle
    • 🚧Tooltip
    • Tree
      • Tree Chevrone
      • Tree Line
    • 🚧Widget
  • Patterns
    • ⭕403 / 404
    • Query builder
    • ⭕Cron
    • None content
    • ⭕Group Content
    • ⭕File Upload
    • ⭕Side Menu
    • ⭕Zoom Control
Powered by GitBook
On this page
  • Общая информация
  • Анатомия
  • Описание работы
  • Создание условия
  • Создание группы
  • Логические операторы
  • Логический оператор "Не"
  • Размеры
  • Внешние размеры
  • Внутренние размеры
  • Расположение
  • Состояния

Was this helpful?

  1. Patterns

Query builder

Previous403 / 404NextCron

Last updated 6 months ago

Was this helpful?

Общая информация

Компонент Query Builder (или "конструктор запросов") — это инструмент для создания запросов, являющихся сложными логическими выражениями, т.е. логическими выражениями, состоящими из одного или нескольких простых (условий) или сложных логических выражений, соединенных с помощью логических операторов.

Анатомия

  1. Панель группы

  2. Условие

  3. Группа условий (выражение)

  4. Логические операторы (И, Или)

  5. Логический оператор "Не" (отрицание)

  6. Кнопка "Добавить условие"

  7. Кнопка "Добавить группу"

  8. Кнопка "Удалить группу"

  9. Кнопка "Удалить условие"

  10. Кнопка "Скрыть группу/Показать группу"

  11. Кнопка перемещения условия/группы

Описание работы

Создание условия

В панели группы кликом на кнопку "Добавить условие"

Условие можно:

  • Переместить

  • Удалить (кнопка "Удалить" появляется при наведении на строчку условия)

Создание группы

В панели группы кликом на кнопку "Добавить группу"

Группу можно:

  • Переместить

  • Удалить (кнопка "Удалить" появляется при наведении на панель группы)

  • Свернуть/развернуть (кроме первого уровня)

  • Выбрать логические операторы (И/Или, Не)

Логические операторы

Оператор "И" (логическое умножение)

В случае, когда пользователь выбирает оператор "И", в результате поиска/фильтрации условия будут суммироваться. Например: выбран оператор "И" и добавлено два условия "Квадрат" и "Желтый". В результате поиска будут искаться и выводиться только желтые квадраты.

Оператор "Или" (логическое сложение)

В случае, когда пользователь выбирает оператор "Или", в результате поиска/фильтрации условия будут суммироваться. Например: выбран оператор "Или" и добавлено два условия " Квадрат" и "Желтый". В результате поиска будут искаться и выводиться все квадраты и все фигуры желтого цвета.

Логический оператор "Не"

Отрицание в теории множеств, также известное как логическое отрицание или инверсия, представляет собой операцию, которая изменяет или «переворачивает» принадлежность элемента множеству. Если элемент принадлежит исходному множеству, то в результате отрицания он не будет принадлежать результирующему множеству, и наоборот.

Операторы "И"+"Не"

В случае, когда пользователь выбирает операторы "И"+"Не", в результате поиска/фильтрации условия будут умножаться между собой и вычитаться из выдачи. Например: выбраны операторы "И"+"Не" и добавлено два условия "Квадрат" и "Желтый". В результате поиска будут искаться и выводиться все фигуры любого цвета, кроме желтого квадрата.

Операторы "Или"+"Не"

В случае, когда пользователь выбирает операторы "Или"+"Не", в результате поиска/фильтрации условия будут суммироваться между собой и вычитаться из выдачи. Например: выбраны операторы "Или"+"Не" и добавлено два условия "Квадрат" и "Желтый". В результате поиска будут искаться и выводиться все фигуры не являющиеся квадратами (любого цвета), а также все фигуры не окрашенные в желтый цвет.

Размеры

Внешние размеры

Панель группы и условие имеет фиксированную высоту - 52 px.

Ширина панели группы зависит от количества управляющих элементов и уровня иерархии. Ширина условия зависит от уровня иерархии, от количества и размеров инпутов. Если сценарий подразумевает у себя вложенные уровни, ширина условий должна быть фиксированной и не должна меняться в зависимости от уровня вложенности. Если же нет - условие можно растянуть по ширине виджета.

Внутренние размеры

Панель группы:

Условие:

Расположение

Располагать Query Builder рекомендуется в теле виджета с отступами по 16 px по вертикали и по 8 px по горизонтали. Между условиями и панелями групп отступы отсутствуют.

Выравнивается query builder всегда по левому краю. Если интерфейс имеет ограниченное пространство, появляется вертикальный и горизонтальный скроллы.

Состояния

  1. Default. Состояние по умолчанию

  2. Hover. При наведении