Widok opcji

Ten widok pokazuje, jak w szybki sposób stworzyć stronę z ustawieniami dla Twojej aplikacji.
Kod nie został oparty o układ tebelaryczny, dzięki czemu zachowuje pełną responsywność

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

Podstawowy kod

Dla uzyskania widoku zblożonego do tabeli, służą klasy pomocnicze .app-table-look - odpowiednik znacznika <table>, .app-table-tr, .app-table-td oznaczją odpowiednio <tr> i <td>

<div class="app-row app-table-look">
	<div class="app-span-12 app-table-tr">
        <div class="app-row">
            <div class="app-span-3 section-header">
                <h2 class="">Ustawienia ogólne</h2>
                <p>Opisz sprzedawany produkt jak najdokładniej.</p>
            </div>
            <div class="app-span-9 horizontal-form">
                <div class="app-row">
                    <div class="form-group app-span-12 app-table-td">
                        <div class="app-row">
                            <label for="campaignName" class="app-span-7">Nazwa kampanii</label>
                            <div class="app-span-5">
                                <input type="text" name="campaignName" 
                                placeholder="Moja kampania" 
                                id="campaignName" class="form-control ">
                            </div>
                        </div>
                    </div>
                    <div class="form-group app-span-12 app-table-td">
                        <div class="app-row">
                            <label for="campaignTitle" class="app-span-7">Nagłówek kampanii</label>
                            <div class="app-span-5">
                                <input type="text" name="campaignTitle"
                                placeholder="Zobacz inne produkty"
                                id="campaignTitle" class="form-control">
                            </div>
                        </div>
                    </div>
                    <div class="form-group app-span-12 app-table-td">
                    	<div class="app-row">
                            <label for="campaignDescription" class="app-span-7">Opis oferty</label>
                            <div class="app-span-5">
                                <textarea rows="3" name="campaignDescription" 
                                id="campaignDescription" class="form-control"></textarea>
                            </div>
                    	</div>
                    </div>
                    <div class="form-group app-span-12 app-table-td">
                    	<div class="app-row">
                            <label for="active" class="app-span-7">Kampania aktywna</label>
                            <div class="checkbox app-span-5">
                            	<div class="pull-right">
                                <input type="checkbox" name="active" checked="checked" id="active">
                                <label for="active"></label>
                                </div>
                            </div>
                    	</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Przykład