Permalink
Switch branches/tags
Nothing to show
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
56 lines (47 sloc) 3.04 KB

pt-surface

Паттерн для модальных окон.

Используется для представления перекрывающего слоя / модального блока. Существует в двух цветовых модификациях «паранджа» и «молоко». В контентную часть можно разместить любой тип контента: формы, информеры, текст. При появлени перекрывающего слоя на скролл реагирует только контент, который находится внутри слоя.

{
	block: 'pt-surface',
	attrs: { id: 'demoModal' }, // у кнопки для вызова такой модалки должен быть атрибут data-name: 'demoModal'
	mods: { view: 'tone' },
	content: [
	{
		elem: 'window',
		content: [
		{
			elem: 'content',
			elemMods: { size: 'full', view: 'inverse', 'space-a': 'xl' },
			content: [
			{
				elem: 'close',
				elemMods: { view: 'desktop' },
				mix: { block: 'icon', mods: { 'close': 'm-primary' } }
			},
			{
				// тут наполнение модалки
			}]
		}]
	}]
}
Модификаторы Значение Описание
view soft / tone Цвет закрывающей страницу подложки

Элемент content

Модификаторы элемента content Значение Описание
size xs / s / m / full Размер контентной части
view default Фон
space-a s / m / l / xl / xxl / xxxl / xxxxl Внутренние отступы по всем сторонам
space-h s / m / l / xl / xxl / xxxl / xxxxl Внутренние отступы по горизонтали
space-v s / m / l / xl / xxl / xxxl / xxxxl Внутренние отступы по вертикали
space-t s / m / l / xl / xxl / xxxl / xxxxl Внутренний отступ сверху
space-r s / m / l / xl / xxl / xxxl / xxxxl Внутренний отступ справа
space-b s / m / l / xl / xxl / xxxl / xxxxl Внутренний отступ снизу
space-l s / m / l / xl / xxl / xxxl / xxxxl Внутренний отступ слева

Элемент close

Модификаторы элемента close Значение Описание
view mobile / desktop Размер кликабельной области