gelöst [FTUI3] Scrollabel geht das in V3

[Medel]

In der Version2 gab es das "scrolllabel".  Gibt es die Möglichkeit einen Lauftext zu erzeugen auch bei der Version 3? Man kann zwar "scroll" einfügen aber dann werden ggf. nur die Balken angezeigt.

[grossmaggul]

Soweit ich weiß gibt es das noch nicht bei FTUI3.

[mr_petz]

Dafür gibt es die class marquee Bsp.:

Code Auswählen Erweitern


<ftui-label text="marquee width 100" unit="%" class="marquee"></ftui-label>

https://github.com/knowthelist/ftui/blob/master/www/ftui/ftui.css#L417
Das ist eine Laufschrift von rechts nach links.
Wenn du eine von oben nach unten möchtest, dann musst du dir eine Eigene class erstellen mit translateY().
scroll bewirkt einen Zeilenumbruch und gibt scrollbalken aus...

LG

[grossmaggul]

Warum sacht mir denn keiner, daß das geht?

[mr_petz]

Gesagt...

LG

[grossmaggul]

 

Aber wenn man sowas hat, dann funktioniert das mit marquee nicht, oder mache ich was faslch?

Code Auswählen Erweitern

<ftui-label [text]="vbirthdays:t_001_bdate"
                 [class-name]="vbirthdays:t_001_daysleft | map('0:blink,1:')" class="marquee">
</ftui-label>

[mr_petz]

blink und marquee zusammen in einem ftui-label funktionieren so nicht, weil sie beides animationen sind.
Da musst du einen umweg gehen mit einer cell oder row Bsp.:

Code Auswählen Erweitern


<ftui-row class="marquee">
  <ftui-label [text]="vbirthdays:t_001_bdate"
                 [class-name]="vbirthdays:t_001_daysleft | map('0:blink,1:')">
  </ftui-label>
</ftui-row>

so ist bissl besser wenn du noch ein width mitgibst:

Code Auswählen Erweitern


<ftui-cell width="50%">
  <ftui-cell class="marquee">
    <ftui-label [text]="vbirthdays:t_001_bdate" width="100%"
                [class-name]="vbirthdays:t_001_daysleft | map('0:blink,1:')">
    </ftui-label>
  </ftui-cell>
</ftui-cell>


LG mr_petz

[grossmaggul]

Danke, macht Sinn, allerdings läuft das bei mir nicht so, wie bei Deinem angehängten Gif.

Der Text kommt rechts herausgefahren läuft über die gesamte Fläche, "stößt" dann aber an der linken Seite an und kommt rechts wieder zum Vorschein.
Also kein kontinuierliches Durchlaufen, sondern eher ein Springen.

[mr_petz]

Ja das Verhalten ist so. Das liegt am:

Code Auswählen Erweitern


text-indent: 0%;

von hier:
https://github.com/knowthelist/ftui/blob/master/www/ftui/ftui.css#L470

Da müsste man:

Code Auswählen Erweitern


  0% {
    text-indent: 100%
  }
  100% {
    text-indent: -100%
  }

angeben...

Mein gif ist nur ein Ausschnitt...
Du kannst dir ja ein eigenes marquee erstellen...

LG

[grossmaggul]

Du kannst dir ja ein eigenes marquee erstellen...

Danke für die Aufklärung, habe es eingebaut, läuft.
Falls es jemand gebrauchen kann, folgendes habe ich in meiner user.css ergänzt:

Code Auswählen Erweitern


/* Marquee - Lauftext */
.marquee2 {
  width: 100%;
  margin: auto;
  padding: 2px;
  overflow: hidden;
  white-space: nowrap;
  animation: marquee2 10s linear infinite;
}

@keyframes marquee2 {
  0% {
    text-indent: 100%
  }
  100% {
    text-indent: -100%
  }
}


[mr_petz]

Sehr gut
Ich sag dir wieder was 
Es würde auch nur dieser Eintrag in der user.css ausreichen:

Code Auswählen Erweitern


@keyframes marquee {
  0% {
    text-indent: 100%
  }
  100% {
    text-indent: -100%
  }
}

und lässt das class="marquee" wie es ist. Der Rest kommt ja schon von der ftui.css.
user.css muss aber nach der ftui.css kommen...

Hier noch ein Beispiel für vertical:

Code Auswählen Erweitern


<ftui-cell width="30%" height="10%" style="overflow:hidden;">
  <ftui-cell class="marqueeV">
    <ftui-label text="Das ist ein Text, der in vertical automatisch scrollt..." text-align="center" scroll>
    </ftui-label>
  </ftui-cell>
</ftui-cell>


Code Auswählen Erweitern


.marqueeV {
    position: relative;
    animation: marqueeV 4s linear infinite;
}

@keyframes marqueeV {
    0%   { top: 100% }
    100% { top: -100% }
}


LG

[grossmaggul]

Es würde auch nur dieser Eintrag in der user.css ausreichen:

O.K., danke, werde ich ändern.

[Badflex]

Hallo!
Danke dafür. Wusste nicht das das geht.
Ich wollte das in meine Übersicht der offenen Fenster einbauen.
Leider erkennt er nicht das der Text manchmal länger und manchmal kürzer ist.
Kann man das irgendwie anpassen das er nur scrollt wenn der Text zu lang für das Feld ist?

Wenn er zu lang ist bzw. mehrere Wörter, weil die ja automatisch eingefügt werden, hört er mitten drinn auf.
Kann man das auch fixen?