ItemComparisonForm, ögeleri seçmek ve ardından bu ögeleri parametre olarak kullanarak bir şablon yüklemek için özelleştirilebilir bir form sağlar.
Installation[]
Usage[]
Bir form oluşturma[]
Bir form oluşturmak için, bir öğeye item-comparison-form sınıfını ekleyin. Formun türü, data-form-type özniteliği kullanılarak belirtilir. Şu anda yalnızca data-form-type="duplicate" desteklenmektedir. Minimum ve maksimum alan sayısı, data-min-fields özniteliği ve data-max-fields özniteliği kullanılarak belirlenir. Yüklemeden sonra alan ekleme veya kaldırma özelliği uygulanmadığından, şu anda yalnızca minimum sayıda alan kullanılmaktadır.
Formda birden fazla alan belirtilebilir ve yinelenen form türü ile, son alandan sonra yinelenenler eklenerek minimum alan sayısına ulaşılana kadar son alan çoğaltılır. Her alan özelleştirilebilir seçenekler menüsü kullanır.
Bir alan oluşturmak için formdaki bir ögeye item-comparison-form__field sınıfını ekleyin. Alanın menü şablonu, data-template özniteliği kullanılarak belirtilir ve statik parametreler, data-static özniteliğinde bir JSON nesne dizesiyle belirtilebilir. Form alanı ögesinin içine item-comparison-form__field-input sınıfına sahip bir etiket ve/veya öğe eklenebilir. Alan giriş ögesi, alan menüsünü değiştirmek için bir düğme görevi görecek ve ayrıca seçilen seçeneğin ekran metnini de içerecektir. data-value özniteliği kullanılarak varsayılan bir seçenek eklenebilir ve varsayılan seçeneğin ekran metni alan giriş öğesinin içine eklenebilir.
Menü şablonunda, seçenek olarak tıklanabilen ögelere item-comparison-option sınıfı eklenmiş olmalıdır. İçerik şablonuna aktarılacak değer, data-value özniteliği kullanılarak belirtilir ve alan giriş ögesinde gösterilecek görüntü metni, data-text özniteliği kullanılarak belirtilir.
Formda, içerik kapsayıcısına içerik yükleyecek bir gönder düğmesi olmalıdır. Formdaki bir öğeye item-comparison-submit sınıfı eklenerek bir gönder düğmesi belirtilebilir. Gönder düğmesinin içerik şablonu, data-template özniteliği kullanılarak belirtilir ve statik parametreler, data-static özniteliğinde bir JSON nesne dizesiyle belirtilebilir.
Bir içerik kapsayıcısı, bir ögeye formun kimliğine karşılık gelen bir kimlik verilerek belirtilebilir. Örneğin, form weapon-comparison kimliğine sahipse, içerik kabının kimliği weapon-comparison-content-container olmalıdır.
Example[]
Form:
<div id="weapon-comparison" class="item-comparison-form" data-form-type="duplicate" data-min-fields="2">
<div class="item-comparison-form__field" data-template="WeaponComparisonMenu">Siah: <span class="item-comparison-form__field-input">
</span></div>
<div class="item-comparison-submit" data-template="WeaponComparison" data-static='{"exclude":"description"}'>Gönder</div>
</div>
<div id="weapon-comparison-content-container"></div>
Alan menüsü:
* <span class="item-comparison-option" data-value="Pulsar VS1" data-text="Pulsar VS1">Pulsar VS1</span>
* <span class="item-comparison-option" data-value="Equinox VE2" data-text="Equinox VE2">Equinox VE2</span>
* <span class="item-comparison-option" data-value="Equinox VE2 Burst" data-text="Equinox VE2 Burst">Equinox VE2 Burst</span>
* <span class="item-comparison-option" data-value="H-V45" data-text="H-V45">H-V45</span>
* <span class="item-comparison-option" data-value="CME" data-text="CME">CME</span>
* <span class="item-comparison-option" data-value="Terminus VX-9" data-text="Terminus VX-9">Terminus VX-9</span>
* <span class="item-comparison-option" data-value="Corvus VA55" data-text="Corvus VA55">Corvus VA55</span>
* <span class="item-comparison-option" data-value="VE-A Lacerta" data-text="VE-A Lacerta">VE-A Lacerta</span>
* <span class="item-comparison-option" data-value="Darkstar" data-text="Darkstar">Darkstar</span>
Credit[]
Aşağıdakilerden ilham alınarak referans olarak kullanılmıştır: