Jak umieścić semantyczne elementy interfejsu użytkownika w segmentach w html?

Question

Chciałbym umieścić każdy semantyczny ui item w segment. Jak to zrobić w semantycznym ui/html? Czy powinienem umieścić item wewnątrz segment, segment wewnątrz item, czy też nie?

przedmioty

kod przedmioty:

<div class="ui divided items"> 
    <div class="item"> 
    <div class="image"> 
     <img src="/images/wireframe/image.png"> 
    </div> 
    <div class="content"> 
     <a class="header">12 Years a Slave</a> 
     <div class="meta"> 
     <span class="cinema">Union Square 14</span> 
     </div> 
     <div class="description"> 
     <p></p> 
     </div> 
     <div class="extra"> 
     <div class="ui label">IMAX</div> 
     <div class="ui label"><i class="globe icon"></i> Additional Languages</div> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <div class="image"> 
     <img src="/images/wireframe/image.png"> 
    </div> 
    <div class="content"> 
     <a class="header">My Neighbor Totoro</a> 
     <div class="meta"> 
     <span class="cinema">IFC Cinema</span> 
     </div> 
     <div class="description"> 
     <p></p> 
     </div> 
     <div class="extra"> 
     <div class="ui right floated primary button"> 
      Buy tickets 
      <i class="right chevron icon"></i> 
     </div> 
     <div class="ui label">Limited</div> 
     </div> 
    </div> 
    </div> 
    <div class="item"> 
    <div class="image"> 
     <img src="/images/wireframe/image.png"> 
    </div> 
    <div class="content"> 
     <a class="header">Watchmen</a> 
     <div class="meta"> 
     <span class="cinema">IFC</span> 
     </div> 
     <div class="description"> 
     <p></p> 
     </div> 
     <div class="extra"> 
     <div class="ui right floated primary button"> 
      Buy tickets 
      <i class="right chevron icon"></i> 
     </div> 
     </div> 
    </div> 
    </div> 
</div> 

Segment:

kod Segment:

<div class="ui segment"> 
</div> 

Answer 1

semantyczna UI Items i Segments nie są zaprojektowane do pracy razem (ja po prostu wpadł tym samym numerze) więc moje obejście było dodać wymaganą css do mojego arkusza stylów stosowanych do .ui.segment.item element (można go również umieścić w szablonach programu SCSS i użyć zmiennych scss dla kolorów, odstępów itp. Zamiast tego skompilować go w niestandardową kompilację semantic-ui dla swojej witryny).

Tak więc można stosować zarówno .item i .segment stylów do tych bloków, które chcą mieć oba style (dla wszelkich odmian takich jak piled lub compact, trzeba by obejmować takie odmiany jak style niestandardowe też oczywiście).

Zrobiłem to w ten sposób, ponieważ style segmentu są dość niezależne, ale te dla przedmiotu są dość obszerne, więc byłyby trudniejsze do odtworzenia dokładnie.

Wbudowany w kodzie biegacza nie wydaje się, aby wyświetlić poprawnie, więc o to skrzypce z ten sam kod działa poprawnie: https://jsfiddle.net/nw8nte4b/

`` `

.ui.segment.item { 
 
    position: relative; 
 
    background: #fff; 
 
    box-shadow: 0px 1px 2px 0 rgba(34, 36, 38, 0.15); 
 
    margin: 1rem 0; 
 
    padding: 1em; 
 
    border-radius: 0.25rem; 
 
    border: 1px solid rgba(34, 36, 38, 0.15); 
 
}

<link href="https://oss.maxcdn.com/semantic-ui/2.2.4/semantic.min.css" rel="stylesheet" /> 
 

 
<div class="ui centered padded grid"> 
 
    <div class="ten wide column"> 
 

 
    <div class="ui items"> 
 
     <div class="ui item segment"> 
 
     <div class="image"> 
 
      <img src="http://semantic-ui.com/images/wireframe/image.png"> 
 
     </div> 
 
     <div class="content"> 
 
      <a class="header">12 Years a Slave</a> 
 
      <div class="meta"> 
 
      <span class="cinema">Union Square 14</span> 
 
      </div> 
 
      <div class="description"> 
 
      <p></p> 
 
      </div> 
 
      <div class="extra"> 
 
      <div class="ui label">IMAX</div> 
 
      <div class="ui label"><i class="globe icon"></i> Additional Languages</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="ui item segment"> 
 
     <div class="image"> 
 
      <img src="http://semantic-ui.com/images/wireframe/image.png"> 
 
     </div> 
 
     <div class="content"> 
 
      <a class="header">My Neighbor Totoro</a> 
 
      <div class="meta"> 
 
      <span class="cinema">IFC Cinema</span> 
 
      </div> 
 
      <div class="description"> 
 
      <p></p> 
 
      </div> 
 
      <div class="extra"> 
 
      <div class="ui right floated primary button"> 
 
       Buy tickets 
 
       <i class="right chevron icon"></i> 
 
      </div> 
 
      <div class="ui label">Limited</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class="ui item segment"> 
 
     <div class="image"> 
 
      <img src="http://semantic-ui.com/images/wireframe/image.png"> 
 
     </div> 
 
     <div class="content"> 
 
      <a class="header">Watchmen</a> 
 
      <div class="meta"> 
 
      <span class="cinema">IFC</span> 
 
      </div> 
 
      <div class="description"> 
 
      <p></p> 
 
      </div> 
 
      <div class="extra"> 
 
      <div class="ui right floated primary button"> 
 
       Buy tickets 
 
       <i class="right chevron icon"></i> 
 
      </div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 

 
    </div> 
 
</div>

`` `