1::Первая презентация на Reveler
Для начала написания презентации на Reveler нам просто нужно создать файл с расширением *. vptx или *. html. Если вы их создали, то у вас уже есть ваша первая презентация, но она не откроется😅. Для того чтобы она открылась вам нужно написать структуру презентации, давайте её напишем.
Вся презентация пишется внутри тега <presentation>, всё что снаруже него отображатся и обрабатыватся не будет, так что писать там бессмыслено.
Слайды
Но это пустая презентация и она совершенно беспалезна. Давайте добавим хотябы один слайд и это делается очень легко, с помощью тега <slide>.
Это создаст самый простой слайд у которого есть сверху заголовок и текстом текстом по центру, ничего интересного. Но все слайды делаются точно также. Внутри тега <slide> пишется разметка слайда и вы можете сделать грид слайда совершенно любой, какой вам захочется
Тег <slide> это обёртка для вашего слайда и его тоже можно стилизовать. У него по стандарту очень темный фон, но добавив ему класс который меняет цвет фона вы поменяете цвет фона у всего слайда или можете добавив ему отступы. У слайда есть некоторые стандартные классы UnoCSS который дают ему некоторые стили: class=«relative box-border w-screen h-screen flex-center p-0».
Добавляя свои стили вы затираете стандартные, если они конфликтуют.
Но для цвета фона и цвета текста есть специальные атрибуды <slide background="#1d4ed8" text="#333333" >, лучше использовать их, а не классы.
Создав ещё один слайд у вас появится возможность перелистывать слайды. Это можно сделать несколькими способами:
- ←H ↓J ↑K →L — те кому знаком vim я думаю понравится такая навигация
- Обычные стрелочки на клавиатуре
- Если в теге <presentation> вы напишете атребут control=«true», на экране (снизу справа) появится панель навигации со стрелачками навигации и при нажатии на них вы можете переключатся между слайдами
Группы слайдов
Но мы пока что можем перемещатся только вверх и вниз, ведь у нас только одинарные слайды и нет ни одной группы слайдов. Так давайте её добавим.
И теперь с такой структурой переключившись на второй слайд (вниз) мы сможем передвинутся вправо, чтобы посмотреть следующий слайд во второй строке. Ничего сложного
Именно с помощью таких конструкций пишутся презентации на Reveler
Небольшие настройки стилей
Но есть дополнительные фишечки для стилизации вашей презентации. Например если у вас все слайды должны быть не стандартного цвета вы можете настроить всю презентацию. Просто добавте атребут background со значением вашего фонового цвета и все слайды окрасятся в этот цвет. Так же можно сделать и с цветом текста. Эти атребуты работают так же как и у тега <slide>, но цвета применятся ко всем слайдам, если конечно вы их не перепишете в самом слайде.