md-Registerkarte Etikett vorzeigen nicht vollständig in der mobilen Ansicht

Ich verwende eine md-tab-Gruppe eine Reihe von Registerkarten wie folgt darstellen:md-Registerkarte Etikett vorzeigen nicht vollständig in der mobilen Ansicht

<md-tab-group md-stretch-tabs> 
    <md-tab label="ALL"> 
     ... 
    </md-tab> 
    <md-tab label="MAPS"> 
     ... 
    </md-tab> 
    <md-tab label="NEWS & EVENTS"> 
     ... 
    </md-tab> 
    <md-tab label="STAFF"> 
     ... 
    </md-tab> 
</md-tab-group>

Die Etiketten werden auf dem Browser auf meinem Desktop fein , aber sobald ich in die mobile Ansicht umschalte, wird die Registerkarte "NEWS & EVENTS" abgeschnitten. Alles was ich sehen kann (abhängig von der Bildschirmgröße) ist "NEWS &" und der Rest ist abgeschnitten. Auch wenn ich auf die Registerkarte klicke, wird das vollständige Etikett nicht angezeigt.

Gibt es eine Möglichkeit, das gesamte Etikett anzuzeigen?

Quelle

2017-08-24 bawse

Können Sie einen Plünderer machen? Tabs auf Mobilgeräten sind aus diesem Grund oft nicht ideal. In der Tabs-Komponente, die ich geschrieben habe, habe ich einfach gemacht, dass die Labels anfangen übereinander zu stapeln, anstatt zu schrumpfen und den Text auszuschneiden. Viele Websites wechseln zu kleinen Symbolen anstelle von Textbeschriftungen, damit sie passen. – diopside

Ich bin ziemlich neu in Angular. Wie gehe ich vor, um einen Plünderer zu schaffen? Können Sie auch ein Beispiel dafür geben, wie die Etiketten übereinander gestapelt sind? – bawse

Also hier zum Beispiel - http://imgur.com/a/j7Ey7 – diopside

Das Problem hier ist, dass Sie md-stretch-tabs Attribut in Ihrem md-tab-group verwenden.

md-stretch-tabs wird Ihre Tabs-Gruppenüberschriftsleiste strecken und allen Registerbeschriftungen die gleiche Breite geben. Entfernen Sie diese Eigenschaft und Sie erhalten es wie Sie wollen.

Aktualisierung plunker demo.

Quelle

2017-08-25 06:18:34 Faisal

Dies scheint nicht wirklich eine vollständige Lösung zu sein ... viele mobile Bildschirme sind zwischen 320 px und 540 px in der Breite, und das würde immer noch die Etiketten bei diesen Größen abschneiden. – diopside

Dies ist die komplette Lösung für Tabs. Auf kleineren Bildschirmen bietet der Kopf der Registerkarte automatisch die Rück- und die nächsten Pfeile. Ob der Inhalt abgeschnitten wird, hängt vom Benutzerdesign ab, aber diese Lösung lässt das Löschen von Tab-Labels nicht zu. Bitte sehen Sie sich die Demo an, die ich zur Verfügung gestellt habe. – Faisal

Ja, ich sage nicht, dass du falsch liegst. Ich habe mir den Plunker angesehen. Ich sage nur, es klang so, als ob OP eine Lösung wünschte, bei der sie überhaupt nicht abgeschnitten werden würden. Deshalb hat mein ursprünglicher Kommentar angedeutet, dass er mit Tabs auf dem Handy kein Glück mehr hat. viele Menschen haben aufgehört, sie auf Handy zu verwenden – diopside

md-Registerkarte Etikett vorzeigen nicht vollständig in der mobilen Ansicht

Antwort

Verwandte Themen