FHEM Forum

FHEM => Frontends => TabletUI => Thema gestartet von: robertPI am 29 Dezember 2016, 12:59:30

Titel: Anordnung link: Symbol über dem Text
Beitrag von: robertPI am 29 Dezember 2016, 12:59:30
Hallo,

folgender code ergibt ein Symbol mit Text daneben. Ich würde jedoch gerne den Text unter dem jeweiligen Icon darstellen. Im ausgewählten Fall soll Icon und Text farblich hinterlegt sein. Hat jemand eine Idee wie das funktionieren könnte?

<div data-type="link" class="inline narrow"
                     data-width="120" data-height="40"
                     data-color="mint"
                     data-background-color=""
                     data-border-color="gray"
                     data-active-color="white"
                     data-active-background-color="mint"
                     data-active-border-color="mint"
                     data-active-pattern=".*content1.html"
                     data-icon="fa-home"
                     data-url="#page_content1.html"
                     data-load="#content1">Room 1
                </div>

Titel: Antw:Anordnung link: Symbol über dem Text
Beitrag von: setstate am 29 Dezember 2016, 13:10:27
schau mal in dieses Beispiel

https://github.com/knowthelist/fhem-tablet-ui/blob/master/examples/mobil/index_nav_footer.html


<footer>
            <div class="tab-bar" >
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content1"
                         data-url="#content_temps.html"
                         data-icon="fa-dashboard"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_temps.html">
                    </div>
                    <span class="tab-label">Temps</span>
                 </div>
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content2"
                         data-url="#content_lights.html"
                         data-icon="fa-lightbulb-o"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_lights.html">
                    </div>
                    <span class="tab-label">Lights</span>
                 </div>
                <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content3"
                         data-url="#content_windows.html"
                         data-icon="ftui-window"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_windows.html">
                    </div>
                    <span class="tab-label">Window</span>
                 </div>
                 <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content4"
                         data-url="#content_sounds.html"
                         data-icon="fa-music"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_sounds.html">
                    </div>
                    <span class="tab-label">Sound</span>
                 </div>
                 <div class="tab-link" >
                    <div data-type="link"
                         data-load="#content5"
                         data-url="#content_range.html"
                         data-icon="ftui-thermo"
                         data-color="#555"
                         data-active-color="blue"
                         data-active-pattern=".*#content_range.html">
                    </div>
                    <span class="tab-label">Range</span>
                 </div>
                </div>
        </footer>
Titel: Antw:Anordnung link: Symbol über dem Text
Beitrag von: robertPI am 29 Dezember 2016, 13:18:39
Hallo setstate,

vielen Dank für die schnelle Antwort. Von diesem Beispiel komme ich, hier wird nur das ausgewählten Icon farbig und der Text bleibt. Ich möchte dagegen den Hintergrund von Icon und Text ändern, wie im 3.png