Ekspordi Element laseb sul klõpsata mis tahes elemendil veebilehel ja eksportida selle täielik struktuur kolmes vormingus: toore HTML markup koos kõikide laste ja atribuutidega, arvutatud CSS stiilid puhta stiililehe kujul või struktureeritud JSON esitusena. Ideaalne tööriist disainimustrite ekstraktimiseks, koodifragmentide salvestamiseks ja UI komponentide dokumenteerimiseks.
Igal arendajal on hetki, mil ta peab ekstraktima koodi olemasolevalt lehelt — võib-olla on see kaunilt stiilitud kaardikomponent, hästi struktureeritud navigeerimisriba või vormipaigutus, mida tahad jäljendada. Tavaliselt tähendab see paremklõpsamist, "Inspekteeri Elementi", HTML-i käsitsi kopeerimist Elements paneelist ja seejärel CSS-i eraldi ekstraktimist Styles paneelist. Ekspordi Element konsolideerib selle ühte klõpsu. Vali mis tahes element ja saa selle täielik HTML, täielik arvutatud CSS või struktureeritud JSON esitus — igaüks oma vahekaardil, vormindatud ja kasutamiseks valmis. HTML eksport sisaldab elementi ja kõiki selle lapsi õige taandega. CSS eksport näitab iga arvutatud stiili (mitte ainult kirjutatud stiile), nii et saad täpse välimuse, mida brauser renderdab. JSON eksport pakub struktureeritud andmete esitust, mis on kasulik dokumenteerimiseks, testimiseks või programmiliseks analüüsiks.
<div class="pricing-card">
<div class="card-header">
<img src="icon.svg"/>
<h3>Pricing Card</h3>
</div>
<p>$29.99/month</p>
<button>Subscribe</button>
</div>
Hangi valitud elemendi täielik HTML markup, sealhulgas kõik lapsed, atribuudid ja sisestatud struktuur. Väljund on korralikult taandega ja vormindatud — mitte üherealine sasipundar, mida saad outerHTML-ist. Valmis kleepimiseks uude HTML faili või komponendi malli.
Ekstrakti elemendi iga arvutatud CSS omadus puhta, vormindatud stiililehena. Sisaldab tüpograafiat, värve, vahesid, ääriseid, paigutust ja positsioneerimist. CSS on see, mida brauser tegelikult renderdab — võttes arvesse pärandit, spetsiifilisust ja kaskaadi.
Hangi JSON objekt, mis sisaldab elemendi siltinime, atribuutide kaarti, arvutatud stiile, sisemist tekstisisu ja rekursiivset laste massiivi. Kasulik programmiliseks analüüsiks, dokumenteerimiseks, testimise fixtures'iteks või kohandatud tööriistade ehitamiseks.
Vaheta HTML, CSS ja JSON vahekaartide vahel koheselt. Iga vorming genereeritakse samast valitud elemendist, nii et saad haarata ükskõik millise esituse, mida vajad. Kõik kolm on alati saadaval ilma elementi uuesti valimata.
Iga ekspordivorming kuvatakse süntaksi esiletõstmisega eelvaate paneelis. HTML sildid punases, atribuudid kollases, väärtused rohelises. CSS omadused lillas, väärtused rohelises. JSON võtmed ja väärtused on värvikoodiga. Lihtne lugeda enne kopeerimist.
Klõpsa Kopeeri nupul, et haarata praeguse vahekaardi sisu. Olekuriba näitab ekspordi ridade arvu ja baidisuurust, et teaksid, kui palju sisu kopeerid. Kinnituse tagasiside näitab, kui kopeerimine õnnestub.
Leidsid kaardi, hero sektsiooni või navigeerimisriba, mida tahad jäljendada? Klõpsa sellel, ekspordi HTML struktuuriks, seejärel ekspordi CSS stiilimiseks. Sul on täielik lähtepunkt oma komponendi jaoks.
Ekspordi elemendid JSON-na dokumenteerimiseks või disainisüsteemi kirjete jaoks. Struktureeritud esitus sisaldab siltinimesid, atribuute ja stiile — ideaalne komponentide inventuuri pidamiseks või dokumenteerimise tööriistadesse söötmiseks.
Vajad HTML fixtures'eid ühiktestide jaoks? Ekspordi elemendi HTML ja kleebi see oma testfaili. Väljund on puhas ja vormindatud, valmis kasutamiseks DOM hetkepildina komponentide testimisel.
CSS eksport näitab arvutatud stiile — mida brauser tegelikult renderdab pärast kõikide CSS reeglite rakendamist. Võrdle arvutatud väljundit oma kirjutatud CSS-iga, et leida spetsiifilisuse konflikte, pärandi tühistusi või ootamatuid vaikeväärtusi.
Kopeeri elegantsed implementatsioonid tootmise saitidelt isiklikku koodifragmentide raamatukokku. Ekspordi nii HTML kui CSS koos, et säilitada täielik komponent — struktuur ja stiil — tulevikuks viiteks.
Ava DevSuite Pro hõljuv dokk ja klõpsa Ekspordi Element ikoonil. Kursor muutub sihiku valijaks ja avaneb vahekaardiline ekspordipaneel.
Klõpsa lehel mis tahes elemendil. See tõstetakse esile lilla äärisega ja ekspordipaneel täitub elemendi HTML, CSS ja JSON esitustega kolmel vahekaardil.
Klõpsa HTML, CSS või JSON vahekaardil, et vaadata elementi erinevates vormingutes. Iga vahekaart näitab süntaksi esiletõstmisega vormindatud eelvaate ekspordi sisust.
Skanni eelvaadet, et veenduda, kas see sisaldab vajalikku. Klõpsa "Kopeeri" nupul, et panna praeguse vahekaardi sisu lõikepuhvrisse. Olekuriba näitab ridade arvu ja suurust.
Klõpsa lehel teisel elemendil, et uuendada ekspordipaneeli uue sisuga. Pole vaja deaktiveerida — jätka klõpsamist, et eksportida mitut elementi.
Paigaldage DevSuite Pro tasuta ja avage 39+ arendustööriista oma brauserile.