← ወደ ባህሪያት ይመለሱ
Pro

ኤለመንት ወደ ውጪ ላክ

ኤለመንት ወደ ውጪ ላክ በማንኛውም ድረ-ገጽ ላይ ማንኛውንም ኤለመንት ጠቅ አድርገው ሙሉ መዋቅሩን በሶስት ቅርጸቶች ይላኩ — ጥሬ HTML markup ከሁሉም ልጆችና ባህሪያት ጋር፣ የተሰላ CSS ስታይሎች እንደ ንጹህ ስታይልሺት፣ ወይም የተዋቀረ JSON ውክልና። ለንድፍ ቅጦች ማውጣት፣ ኮድ ቅጥቢቶችን ማስቀመጥ፣ እና UI ክፍሎችን መመዝገብ ፍጹም መሳሪያ።

ማንኛውም ገንቢ ከነባር ገጽ ኮድ ማውጣት የሚፈልግበት ጊዜ አለ — ምናልባት በሚያምር ሁኔታ የተቀረጸ ካርድ፣ በደንብ የተዋቀረ ናቪጌሽን ባር፣ ወይም ለመድገም የሚፈልጉት ቅጽ አቀማመጥ ሊሆን ይችላል። ኤለመንት ወደ ውጪ ላክ ይህን ሁሉ በአንድ ጠቅታ ያስተካክላል። ማንኛውንም ኤለመንት ይምረጡ እና ሙሉ HTML፣ ሙሉ የተሰላ CSS፣ ወይም የተዋቀረ JSON ውክልናውን ያግኙ — እያንዳንዳቸው በራሳቸው ትር ውስጥ፣ በቅርጸት የተደረገ እና ለአጠቃቀም ዝግጁ።

የቀጥታ ቅድመ እይታ
example.com/components
Click any element to export
Pricing Card
Selected for export
$29.99/month
Subscribe
Export Element
HTML CSS JSON
<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>
7 lines · 248 bytes Copy HTML
ቁልፍ ባህሪያት

እንደ ንጹህ HTML ላክ

የተመረጠው ኤለመንት ሙሉ HTML markup ሁሉንም ልጆች፣ ባህሪያት እና ያለውን መዋቅር ያካትታል። ውፅዓቱ በትክክል ገብቷል — ወደ አዲስ HTML ፋይል ወይም ክፍል ቤተ-ፍርግም ለመለጠፍ ዝግጁ።

እንደ የተሰላ CSS ላክ

ለኤለመንቱ ያለውን እያንዳንዱ የተሰላ CSS ባህሪ እንደ ንጹህ፣ በቅርጸት የተደረገ ስታይልሺት ያውጡ። ብራውዘሩ ሁሉንም CSS ደንቦች ከተተገበረ በኋላ ምን እንደሚያሳይ — ታይፖግራፊ፣ ቀለሞች፣ ስፔሲንግ፣ ድንበሮች፣ አቀማመጥ እና ቦታ ያካትታል።

እንደ የተዋቀረ JSON ላክ

የኤለመንቱን tag ስም፣ ባህሪያት ካርታ፣ የተሰላ ስታይሎች፣ ውስጣዊ ጽሁፍ ይዘት እና ተደጋጋሚ ልጆች ድርድር የያዘ JSON ነገር ያግኙ። ለፕሮግራማዊ ትንተና፣ ሰነድ፣ ወይም የፈተና መደላድሎች ጠቃሚ።

በትር የቅርጸት ቀያሪ

በ HTML፣ CSS እና JSON ትሮች መካከል በቅጽበት ይቀያይሩ። እያንዳንዱ ቅርጸት ከተመሳሳይ ኤለመንት ይፈጠራል፣ ስለዚህ ኤለመንቱን ዳግም ሳይመርጡ ማንኛውንም ውክልና ማግኘት ይችላሉ።

የ Syntax ማድመቅ ቅድመ-እይታ

