Pionowa oś czasu

Komponent do tworzenia pionowych osi czasu i prezentacji.

Przykład

Ustawienia:

RXHVLLB15PTPN

Format danych

{image#obrazek1}{position#prawo}Treść bloku z obrazkiem, położony po prawej stronie

{position#lewo} Treść bloku bez obrazka, położony po lewej stronie

Treść bloku bez obrazka, położony domyślnie.

Opis

Zasób w fazie testowej.
Kolejne bloki rozdzielane są 3 hashami: „###”.

Modyfikatory: 
{image#nazwa_obrazka} - dodaje obraz do bloku.
{audio#nazwa_audio} - dodaje plik audio do bloku.
{embed#id} - dodaje zasób do bloku (po zdefiniowaniu można wgrać dowolny zasób, przede wszystkim wideo - razem z możliwością dodawania audiodeskrypcji);
{position#lewo} - ustawia blok po odpowiedniej stronie prawo/lewo. {caption#Podpis pod obrazkiem} - dodaje podpis obrazka. 
{alt#Podpis alternatywny} - dodaje opis WCAG.
{licence#Podpis licencyjny} - dodaje podpis licencyjny pod obrazkiem. {placeholder#Tekst przycisku#Treść placeholdera#Tytuł placeholdera} - dodaje białą aplę zasłaniającą blok - dopiero po kliknięciu na przycisk na niej pojawia się treść bloku.

Jeśli szerokość okna jest zbyt mała, bloczki pokazywane są po jednej stronie. Aby wyświetlić je po obu stronach, należy ustawić komponent na 75%.

Na samym końcu można zdefiniować dodatkowe ustawienia. Ustawienia oddzielone są znakami @@@.
mode=mixed - tryb wyświetlania (mixed/timeline/presentation/impress/verticalpoints)
default_mode=timeline - domyślnie wyświetlany tryb w przypadku ustawienia mixed (do wyboru timeline/presentation)
mark_slides=1 - czy pokazywać dodatkową obwódkę i przyciski przechodzenia między okienkami w trybie timeline
play=1 - czy pokazać przycisk „odtwórz/zatrzymaj prezentację” i automatycznie przechodzić pomiędzy slajdami z wideo/audio

Aby dodać blok z kodem programistycznym, należy opakować go tagiem code. Dodatkowo tag code może przyjmować następujące parametry:
language="python" -> nazwa języka programowania. Domyślnie jest to „python”.
class="pinned" -> przypina kod na samą górę bloku.
highlight="startLine,startCharacter,endLine,endCharacter,color@..." -> zaznacza fragmenty kodu, gdzie startLine oznacza linijkę od której ma się rozpocząć zaznaczanie, startCharacter to numer znaku od którego rozpocząć zaznaczanie, endLine i endCharacter analogicznie, color oznacza kolor zaznaczenia (możliwe wartości: green/red/blue/yellow). Można zdefiniować wiele zaznaczeń, oddzielone są znakiem @.
Przykładowe zaznaczenie: highlight="1,0,4,10,red@5,0,5,15,yellow"

Wstawianie ilustracji

Po wstawieniu tagu image odblokuje się zakładka Załączniki, gdzie w odpowiednie pola przeciągamy ilustracje.