Примеры стилей нового дизайна Мегаплана
Форма
Чекбокс
(CCheckbox
)
Для меню настроек
Кнопки
(CButton
)
Тип
Размер
Ширина
По умолчанию
ширина кнопки зависит от контента.
Для установки
ширины в долях родительского блока необходимо поместить кнопку в элемент сетки CCol
Кнопка с иконкой
В кнопку можно
добавить иконку
Состояние кнопок
Для всех типов
кнопок существует 3 состояния - active, disabled, loading
На темном фоне
Описание кнопок
Параметр
description задает описание действия, происходящего при нажатии на кнопку. Особенно
актуален для кнопок состоящих только из иконки. По умолчанию принимает значение
caption, если данные переданные в caption имеют тип string
Перестилизация кнопок и их состояний
В случае единичного использования кнопок со стилем, отличающемся от стандартных, можно добавить кнопке класс и описать его стиль в файле стилей текущего react-компонента.
Если стили состояний также отличаются от стандартного, их можно поменять в новом классе передав указанные параметры
Скрыть текст кнопки
Кнопка ссылка
Блок кнопок
(CButtonBar
)
Чекбокс
(CCheckbox
)
Для меню настроек
Счетчик
(CCounter
)
125
125
Label
(CLabel
)
Элемент label
можно использовать независимо от элемента формы
Текстовое поле
(CInput
)
Однострочное текстовое поле
Многострочное текстовое поле
Input c label
На темном фоне
Однострочное текстовое поле
Многострочное текстовое поле
Input c label
Универсальный селект
(CSelect
)
Селект с опциями типа SelectStringOption. Объекты типа (key: string, value: string)
Select...
Селект с опциями типа SelectStringOption. Объекты типа (key: string, value: string)
Select...
CSelect с любыми сущностями (Api.Employee, Api.Topic и т.п.). См. CSmartOption
Select...
CSelect лоадинг
Select...
CSelect disabled
Select...
CSelect без нижней рамки
Select...
Select...
CSelect ошибка(отображается только для селектов нижней рамкой)
Select...
На темном фоне
Селект с опциями типа SelectStringOption. Объекты типа (key: string, value: string)
Select...
Селект с опциями типа SelectStringOption. Объекты типа (key: string, value: string)
Select...
CSelect с любыми сущностями (Api.Employee, Api.Topic и т.п.). См. CSmartOption
Select...
CSelect лоадинг
Select...
CSelect disabled
Select...
CSelect без нижней рамки
Select...
Select...
CSelect ошибка(отображается только для селектов нижней рамкой)
Select...
Поле формы с label
(CFieldRow
)
описание
поля
Бросьте файлы сюда,
чтобы загрузить их
Карточка файла
(CFile
)
inline={false}"
filesadsdaweawqeqweq.doc
inline={true}"
filesadsdaweawqeqweq.doc
Иконки
Иконки
(CIcon
)
На темном фоне
Размер иконок
Существует 2
предустановленных размера иконок
Цвет иконок
Существует 2
предустановленных цвета иконок - светлый и темный. По умолчанию - темный.
Дополнительная стилизация
Существует 2
предустановленных цвета иконок - светлый и темный. По умолчанию - темный.
Иконки меню
(CMenuIcon
)
Анимированные
иконки, используемые в меню разделов
Сущности
Скургление
(CRoundCrop
)
Добавляет
атипичное скругление к любому блоку
Аватар
(CAvatar
)
Заглушки для разных сущностей (определяется из entity)
ПИ
Размеры
ПИ
ПИ
ПИ
С title
ПИ
Без сущности
Аватар и пользователь
(CUser
)
Пользователь
Завхоз
Статус пользователя
status =
"positive" | "negative" | "neutral"
Без аватарки
ПИ
Завхоз
Добавление
(
CAddParticipant)
Добавить
Добавить
Добавить
Колонки
(CCol
)
Сетка
Блокам можно
передавать параметры расположения в сетке (отступ и ширину) и дополнительный класс
1/12
1/6
1/4
1/2
1/12
1/6
1/4
1/2
1/12
2/12
3/12
4/1
2/12
2/12
Блокам можно
передавать параметры расположения в сетке (отступ и ширину) и дополнительный класс
1/12
1/6
1/4
1/2
1/12 Sm
1/6 Sm
1/4 Sm
1/2 Sm
1/12
Off
1/6
Off
1/4 Off
1/2 Off
Установка левых
отступов
Width2
Width6
Width2
Width6
Width2
Width6
Лоадер
(CSpinner
)
В ячйке таблицы
| текст | текст | |
| текст | ||
| текст |
Сообщение
(CNotice
)
Оповещение принимет
2 параметра - тип и контент.
Идейные соображения высшего порядка, а также
постоянный количественный рост
Разнообразный и богатый опыт укрепление и
развитие структуры
Товарищи!
Еще тут могут быть
теги и
ссылки
Хлебные крошки
(CBreadcrumbs
)
Каскад картинок
(CCascadeImages
)
Ссылки
(CUrl
)
Табы
(CTab
)
Клиент4 сделки9 задач1 обсуждение
Типы Размеров
Клиент9 задач
Клиент9 задач
цвета
Клиент9 задач
Клиент9 задач
Промоблок
(CPromo
)
Контент для промоблока
CHeaderCaption
Заглушка для пустых списков
(CEmpty
)
Сроки в порядке
Запросы обработаны
Уведомлений нет
Время начать вести журнал
Связей нет
Нет повторов
Ничего не найдено
Метка не найдена
Редактирование