እያንዳንዱ ወደ ውጪ የተላከ ቅርጸት በቅድመ-እይታ ፓነል ውስጥ ከ syntax ማድመቅ ጋር ይታያል። HTML tags በቀይ፣ ባህሪያት በቢጫ፣ ዋጋዎች በአረንጓዴ። ከመቅዳትዎ በፊት ለማንበብ ቀላል።

በአንድ ጠቅታ ቅዳ ከመጠን መረጃ ጋር

የቅዳ ቁልፍን ጠቅ ያድርጉ የአሁኑን ትር ይዘት ለመያዝ። የሁኔታ አሞሌው የመስመር ብዛት እና ባይት መጠን ያሳያል፣ ስለዚህ ምን ያህል ይዘት እንደሚቀዱ ያውቃሉ።

የተለመዱ የአጠቃቀም ሁኔታዎች

ክፍሎችን ከማጣቀሻ ጣቢያዎች ማውጣት

ለመድገም የሚፈልጉት ካርድ፣ ሂሮ ክፍል ወይም ናቪጌሽን ባር አገኙ? ጠቅ ያድርጉ፣ ለመዋቅሩ HTML ያውጡ፣ ከዚያ ለስታይሊንግ CSS ያውጡ።

UI ክፍሎችን መመዝገብ

ኤለመንቶችን ለሰነድ ወይም ለንድፍ ሥርዓት መዛግብት እንደ JSON ያውጡ።

የፈተና Fixtures መፍጠር

ለዩኒት ፈተናዎች HTML fixtures ያስፈልግዎታል? የኤለመንቱን HTML ያውጡ እና በፈተና ፋይልዎ ውስጥ ይለጥፉ።

የተሰላ ስታይል ችግሮችን ማረም

CSS ወደ ውጪ ማላክ የተሰላ ስታይሎችን ያሳያል — ሁሉም CSS ደንቦች ከተተገበሩ በኋላ ብራውዘሩ ምን እንደሚያሳይ።

ኮድ ቅጥቢቶችን ለማጣቀሻ ማስቀመጥ

ከምርት ጣቢያዎች ውበት ያላቸውን ትግበራዎች ወደ ግላዊ ቅጥቢት ቤተ-መጽሐፍት ይቅዱ።

እንዴት እንደሚጠቀሙ
1

ኤለመንት ወደ ውጪ ላክ ያንቁ

የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና የኤለመንት ወደ ውጪ ላክ አዶን ጠቅ ያድርጉ። ጠቋሚው ወደ ምልክት ጠቋሚ ይቀየራል፣ እና የላኪ ፓነል ትር ይከፈታል።

2

ኤለመንት ለመምረጥ ጠቅ ያድርጉ

በገጹ ላይ ማንኛውንም ኤለመንት ጠቅ ያድርጉ። ሐምራዊ ድንበር ይደመቃል፣ እና ፓነሉ በኤለመንቱ HTML፣ CSS እና JSON ውክልናዎች ይሞላል።

3

በቅርጸቶች መካከል ይቀያይሩ

ኤለመንቱን በተለያዩ ቅርጸቶች ለማየት HTML፣ CSS ወይም JSON ትርን ጠቅ ያድርጉ። እያንዳንዱ ትር syntax-highlighted እና በቅርጸት የተደረገ ቅድመ-እይታ ያሳያል።

4

ይገምግሙ እና ይቅዱ

የሚፈልጉትን እንደያዘ ለማረጋገጥ ቅድመ-እይታውን ይቃኙ። የአሁኑን ትር ይዘት በቅንጥቦር ላይ ለማስቀመጥ "ቅዳ" ቁልፍን ጠቅ ያድርጉ።

5

ሌላ ኤለመንት ይምረጡ

የላኪ ፓነሉን በአዲስ ይዘት ለማዘመን በገጹ ላይ ሌላ ኤለመንት ጠቅ ያድርጉ። ማቦዘን አያስፈልግም — ብዙ ኤለመንቶችን ለመላክ ጠቅ ማድረጉን ይቀጥሉ።

ለመሞከር ዝግጁ ነዎት? ኤለመንት ወደ ውጪ ላክ?

DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።

ወደ Chrome ያክሉ ወደ Edge ያክሉ ወደ FireFox ያክሉ