Card (Карта)
Card (Карта) представляет собой легкий и гибкий контейнер содержимого.
Он включает в себя опции для верхних и нижних колонтитулов, широкий
спектр контента, стилей и мощных вариантов отображения.
Для вставки объекта "Card" используйте Панель вставок
(Toolbox) - раздел jQuery UI /
Bootstrap - Card.
Объект карты был вдохновлен компонентом карты V4 Bootstrap.
При использовании в комбинации с контейнером Flexbox,
множественные
карточки с различным содержанием могут иметь такую же высоту, которая
нормально была бы трудно достижима.
Смещение между элементами можно задать с помощью полей. Можно
использовать отрицательное верхнее или нижнее поле для перекрытия
элементов. Например, чтобы поместить текст поверх изображения.
Доступные элементы карты:
Button
· Кнопка - Кнопки поддерживают множество вариантов стилей, таких как
фон, граница,
шрифт, отступы.
Кнопки могут быть использованы в качестве ссылки или вызвать действие
через события. Если оставить текстовое поле пустым и установить иконку,
то она может быть использована в качестве "социальной иконки".
Если несколько кнопок добавляются последовательно, то они будут
отображаться в одной строке. Для отображения кнопок в другом ряду они
должны быть разделены разделителем.
Установите радиус границы равным 500, чтобы создать круглую кнопку /
значок.
Divider · может
использоваться для вставки линии.
Footer - Служит, чтобы
добавить нижний колонтитул в карты. Нижний колонтитул можно настроить
как заголовок (h1, h2 ...)
Нижний колонтитул всегда будет добавлен в качестве последнего элемента
в нижней части карты.
Header · Заголовок
Добавьте заголовок (необязательный) в карточку. Заголовок можно создать
как заголовок (h1, h2 ...)
Заголовок всегда будет добавлен в качестве первого элемента.
Image · Изображение
Добавьте изображение на карточку.
По умолчанию изображение будет иметь полную ширину, но при
необходимости можно задать ширину и высоту. Эти значения являются
адаптивными и могут отличаться в точках останова (в Контрольных
точках).
Изображение может быть встроенным или наложенным. При установке в
качестве наложения он будет отображаться за всеми другими элементами.
Вы можете использовать только одно наложение изображений на карту.
Text · Текст
Добавьте текст на карточку. Текст всегда будет в полную ширину.
Используйте padding для
добавления интервала вокруг текста.
См. также: Новое в WYSIWYG Web Builder 14
- Cards.
Подробнее об объекте Card
(англ. язык)
 Новые функции:
- добавлена возможность установить шрифт по умолчанию
для новых элементов карты. Семейство шрифтов, цвет и размер можно
задать в свойствах стиля карты.
- добавлена поддержка разделителей формы.
- добавлена возможность добавлять к карточкам стрелку,
похожую на речевой пузырь (Popover -> trigger -> speech bubble).
Размер стрелки можно контролировать с помощью свойства font-size.
- добавлена опция «Показать кнопку закрытия» (Show close
button) в элемент
заголовка. С помощью кнопки закрытия пользователь может скрыть карту.
Например, когда карта используется в режиме «portlets» контейнера карты.
- добавлена возможность установить оформление текста:
нет, подчеркивание или зачеркивание.
Улучшено: ширина элементов изображения теперь также может быть
указана в процентах. Это делает размер изображения пропорциональным
размеру карты, что может быть полезно для адаптивных макетов (см. Сайты для разных
экранов).
Новая функция: добавлена поддержка «Эффектов движения» (эффекты
прокрутки и анимация входа) для отдельных элементов карты, добавлена
поддержка межбуквенного интервала в текстовом элементе, добавлена
возможность устанавливать положение значка и смещение значка элемента
«Кнопка», другие улучшения.
Подробнее
Новое: Section (Раздел) - Функция "Раздел" для создания блоков контента. Раздел работает так же,
как и Card (Карта), но основное отличие состоит в том, что элементы можно
позиционировать (наслаивать). Подробнее
 Новые
функции для
Card (карта) - Добавлена поддержка Affix, к картам добавлена
функция электронной коммерции, добавлена поддержка фигур в
карточках, добавлено свойство «Минимальная высота» для текстовых
элементов, добавлена возможность назначать ссылку на текстовые
элементы карточки, добавлена поддержка событий для текстовых
элементов
карты. Другие улучшения
Подробнее
Popover
Bootstrap Cards можно также использовать как Popover - в основном
использует карту как расширенные подсказки/всплывающее окно, которое
появляется при нажатии или наведении на элемент.
Всплывающие окна могут быть размещены в верхней, правой, нижней левой
части объекта контейнера и могут быть активированы с помощью щелчка,
наведения или фокусировки.
Контейнер для карт (Card Container)
 Новое: Добавлен специальный контейнер для карт (Card Container) , чтобы
упростить раскладку серии карт. Можно добавить анимацию карт, переходы
и многое
другое.
Для создания контейнера для карт используйте Панель вставок
(Toolbox) - раздел Layout
- Card Container.
Контейнер для карт имеет следующие параметры макета:
- колода карт: автоматически выравнивает карты по горизонтали с равной
шириной и высотой (Даже с разной длиной содержимого карт).
- столбцы карточек: организуйте карточки в столбцы. Карты
упорядочены сверху вниз и слева направо.
- карусель: отображает карты в анимированной карусели. Количество
карточек на слайд и интервал настраивается для каждой точки останова.
Также можно установить, сколько карточек будет прокручиваться на
странице. Когда вы устанавливаете отрицательную задержку, карусель
будет непрерывно прокручиваться (как конвейерная лента).
Каруселью карт можно управлять с помощью событий: воспроизведение
мультимедиа, остановка мультимедиа, слайд-шоу вперед, слайд-шоу назад.
Примечание:
конечно, вы все равно можете использовать сетки размещения (Flexbox или Flex Grid) для раскладки карт.
Примеры применения контейнеров для
карт
Новые функции:
- добавлена кнопка «Копировать» для быстрого
клонирования элемента карты.
- Новая функция: добавлена возможность устанавливать выравнивание для
каждого элемента текста по отдельности, включая выравнивание.
- Новая функция: добавлен тип элемента карты HTML. Это добавляет
возможность добавлять пользовательские элементы HTML на карту.
Например, Google Maps, сценарии Facebook и т. Д.
- Новая функция: добавлена возможность добавления отступов между
рамкой и изображением элемента карты.
- Новая функция: добавлена возможность устанавливать высоту строки
для текстовых элементов.
- Новая функция: добавлена поддержка анимации и переходов к элементам
карты. Каждый элемент карты может иметь свои собственные анимации и
переходы! Переходы также могут быть синхронизированы. Это может быть
полезно, если вы хотите запустить все переходы одновременно, когда вы
наводите мышь на карту, а не на каждый элемент карты в отдельности.
Подробнее
- Улучшено: диалог свойств карты теперь можно изменять.
 Новое - Карты
(Cards) - Улучшено: всплывающее окно HTML / CSS / JS обновлено до
Bootstrap 4. Новая функция: добавлено свойство «максимальная ширина»,
добавлен «ручной» (manual) режим триггера, в заголовок добавлена
опция «складной»
(collapsible), добавлен тип «элемент списка» ('list item) и другое.
Подробнее
Новое - Карточный
контейнер (Card Container)- Новые функции: добавлен режим «каменная
кладка» (masonry), добавлено свойство «выравнивание» (alignment') в
контейнер для карточек.
Подробнее
Новая функция: добавлено 4 режима макета: Coverflow, Stack, Cube и
Flip. Добавлена возможность добавлять стрелки навигации в режимы карусели, обложки, стека, куба и переворота.
Подробнее
Card Container
Новые функции:
- добавлена возможность устанавливать интервал между
столбцами для карточных колод. Это устанавливает поле для всех карточек
в контейнере на указанное значение. Чтобы вручную контролировать
отступы
для каждой карты, установите для этого значения значение «0».
- добавлен режим «сетка» (grid), что позволяет легко создавать
сетку (столбцы/строки) с картой
- добавлен режим «portlets». В режиме портлетов
посетитель веб-сайта может переставлять карточки с помощью
перетаскивания. Также карточки можно скрыть или развернуть/свернуть.
Состояние «portlets» будет сохранено до следующего посещения сайта
пользователем (через веб-хранилище). Цвета «заполнителя» перетаскивания
настраиваются. Встроенная функция resetPortletsState() может
использоваться для сброса состояния портлетов (через события).
- добавлена опция «карты одинаковой высоты» (equal height cards).
Указывает, должны ли все карты в одном ряду иметь одинаковую высоту.
Если этот параметр отключен, карточки с разным содержанием могут иметь
разную высоту.
Card Repeater
Новая функция: добавлен объект Card Repeater (Повторитель карты). Повторитель
карточек работает аналогично Card Container (контейнеру карточек), с ключевым отличием:
все карточки внутри него имеют одинаковый макет и стиль. Это означает,
что любая модификация, внесенная в одну карту, автоматически
распространится на все остальные карты в том же контейнере. Конечно,
текст может быть разным для каждой карты!
См. также Новое в
WYSIWYG Web Builder 19
Последнее обновление: январь
2024 г.
|
