የክፍል ኮድ ቅዳ በማንኛውም ድረ-ገጽ ላይ ያለውን ማንኛውንም ኤለመንት ለመረጡት framework ንጹህ፣ ለምርት ዝግጁ የሆነ ክፍል ፋይል ይቀይራል። ኤለመንት ጠቅ ያድርጉ እና ሙሉ React JSX ክፍል፣ Vue SFC ወይም Svelte ክፍል ያግኙ — ከ HTML መዋቅር፣ scoped ስታይሎች እና ትክክለኛ ቅርጸት ጋር።
በድረ-ገጽ ላይ በሚያምር ሁኔታ የተነደፈ UI ኤለመንትን ማየት እና በፕሮጀክትዎ ውስጥ ጥቅም ላይ ሊውል የሚችል ክፍል ማግኘት መካከል ትልቅ ክፍተት አለ። የክፍል ኮድ ቅዳ ይህን ሁሉ በአንድ ጠቅታ ያደርጋል፣ ለ React፣ Vue ወይም Svelte idiomatik ክፍል ኮድ ያመነጫል።
export default function UserCard() {
return (
<div className="card">
<div className="header">
<img className="avatar" />
<div>
<h3>Jane Cooper</h3>
<span>Frontend Dev</span>
</div>
</div>
);
}
በሶስት ውፅዓት ቅርጸቶች መካከል በቅጽበት ይቀያይሩ — React (ተግባራዊ ክፍል ከ JSX እና className-ላይ የተመሰረቱ ስታይሎች ጋር)፣ Vue (SFC ከ template፣ script setup እና scoped ስታይል ብሎኮች ጋር)፣ ወይም Svelte (markup ከ ስታይል ብሎክ ጋር)።
የተመነጨው ኮድ ጥሬ ዳታ ብቻ አይደለም — ትክክለኛ ገብቶ ያለው፣ ከኤለመንቱ አውድ የተደረሰ ትርጉም ያለው ክፍል እና ክፍል ስሞች፣ እና framework-ተኮር ቅጦች ያለው በትክክል ተዋቅሯል።
የተሰላ CSS ስታይሎች ከኤለመንቱ ተወስደው በክፍሉ ውስጥ እንደ scoped ስታይሎች ይካተታሉ። React ስታይሎች ነገር ያገኛል፣ Vue scoped ስታይል ብሎክ ያገኛል፣ Svelte ደግሞ component-scoped ስታይሎች ያገኛል።
ወደ ውጪ ማላክ ሁሉንም ልጅ ኤለመንቶች በተደጋጋሚ ያካትታል። ራስጌ፣ ምስል፣ ርዕስ፣ መግለጫ እና ቁልፍ ያለው ካርድ ክፍል ሙሉ ክፍል ሆኖ ይላካል።
ሙሉ ክፍል ኮዱን በቅንጥቦርዎ ላይ ለማስቀመጥ የቅዳ ቁልፍን ጠቅ ያድርጉ። በቀጥታ በፕሮጀክትዎ ውስጥ ወዳለ አዲስ ፋይል ይለጥፉ — ለማስመጣት እና ለመጠቀም ዝግጁ ነው።
የተመነጨው ኮድ በቅድመ-እይታ ፓነል ውስጥ ከሙሉ syntax highlighting ጋር ይታያል። JSX tags፣ props፣ ስታይል ባህሪያት እና ዋጋዎች ሁሉም ቀለም-coded ናቸው።
በማንኛውም ድረ-ገጽ ላይ በፕሮጀክትዎ ውስጥ የሚፈልጉት UI ቅጥ ይታያል? ጠቅ ያድርጉ፣ ለ framework ክፍል ኮዱን ያግኙ፣ ወደ ኮድዎ ይለጥፉ፣ እና ከዚያ ያብጁ።
ፕሮጀክት ከ Vue ወደ React እያዘዋወሩ? በቀጥታ ጣቢያው ላይ ያሉ ክፍሎችን ጠቅ ያድርጉ እና በዒላማ framework ኮድ ያመንጩ።
ከ mockup ወይም ማጣቀሻ ጣቢያ ንድፍ ቅጦችን ወደ ለአጠቃቀም ዝግጁ ክፍል ቤተ-መጽሐፍት ያውጡ።
ምርት ድረ-ገጾች ክፍሎቻቸውን እንዴት እንደሚያዋቅሩ ያጥኑ።
ዲዛይነሮች ብዙ ጊዜ ማጣቀሻ ትግበራዎችን በስታቲክ HTML ይገነባሉ። ኤለመንቶቻቸውን ጠቅ ያድርጉ እና ገንቢዎች ወዲያውኑ ሊጠቀሙባቸው የሚችሉ framework-ተኮር ክፍሎችን ያመንጩ።
የ DevSuite Pro ተንሳፋፊ ዶክ ይክፈቱ እና የክፍል ኮድ ቅዳ አዶን ጠቅ ያድርጉ። React፣ Vue እና Svelte ትሮች ያለው ትር ፓነል ይከፈታል።
ማንኛውንም ኤለመንት ጠቅ ያድርጉ — ካርድ፣ ቡድን ቁልፍ፣ ናቪጌሽን ባር፣ ቅጽ ክፍል። ኤለመንቱ ሐምራዊ ድንበር ይደመቃል።
ኤለመንቱን በዚያ framework ውስጥ እንደ ክፍል ለማየት React፣ Vue ወይም Svelte ትር ጠቅ ያድርጉ።
syntax-highlighted ቅድመ-እይታው ሙሉ ክፍል ፋይሉን ያሳያል — imports፣ ክፍል ተግባር/template፣ ስታይሎች እና exports።
ሙሉ ክፍሉን ለመያዝ "ኮድ ቅዳ" ጠቅ ያድርጉ። በፕሮጀክትዎ ውስጥ ወዳለ አዲስ .jsx፣ .vue ወይም .svelte ፋይል ይለጥፉ።
DevSuite Pro ን በነፃ ይጫኑ እና 39+ የገንቢ መሳሪያዎችን ለአሳሽዎ ይክፈቱ።