Banner
Props - Array (опционально)
interface Props {
banners?: TBanner[]
}
По умолчанию: данные из src/data/banners.json
Использование
---
import Banner from '@/blocks/banner/Banner.astro';
const arrayBanners = [
{
"imageUrl": "https://site.com/img/image.webp" // required
},
{
"imageUrl": "https://site.com/img/image2.webp" // required
},
];
---
<Banner banners={arrayBanners} />
Параметры
type TBanner = {
id?: number
show?: boolean
type?: string
view?: string
videoUrl?: string
imageUrl: string
tabletImageUrl?: string
mobileImageUrl?: string
imagePosition?: string
bannerUrl?: string
target?: string
gradient?: boolean
title?: string
descr?: string
btn?: string
btnUrl?: string
btnColor?: string
dataTitle?: string
dataFormName?: string
badge?: TBadge
autoplay?: number
}
type TBadge = {
autoname?: string
title?: string
descr?: string
image?: string
position?: string
colorText?: string
bg?: boolean
}
| Имя параметра | По умолчанию | Описание |
|---|---|---|
| imageUrl | * | Обязательный параметр. Изображение для десктоп или для постера видео |
| id | - | Необязательный параметр |
| show | true | Параметр показа слайда, true or false. Необязательный параметр |
| type | image | Тип слайда - video or image. Необязательный параметр |
| view | link | Тип кнопки - link, popup-link, scroll-link. Необязательный параметр |
| videoUrl | - | Обязательный, если type === video |
| tabletImageUrl | - | Изображение для планшетов. Необязательный параметр |
| mobileImageUrl | - | Изображение для мобильных. Необязательный параметр |
| imagePosition | center | Необязательный параметр, bottom, top, center |
| bannerUrl | - | Если btn пустой, а этот параметр заполнен, то слайд будет ссылкой |
| target | - | Если bannerUrl заполнен, можно указать в какой вкладке открыть окно, например _blank (в новой). Необязательный параметр |
| gradient | true | Верхнее затемнение под текстом. Необязательный параметр |
| title | - | Заголовок в слайде. Возможность передать HTML теги. Если, например, изображение уже с текстом, можно оставить пустым. Необязательный параметр. |
| descr | - | Подзаголовок. Возможность передать HTML теги. Если, например, изображение уже с текстом, можно оставить пустым. Необязательный параметр |
| btn | - | Текст кнопки. Если кнопка не нужна, например, bannerUrl заполнен. Необязательный параметр |
| btnUrl | - | Ссылка для кнопки. Необязательный параметр |
| btnColor | white | Цвет кнопки, все доступные стили из src/components/Button/buttons.scss. Необязательный параметр |
| dataTitle | - | Заголовок модального окна. Обязательный, если view === popup-link |
| dataFormName | - | Имя формы в модальном окне. Обязательный, если view === popup-link |
| badge | - | type TBadge, см. ниже. Необязательный параметр |
| autoplay | 5000 | Заддержка слайда в милесекундах. Необязательный параметр |
TBadge
| Имя параметра | По умолчанию | Описание |
|---|---|---|
| autoname | - | Название автомобиля (бренда), возможность передать HTML теги. Отобразится, если заполнен |
| title | - | Заголовок, возможность передать HTML теги. Отобразится, если заполнен |
| descr | - | Описание, возможность передать HTML теги. Отобразится, если заполнен |
| image | - | Изображение. Отобразится, если заполнен |
| position | center | Позиция бейджа, left, right, center. Необязательный параметр |
| colorText | white | Цвет текста, black, white. Необязательный параметр |
| bg | false | Полупрозрачный белый фон. Необязательный параметр |