List Filter Šajā rakstā ir aprakstīts, kā mainīt Vitextra List Filter tīmekļa daļas krāsu shēmu un izskatu.
Ievads
Vitextra List Filter tīmekļa daļa ļauj izveidot pielāgotu filtrēšanas paneli, lai meklētu datus SharePoint sarakstā vai dokumentu bibliotēkā. Panelis sastāv no tādām vadīklām kā pogas, saraksti un uzraksti.
Šajā rakstā ir aprakstīts, kā pielāgot filtra paneli jūsu korporatīvā portāla zīmolam vai motīvam. Katrai vadīklai, ko renderē List Filter, ir sava CSS klase, tāpēc varat izmantot šo klasi, lai vadīklai piemērotu savu krāsu motīvu.
Stilu lietošana
Lai noformētu filtra paneli, lapā jāreģistrē pielāgots CSS. Vienkāršākais veids ir pievienot Skriptu redaktora (Script Editor) tīmekļa daļu lapai, kurā tiek rādīts filtrs.
Atveriet lapu rediģēšanas režīmā, novietojiet kursoru tīmekļa daļu zonā, dodieties uz IEVIETOT → Tīmekļa daļa un kategorijā Multivide un saturs izvēlieties Skriptu redaktors:
Noklikšķiniet uz Pievienot, lai ievietotu tīmekļa daļu lapā.
Pēc tam Skriptu redaktora tīmekļa daļā noklikšķiniet uz REDIĢĒT FRAGMENTU (EDIT SNIPPET).
Fragmenta dialoglodziņā ielīmējiet savus stilus un noklikšķiniet uz Ievietot.
💡 Padoms
Pievienojiet Skriptu redaktora tīmekļa daļu lapas apakšā, lai tā neatstātu lielu tukšu vietu izkārtojumā.
CSS klašu uzziņu tabula
Izmantojiet šādas CSS klases, lai norādītu filtra paneļa vadīklas:
| Elements | Klase | Vecākelements |
|---|---|---|
| Filtra panelis | .spfilter | |
| Rīkjosla | .spfilter-toolbar | .spfilter |
| Darbību pogu panelis | .spfilter-footer | .spfilter |
| Filtra poga | .spfilter-button-filter | .spfilter-footer |
| Eksportēšanas poga | .spfilter-button-export | .spfilter-footer |
| Lauku konteiners | .spfilter-fields | .spfilter |
| Lauks | .spfilter-field | .spfilter-fields |
| Lauka uzraksts | .spfilter-field-label | .spfilter-field |
| Filtrēšanas vadīkla | .spfilter-field-input | .spfilter-field |
| Saraksta vadīkla | .k-dropdown-wrap | .spfilter-field-input |
📝 Piezīme
Nepārrakstiet saraksta vadīklas stilus tieši ar selektoru .k-dropdown-wrap. Tā vietā izmantojiet konkrētāku selektoru .spfilter .k-dropdown-wrap.
Piemēri
Tālāk sniegti piemēri, kā lietot pielāgotus stilus List Filter tīmekļa daļā.
Krāsu shēmas maiņa
Filtra tīmekļa daļā var pārrakstīt sešas krāsas:
- primārā (#0072c6)
- primārā, uzvedot kursoru (#004c84)
- primārā, aktivizējot (#00467a)
- sekundārā (#f4f4f4)
- sekundārā, uzvedot kursoru (#e2e2e2)
- sekundārā, aktivizējot (#0072c6)
Primārā krāsa tiek izmantota pogām Filtrēt un Eksportēt; sekundārā krāsa - rīkjoslas pogām Kopīgot, Lauki un Iestatījumi.
- piemērs. Krāsu shēmas maiņa uz oranžu
<style>
/* Color of the primary buttons */
.spfilter-footer button {
background-color: #ca5010 !important;
border-color: #ca5010 !important;
}
.spfilter-footer button:hover {
background-color: #da3b01 !important;
border-color: #da3b01 !important;
}
.spfilter-footer button:active {
background-color: #a4262c !important;
border-color: #a4262c !important;
}
/* Color of the secondary buttons */
.spfilter-toolbar button,
.spfilter-toolbar button:hover{
background-color: #c19c00 !important;
border-color: #c19c00 !important;
color: #fff !important;
}
.spfilter-toolbar button:active {
background-color: #ca5010 !important;
border-color: #ca5010 !important;
}
</style>
Rezultāts:
Uzraksta stila maiņa
- piemērs. Lauka uzraksta stila maiņa
<style>
/* Field Label Style */
.spfilter-field-label {
font-weight: normal;
text-transform: uppercase;
}
</style>
Rezultāts:
Saraksta krāsa
- piemērs. Saraksta vadīklas krāsas maiņa
<style>
/* Active List Style */
.spfilter .k-dropdown-wrap.k-state-active {
background-color: #ca5010 !important;
border-color: #ca5010 !important;
}
/* Selected Item Style */
.spfilter .k-list>.k-item.k-state-focused {
background-color: #c19c00 !important;
border-color: #c19c00 !important;
color: #fff !important;
}
</style>
Rezultāts:
Pogu izlīdzināšana
- piemērs. Pogu Filtrēt un Eksportēt pārvietošana pa labi
<style>
/* Buttons position */
.spfilter-footer {
text-align: right;
}
</style>
Rezultāts:
