4.3. Таблица

Рисунок 4.34. Таблица с шапкой и кнопкой «Добавить»

Таблица с шапкой и кнопкой «Добавить»

4.3.1. Общие параметры Таблицы

  • высота шапки 40 px

  • опционально в шапке располагается кнопка высотой 32 px (соответственно, отступы над кнопкой и под ней - по 4 px)

  • высота заголовка 32 px

  • высота строк равна или кратна 26 px (без учета пунктирных границ)

  • горизонтальный отступ текста от края ячейки равен 12 px

  • содержимое в ячейках таблицы выравнивается слева по горизонтали, по центру - по вертикали

  • шапка таблицы с названием и кнопкой «Добавить» может отсутствовать. Это зависит от контекста использования и макета дизайна

  • cтиль шрифта названия — BigText, стиль заголовков и основного текста таблицы — MainText.

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

  • высота строки в таблице не статична и может увеличиваться если в таблице длинный текст не обрезается, а переносится на следующую строку

  • невмещающийся в заголовок текст должен обрезаться так, чтобы последние символы надписи скрывались под градиентом.

  • заголовок таблицы может быть разделен по горизонтали на две и более части (см. Модуль Проекты - Гистограмма Ресурсов)

Градиент начинается от правой границы ячейки заголовка.

Ширина градиента составляет 20% от ширины заголовка, но не более 25 px. Начальная (правая) точка градиента такого же цвета как фон кнопки ее прозрачность 0%. Конечная точка (левая) также имеет цвет фона, однако прозрачность конечной точки равно 100%.

Рисунок 4.35. Выравнивание текста в ячейках

Выравнивание текста в ячейках

Рисунок 4.36. Таблица с компонентом «Пагинатор» и кнопкой добавления значения

Таблица с компонентом «Пагинатор» и кнопкой добавления значения

4.3.2. Цвета

Границ таблицы: ButtonPressed

Разделительные пунктирные линии: ButtonBg

Фон строки №1: WhiteBg

Фон строки №2: TableString2

Фон выделенной строки: SelectColor

Фон строки с наведенным курсором: Beige

Текст в заголовке таблицы: TextColor2

Текст в ячейках таблицы: TextColor1

4.3.3. Поведение компонента

Щелчок ЛКМ по заголовку

По умолчанию строки сортируются по возрастанию (в таблицах, в которых не задана сортировка по умолчанию как в модуле Реестры). Щелчок по заголовку столбца таблицы, изменит порядок сортировки строк на сортировку по убыванию. На заголовке столбца отобразится стрелка показывающая порядок сортировки.

«▼» - сортировка по возрастанию

«▲» - сортировка по убыванию

Стрелка сортировки по умолчанию не отображается. Также ее можно не отображать, если содержимое не помещается в ширину заголовка столбца.

Щелчок ЛКМ по ячейке таблицы

Щелчок ЛКМ осуществляет выбор строки в которой находится данная ячейка, либо осуществляет выбор самой ячейки, в зависимости от настроек таблицы.

Щелчок ПКМ по заголовку

Вызовет выпадающее меню таблицы. Содержимое выпадающего меню определяется назначением таблицы и ее функциями.

Щелчок ПКМ по ячейке таблицы

Вызовет выпадающее меню относящееся к строке/ячейке таблицы. Содержимое выпадающего меню определяется назначением таблицы и ее функциями.

Мультивыбор строк при помощи Shift+ЛКМ

Выделение диапазона строк в таблице возможно нажатием на первую и последнюю желаемую ячейку. Тогда фон строк между первой и последней (включительно), изменит цвет на SelectColor.

Мультивыбор строк при помощи Ctrl+ЛКМ

Выделение нескольких строк можно осуществить выборочно. Для этого необходимо нажать и удерживать Ctrl и ЛКМ выделять нужные строки.

Нажатие Enter / F2 / двойной клик ЛКМ при выделенной ячейке

Действия, перечисленные выше, переводят данную ячейку таблицы в режим редактирования (в случае если таблицу можно редактировать).

Нажатие Tab

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

Перемещение по ячейкам таблицы с помощью курсорных кнопок

В таблице также можно перемещать фокус при помощи курсорных кнопок на клавиатуре: «↑» «↓» «←» «→».

Изменение ширины столбцов при помощи drag-and-drop

В таблице можно изменить ширину столбца, если навести курсор мыши на границу столбца, а затем нажать и удерживать ЛКМ для перемещения границы. Когда выбрана желаемая ширина столбца, достаточно отпустить ЛКМ. Контент в ячейках столбца не ограничивает перемещений ее границы.

Нажатие других кнопок мыши/клавиш клавиатуры не должно обрабатываться.