Lista produktów

Widok używany w każdej aplikacji, możesz go zastosować np. do listowania produktów, uzytkowników czy innych danych tabelarycznych.

Poniższe zdjęcie przedstawia przykład użycia tego widoku w panelu Shoplo.

Podstawowy kod

W przypadku widoku listy, celowo nie został użyty div z klasą app-span-12, dzięki temu pozbylismy się paddingów po obu stronach i tabela wyswietlona jest w pełnej szerokości kontenera.

<div class="app-row">
	<table class="table tb-bordered">
		<thead>
		    <tr>
		        <th>#</th>
		        <th class="dark">Nazwa kampanii</th>
		        <th>Produkt</th>
		        <th class="text-center">Aktywna</th>
		        <th class="text-center">Ilość wyświetleń</th>
		        <th class="text-center">Ilość kliknięć</th>
		        <th colspan="2" class="text-right"></th>
		    </tr>
		</thead>
		<tbody>
			<tr>
				<td>1</td>
				<td><strong>Kampania testowa 1</strong></td>
				<td>
					<span class="thumb-40">
						<img src="img/vert.jpg">
					</span>
				</td>
				<td class="text-left">
					<div class="checkbox">
						<input type="checkbox" name="active" id="active2">
						<label for="active2"><span>aktywuj</span></label>
					</div>
				</td>
				<td class="text-center"><span class="btn btn-info">12</span></td>
				<td class="text-center"><span class="btn btn-success">21</span></td>
				<td class="action-link pd-left-25">
					<a href=""><span class="glyphicon icon-note "></span></a>
				</td>
				<td class="action-link pd-left-25 pd-right-30">
					<a class="" href="#"><span class="glyphicon icon-trash action-link"></span></a>
				</td>
			</tr>
		</tbody>
	</table>
</div>

Przykład