Angularjs material eine Zeile mit 2 Spalten

ich versuche zu erreichen, und kann nicht herausfinden, wie:

|-------------80%--------------------- | ----20%---|

eine Zeile mit 2 Spalten mit bestimmten Breite.

ich etwas nicht verstehe, Säulen (Nutzung von Material) sind für mich Aussehen wie Reihen > in den Zeilen

|------------------------------------- | ----//---|
|------------------------------------- | ----//---|
|------------------------------------- | ----//---|

und nicht wie mein Beispiel.

Wie kann ich es erreichen?

InformationsquelleAutor E.Meir | 2017-04-02

angularjs material-design

4

Nachdem Sie importiert haben, AngularJS und Angular Material (inklusive der css-Datei), müssen Sie es importieren Eckig-Material in Ihrem AngularJS app. Um dies zu tun, müssen Sie den "ngMaterial" - Anbieter in Ihrer AngularJS-Modul, so wie dieses:

var app = angular.module("myApp", ["ngMaterial"]);

(wenn Sie diesen Teil überspringen, es wird nicht funktionieren).

Dann Sie können schreiben Sie Ihre HTML-code wie folgt
```
<div layout="row" layout-wrap>
    <div flex="80">80%</div>
    <div flex="20">20%</div>
</div>
```
So erstellen Sie einen div, der als container fungiert. Es wird Elemente enthalten, die Sie anzeigen möchten, und Sie wird ausgerichtet in einer Zeile und, wenn notwendig, Sie werden dann angezeigt in einer zweiten Reihe. In die flex-Eigenschaft können Sie die Breite (als Prozentsatz) des Elements im Vergleich zu der Breite des Containers.

Natürlich können Sie ändern Sie den Namen Ihres Angular-Modul und die Anzahl/Breite der html-Elemente, wie Sie wollen.

Und dort können Sie einige Beispiele sehen und ein bisschen Dokumentation
- Danke! und was ist, wenn möchte ich hinzufügen, dass eine navigation auf der Seite (oben im Menü), wie kann ich einstellen, vertikalen Platz als die oben genannten? (Menü von 20% und der rest als 80%) ?
- Sie könnte einfach eine Symbolleiste. Es wird auf oben auf dem Bildschirm und, wenn Sie es hinzufügen der css-Eigenschaft position: fixed; wird es immer bleiben an der Spitze, auch beim scrollen einer langen Seite. Es werden auch nicht alle die Arbeit für Sie 🙂 Hier die demos und die Dokumentation
- Danke! was <div layout="row" > <div flex="70" **layout-align="end left"**><div flex="30" **layout-align="center end"**> wie kann ich jede Spalte in bestimmte Richtung?
- Wenn du meinst, "so ändern Sie die Ausrichtung?" Die Antwort ist einfach, ändern Sie einfach den Wert der Eigenschaft layout-align. Die möglichen Werte sind in der docs
- ja das meine ich - so, was schrieb ich in meinem letzten Kommentar wohl zu arbeiten? layout-align [roperty angenommen zu werden, auf ein div ?
- Ja, es sollte arbeiten (entfernen der * )
- versuchte es heute und es hat nicht funktioniert , vielleicht habe ich etwas falsch gemacht? ich sah Sie hier: link, <div layout="row" > <div flex="70" layout-align="start end"> </div> <div flex="20" layout-align="end end"></div></div>
- Setzen Sie die Eigenschaft layout-align auf die div-container (div die layout="row" zu machen, arbeiten).
- nicht verstehen, das sollte ich hinzufügen-diese layout-align zu den div-container? also in meinem Fall <div layout="row" layout-align > wie diese?
- Getestet hab ich es ein wenig. Sie haben viele Optionen, je nachdem, was Ihre Bedürfnisse sind. Also, wenn Sie code verwenden, die ich gepostet, bevor Sie hinzufügen, um die erste Zeile (der HTML-code, den ich gepostet habe) diese Eigenschaft layout-align="end end". Wenn Ihr Kind Elemente sind selbst eine Art von container-und Sie wollen, verwenden Sie die flex - Eigenschaft, müssen Sie die folgende Zeile hinzufügen, die conteiner öffnenden tag layout-align="end end". Wenn Ihre Kinder Elemente sind selbst Container und Sie NICHT verwenden die flex Eigenschaft, können Sie den layout-align="end end" auf das Kind öffnenden tag. Ich hoffe, dass ich dir geholfen habe
- Lassen Sie uns weiter, diese Diskussion im chat.
- Vielen Dank - Sie haben mir sehr geholfen, wenn ich irgendwelche Fragen haben werde ich Sie Kontaktieren, in der privaten (wenn es möglich ist hier durch).
InformationsquelleAutor lorenzo montanari
0

Zuerst müssen Sie erklären:

md-cols Anzahl der Spalten im raster.

In deinem Fall (8+2=10):

<md-grid-list md-cols="10" ...

Dann Ihre Artikel:

<md-grid-tile md-colspan="8">...</md-grid-tile>

<md-grid-tile md-colspan="2">...</md-grid-tile>

Codepen-Beispiel - Eckig Material Docs
- md-colspan ist eine Eigenschaft von raster-Kachel und wenn ich das nicht verwenden grid-list ich verwenden soll flex?
InformationsquelleAutor Erevald

Schreibe einen Kommentar

Du musst angemeldet sein, um einen Kommentar abzugeben.