„Salesforce Lightning UI“ geriausia praktika su SLDS – „Devaktai“ | Technikos tinklaraštis | Kūrėjų bendruomenė

Įvadas

„Salesforce“ galime pritaikyti vartotojo sąsają naudodamiesi „Salesforce“ deklaratyviu požiūriu ir „Aura / LWC“ („Lightning Web Components“) komponentais. Be to, mes naudojame SLD, skirtą turtingam vartotojo sąsajai.

Kodėl SLD?

„Custom UI Development“ SLDS teikia paruoštus naudoti HTML ir CSS (kaskadingumo stiliaus lapus) UI elementus, skirtus „Salesforce“ patirčiai.

Dizaino principai

Plėtros metu turime sutelkti dėmesį į šias sritis

• Aiškumas – Leiskite žmonėms pamatyti, suprasti ir elgtis užtikrintai.
• Efektyvumas – Protingai tikėkitės, kad reikia padėti žmonėms geriau dirbti, protingiau ir greičiau.
• Nuoseklumas – Sukurkite susipažinimą ir sustiprinkite intuiciją, pritaikydami tą patį sprendimą ta pačia problema.
• Grožis – Parodykite pagarbą žmonių laikui ir dėmesį per apgalvotą ir elegantišką meistriškumą. Parodykite pagarbą žmonių laikui ir dėmesį per apgalvotą ir elegantišką meistriškumą.

Tinkinti – nekeiskite branduolio

Jei rašote pasirinktinį CSS, kuris panaikina „Lightning Design System“ stilių, jūs viršijate, o ne tinkate.

Pavyzdys:

LWC

Aura

Aukščiau pateiktame pavyzdyje mes pateikėme LWC ir AURA komponentų CSS pavyzdžius.

• LWC pavyzdyje mes bandome pritaikyti pamušalą. Čia pirmosios dvi eilutės, viršijančios standartines SLDS šerdies apmušalų savybes.

• Aura pavyzdyje mes bandome pritaikyti maržą. Pirmoji eilutė, viršijanti SLDS branduolio kraštą. Antroji eilutė yra geriausias būdas.

Dizaino žetonai

Dizaino žetonai yra įvardijami subjektai, kurie saugo vaizdinių dizaino atributus, tokius kaip paraštės ir tarpai, šriftų dydžiai ir šeimos arba šešiabriauniai spalvų vertės.

„Lightning Web Components“ gali naudoti bet kokį „Lightning Design System Design“ ženklą, pažymėtą pasaulinę prieigą.

Norėdami nurodyti dizaino prieigos raktą savo „Lightning Web“ komponento CSS, naudokite –LWC- priešdėlį ir nurodykite „CamelCase“ ženklo pavadinimą.

Pavyzdys

Kodėl dizainas yra svarbus?

Paimkite pavyzdį: mes ketiname sukurti naują bendruomenės portalą „Experience Cloud“. Tai visiškai pagrįsta figomis. Visi tinklalapiai turės šiuos skyrius.

• Antraštė
• Šoninė juosta
• Turinys
• Poraštė

Šiame skyriuje kai kurios savybės bus įprastos, pavyzdžiui, visuose puslapiuose, pavyzdžiui,

Šrifto spalva, šrifto dydis, šriftų šeima, paraštė ar paminkštinimas, tokios savybės gali būti išlaikytos dizaino žetonuose, taigi CSS failas bus švarios struktūros.

CSS stilius

Pirmiausia praktikuojate gerą CSS higieną. Kelios nykščio taisyklės (sužinokite daugiau MDN!):

• Nenaudokite, pavyzdžiui, su klasėmis, su klasėmis,

Jie kelia jūsų CSS specifiškumą ir sukuria priklausomybę nuo jūsų antkainio, kuris ateityje gali sukelti problemų.

• Venkite ilgų, įdėtų atrankos. Tai yra pagrindinė raudona vėliava, kad jūsų CSS turi specifiškumo problemų, ir jie tik blogės, nebent jūs jais kreipsitės.

• Venkite, pavyzdžiui, „Universal Selector“, * {taisyklės}. Jo diapazonas yra per platus, todėl jis yra per daug nenuspėjamas; Jūs ketinate sau kurti konfliktus.

• Nenaudokite! Svarbi deklaracija kaip plaktukas. Nepaisant retų išimčių, tai yra dar viena raudona vėliava; Jei naudojate! Svarbią deklaraciją kaip paskutinę išeitį, turite diagnozuoti, kodėl.

Kitaip tariant, nerašykite tokio CSS! Tai yra tarsi paskutinis „Bad CSS“ bosas.

Fokusavimo sritys

Yra keletas pagrindinių punktų, kurių galite sekti, kad užtikrintumėte nuoseklų ir veiksmingą įgyvendinimą.

• Stebėkite SLDS dokumentus: Pagrindinis jūsų šaltinis yra „Salesforce Lightning Design System Developer Guide“. Čia pateikiamos išsamios gairės, veiksniai, turintys pavyzdžių.

Žiūrėkite: https://www.lightingdesignsystem.com/

• Reagavimo dizainas: SLD yra su reaguojančiais komponentais, kurie veiks skirtingais ekrano dydžiais. Sukurkite savo komponentus ir išdėstymus, kad jie būtų reaguojantys, užtikrindami nuoseklią patirtį visuose įrenginiuose.

• SLDS CSS klasės ir komunalinės klasės: SLDS pateikia CSS klasių ir komunalinių klasių rinkinį, kurį galite naudoti savo komponentams formuoti. Laikykitės kiek įmanoma daugiau klasių, kad išlaikytumėte nuoseklumą ir sumažintumėte pasirinktinę CSS.

• Naudokite SLDS komponentus: SLDS pateikia iš anksto pastatytų komponentų, tokių kaip

• mygtukai,
• formos,
• Modalai,
• Sąrašo vaizdas
• Stalas ir dar daugiau.

Naudokite šiuos komponentus, o ne kurkite pasirinktinius. Jie yra gerai patikrinami, prieinami ir užtikrina nuoseklią vartotojo patirtį.

• Žiniatinklio prieinamumas: Patikrinkite savo SLDS įgyvendinimą pagal šias prieinamumo gaires.

• Naudokite semantinį žymėjimą,
• Pateikite alternatyvų vaizdų tekstą,

Išbandykite savo komponentus naudodami prieinamumo įrankius, kad įsitikintumėte, jog jie gali naudoti visus.

Žiūrėkite: https://www.w3.org/

• Žiniatinklio našumo optimizavimas: Optimizuokite savo SLDS įgyvendinimą.

• Sumažinkite HTTP užklausų skaičių
• Naudokite SLDS CDN CSS ir „JavaScript“
• Optimizuokite bet kurį pasirinktinį kodą.

• Stebėkite SLDS atnaujinimus: „Salesforce“ reguliariai „FineTune“ SLD su naujais komponentais, funkcijomis ir gairėmis. Paleiskite ryšį su šiais atnaujinimais ir įdiegkite juos į savo dizainą. Tai padės pasinaudoti naujausiais patobulinimais ir užtikrinti suderinamumą su būsimais leidimais.

• Išbandykite visas pagrindines naršykles ir įrenginius: SLDS buvo sukurtas darbui įvairiose naršyklėse ir įrenginiuose. Atidžiai išbandykite savo įgyvendinimą skirtingose ​​naršyklėse, operacinėse sistemose ir įrenginiuose, kad įsitikintumėte, jog viskas gerai.

• Dokumentuokite savo pritaikymus: Jei jums reikia tinkinti SLDS komponentą arba sukurti naują, dokumentuokite paties modulio pakeitimus, kurie kitiems kūrėjams bus lengviau suprasti ir išlaikyti jūsų kodą.

Tiesiog vykdykite šią geriausią praktiką, galite sukurti veiksmingą, prižiūrimą ir patogią žiniatinklio programą naudodami SLD.