webentwicklung-frage-antwort-db.com.de

Semantic UI - bester Ansatz des UI-Gitters für das Layout (Zeilen/Spalten vs. Segmente)

Ich bin neu bei Semantic UI und versuche, eine Webseite mit dem folgenden Layout zu entwerfen. Bei der Betrachtung der Dokumentation habe ich mich entschieden, ui page grid zu verwenden. Ich habe auch beschlossen, das oberste feste Menü außerhalb des Rasters zu definieren.

enter image description here

Mein erster Ansatz war ungefähr so:

<body>
    <div class="ui page grid">
        <div class="three column row">
            <div class="column"> Horizontal section, column 1</div>
            <div class="column"> Horizontal section, column 2</div>
            <div class="column"> Horizontal section, column 3</div>
        </div>
        <div class="two column row">
            <div class="column"> 
                <div class="row"> Left column, row 1</div>
                <div class="row"> Left column, row 2</div>
                <div class="row"> Left column, row 3</div>
            </div>
            <div class="column">
                <div class="row"> Right column, row 1</div>
                <div class="row"> Right column, row 2</div>
            </div>
        </div>
    </div>
</body>

Meine Frage ist:

Ist es der richtige Ansatz, um ein dem Bild ähnliches Layout zu erreichen? Sollte ich segments verwenden, um den Inhalt anstelle von Zeilen oder Spalten zu teilen?

Danke im Voraus !

gridsemantic-ui
17
Let_IT_roll

Semantic UI wollte, dass segments Teile von Text/Artikeln bedeutet. Sie hinterlassen eine kleine Notiz :

Ein Segment wird verwendet, um eine Gruppe von verwandten Inhalten zu erstellen. Horizontal Segmente werden am effektivsten mit Rastern verwendet, um Text zu berücksichtigen Gruppen, die über Rasterzeilen ausgerichtet sind.

Im Wesentlichen bedeuten sie, dass grid die Grundlage für Ihr Markup ist. Die Variable grid wurde für das Layout der Seite entwickelt.

Sie können segments in Ihrem Raster verwenden, um ähnliche Inhalte zu gruppieren. (Wenn Sie in den Dokumenten mehr nachschauen, können Sie diese Absicht sehen, wenn sie stacked, piled, loading Klassen für segments hat.)

Zum Beispiel möchte ich die drei Zellen unten links als eine Art Nachrichten-Feed haben. Dann würde ich dort Segmente verwenden:

<body>
    <div class="ui page grid">
        <div class="three column row">
            <div class="column"> Horizontal section, column 1</div>
            <div class="column"> Horizontal section, column 2</div>
            <div class="column"> Horizontal section, column 3</div>
        </div>
        <div class="two column row">
            <div class="column"> 
                <div class="ui segment">
                    <div class="ui vertical segment">
                        <p>Left column, row 1</p>
                    </div>
                    <div class="ui vertical segment">
                        <p>Left column, row 2</p>
                    </div>
                    <div class="ui vertical segment">
                        <p>Left column, row 3</p>
                    </div>
                </div>
            </div>
            <div class="column">
                <div class="row"> Right column, row 1</div>
                <div class="row"> Right column, row 2</div>
            </div>
        </div>
    </div>
</body>

Grid with segments

19
garyF

Sie können den stretched grid verwenden, um die Segmente vertikal zu strecken, damit sie die gleiche Höhe haben. Und mit dem .ui.segments können Sie den Code sauber halten. [Online Demo]

 enter image description here

CSS

.segment {
   min-height: 100px;
}

HTML

<div class="ui horizontal segments">
    <div class="segment"></div>
    <div class="segment"></div>
    <div class="segment"></div>
</div>
<div class="ui stretched two column grid">
    <div class="column">
        <div class="ui vertical segments">
            <div class="segment"></div>
            <div class="segment"></div>
            <div class="segment"></div>
        </div>
    </div>
    <div class="column">
        <div class="ui segment"></div>
        <div class="ui segment"></div>
    </div>
</div>
1
Yami Odymel