Vor kurzem schreibe ich ein einfaches Layout -Framework, aber die Funktionen sind tatsächlich ähnlich. Ziel ist es jedoch, so einfach wie möglich Code zu verwenden, um einige wesentliche Funktionen zu implementieren. Es wird in einigen Fällen verwendet, bei denen eine Ladungsgeschwindigkeit erforderlich ist.
CSS -Teil
.flex-row, .flex {display: -Webkit-flex; Anzeige: Flex; Flex-Regisseur: Zeile;}. Flex-Col {Anzeige: -Webkit-flex; Anzeige: Flex; Flex-Region: Spalte;}JavaScript -Teil
.directive ('flex', [function () {retrict {prestrict: 'a', scope: {'flex': '='}, link: function (s, e, a) {e.css ('flexgrow', s.flex);}};}]);Verwendung:
<div> <div flex = "1"> ein </div> <div flex = "6"> zwei </div> </div>
Das obige ist die AngularJS -Implementierung des vom Editor eingeführten elastischen Box -Layouts. Ich hoffe, es wird für alle hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird allen rechtzeitig antworten. Vielen Dank für Ihre Unterstützung auf der Wulin.com -Website!