bh:lottie.settings  

    Settings-Formular-ViewHelper für den bh:lottie.player-ViewHelper
    Es können durch Attribute weitere Einstellungen mitgegeben werden. Wichtig ist, dass innerhalb des <bh:swiper>-Tags ein <div>-Tag und in diesem <div>-Tag die einzelnen Swiper-Slides vorhanden sind.

    Mit dem LottieFiles-Player können LottieFiles (.json) eingebunden und abgespielt werden. Lottie ist ein vektorbasiertes Grafikformat für Animationen, welches auf SVG und JSON basiert. Es wurde von Airbnb entwickelt, um das Einfügen von Animationen auf Webseiten zu erleichtern.

    Attribute

    NameBeschreibungTypedefaultrequired
    nameVariable, in der das Settings-Array gespeichert wird - Zugriff über {cObj.name}stringElement-Rootfalse

    Beispiel

    html
    <bh:lottie.settings name="lottieSettings"></bh:lottie.settings>

    Rückgabewerte

    html
    {namespace bh=TYPO3\Bh\ViewHelpers} <div class="bhe-formsettings-option"> <label data-tooltip="Die Animation wird automatisch abgespielt, sobald die Seite aufgerufen wird." data-tooltip-view="extended">Autoplay</label> <f:form.checkbox name="autoplay" value="1" checked="{currentSettings.autoplay}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="Die Animation wird abgespielt, sobald mit der Maus über das Element gehovert wird." data-tooltip-view="extended">Bei Hover abspielen</label> <f:form.checkbox name="hover" value="1" checked="{currentSettings.hover}" /> </div> <div class="bhe-formsettings-option"> <label>Zeige Steuerung (Wiedergabe, Pause & Slider)</label> <f:form.checkbox name="controls" value="1" checked="{currentSettings.controls}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="Die Animation wird in Dauerschleife abgespielt." data-tooltip-view="extended">Loop</label> <f:form.checkbox name="loop" value="1" checked="{currentSettings.loop}" /> </div> <div class="bhe-formsettings-option"> <label>Geschwindigkeit (z.B. 1 = 100%, 0.5 = 50%)</label> <input type="number" step="0.01" name="{fieldNamePrefix}[speed]" min="0" max="10" value="{currentSettings.speed}" /> </div> <div class="bhe-formsettings-option"> <label data-tooltip="Die Animation wird in verkehrter Richtung abgespielt." data-tooltip-view="extended">Rückwärts abspielen</label> <f:form.checkbox name="backwards" value="1" checked="{currentSettings.backwards}" /> </div> <div class="bhe-formsettings-option"> <label>Ausfüllen (cover)</label> <f:form.checkbox name="cover" value="1" checked="{currentSettings.cover}" /> </div>