[{"data":1,"prerenderedAt":2076},["ShallowReactive",2],{"article-\u002Farticles\u002F672ea6b1759392298216fb86":3},{"id":4,"title":5,"articleId":6,"body":7,"cover":2060,"coverThumb":2061,"created":2062,"date":2063,"description":2064,"extension":2065,"meta":2066,"navigation":793,"path":2067,"seo":2068,"stem":2069,"tags":2070,"updated":2074,"__hash__":2075},"articles\u002Farticles\u002F672ea6b1759392298216fb86.md","تصميم الصفحات | جـ3","672ea6b1759392298216fb86",{"type":8,"value":9,"toc":2051},"minimark",[10,14,23,34,50,55,67,70,141,151,273,279,285,289,299,349,355,359,362,365,384,506,512,600,610,614,620,881,899,908,911,914,918,924,933,1506,1513,1520,1531,1541,1544,1551,1566,1577,1584,1613,1616,1624,1628,1633,1640,1873,1879,1885,1894,1897,1918,1925,1928,1932,1942,2009,2016,2029,2032,2044,2047],[11,12,13],"p",{},"الحمد لله الذي علَّم بالقلم، علَّم الإنسان ما لم يعلم، والصلاة والسلام على خير معلِّم الناس الخير سيدنا محمد - صلَّى الله عليه وسلم … أما بعد ،،",[11,15,16,17,22],{},"لمواصلة التعلم والاطلاع على مقالات السلسلة السابقة، يمكنك الرجوع إلى المقال السابق بعنوان \"",[18,19,21],"a",{"href":20},"\u002Farticles\u002F672092be1b1845a7036f7818\u002F","تهيئة التطبيق: اللغة العربية، والخطوط، والألوان","\"، والذي يعد خطوة مهمة لإكمال الصورة وتطبيق المفاهيم بطريقة متكاملة.",[11,24,25,26,33],{},"في هذا المقال الجديد من ",[18,27,29],{"href":28},"\u002Farticles\u002F65bf4be1789ae522f33e4069\u002F",[30,31,32],"strong",{},"السلسلة الكاملة لتعلم بناء التطبيقات","، سنقوم بإنشاء الصفحات الأساسية للتطبيق، والتي تشمل:",[35,36,37,44],"ol",{},[38,39,40,43],"li",{},[30,41,42],{},"صفحة المنتجات:"," الصفحة الرئيسية للتطبيق، إذ تعرض المنتجات التي تم إضافتها سابقاً.",[38,45,46,49],{},[30,47,48],{},"صفحة إضافة منتج:"," الصفحة التي تسمح بإضافة منتجات جديدة إلى التطبيق.",[51,52,54],"h2",{"id":53},"صفحة-المنتجات","صفحة المنتجات",[11,56,57,58,62,63,66],{},"لإضافة صفحات جديدة في التطبيق، قم بإنشاء مجلد باسم ",[59,60,61],"code",{},"pages"," في المشروع، ثم أضف ملفًا جديدًا باسم ",[59,64,65],{},"index.vue"," داخله.",[11,68,69],{},"ابدأ بكتابة الكود التالي:",[71,72,77],"pre",{"className":73,"code":74,"language":75,"meta":76,"style":76},"language-html shiki shiki-themes github-dark","\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch2>المنتجات\u003C\u002Fh2>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n","html","",[59,78,79,95,106,121,131],{"__ignoreMap":76},[80,81,84,88,92],"span",{"class":82,"line":83},"line",1,[80,85,87],{"class":86},"s95oV","\u003C",[80,89,91],{"class":90},"s4JwU","template",[80,93,94],{"class":86},">\n",[80,96,98,101,104],{"class":82,"line":97},2,[80,99,100],{"class":86},"  \u003C",[80,102,103],{"class":90},"div",[80,105,94],{"class":86},[80,107,109,112,114,117,119],{"class":82,"line":108},3,[80,110,111],{"class":86},"    \u003C",[80,113,51],{"class":90},[80,115,116],{"class":86},">المنتجات\u003C\u002F",[80,118,51],{"class":90},[80,120,94],{"class":86},[80,122,124,127,129],{"class":82,"line":123},4,[80,125,126],{"class":86},"  \u003C\u002F",[80,128,103],{"class":90},[80,130,94],{"class":86},[80,132,134,137,139],{"class":82,"line":133},5,[80,135,136],{"class":86},"\u003C\u002F",[80,138,91],{"class":90},[80,140,94],{"class":86},[11,142,143,144,146,147,150],{},"بعد ذلك، قم بتحديث القسم الخاص بالقالب ",[59,145,91],{}," في ملف ",[59,148,149],{},"app.vue"," ليصبح بالشكل التالي:",[71,152,154],{"className":73,"code":153,"language":75,"meta":76,"style":76},"\u003Ctemplate>\n  \u003Cv-layout>\n    \u003Cv-app-bar :elevation=\"2\" color=\"primary\">\n      ...\n    \u003C\u002Fv-app-bar>\n    \u003Cv-main class=\"ma-4\">\n      \u003CNuxtPage \u002F>\n    \u003C\u002Fv-main>\n  \u003C\u002Fv-layout>\n\u003C\u002Ftemplate>\n",[59,155,156,164,173,201,206,215,233,246,255,264],{"__ignoreMap":76},[80,157,158,160,162],{"class":82,"line":83},[80,159,87],{"class":86},[80,161,91],{"class":90},[80,163,94],{"class":86},[80,165,166,168,171],{"class":82,"line":97},[80,167,100],{"class":86},[80,169,170],{"class":90},"v-layout",[80,172,94],{"class":86},[80,174,175,177,180,184,187,191,194,196,199],{"class":82,"line":108},[80,176,111],{"class":86},[80,178,179],{"class":90},"v-app-bar",[80,181,183],{"class":182},"svObZ"," :elevation",[80,185,186],{"class":86},"=",[80,188,190],{"class":189},"sU2Wk","\"2\"",[80,192,193],{"class":182}," color",[80,195,186],{"class":86},[80,197,198],{"class":189},"\"primary\"",[80,200,94],{"class":86},[80,202,203],{"class":82,"line":123},[80,204,205],{"class":86},"      ...\n",[80,207,208,211,213],{"class":82,"line":133},[80,209,210],{"class":86},"    \u003C\u002F",[80,212,179],{"class":90},[80,214,94],{"class":86},[80,216,218,220,223,226,228,231],{"class":82,"line":217},6,[80,219,111],{"class":86},[80,221,222],{"class":90},"v-main",[80,224,225],{"class":182}," class",[80,227,186],{"class":86},[80,229,230],{"class":189},"\"ma-4\"",[80,232,94],{"class":86},[80,234,236,239,243],{"class":82,"line":235},7,[80,237,238],{"class":86},"      \u003C",[80,240,242],{"class":241},"s6RL2","NuxtPage",[80,244,245],{"class":86}," \u002F>\n",[80,247,249,251,253],{"class":82,"line":248},8,[80,250,210],{"class":86},[80,252,222],{"class":90},[80,254,94],{"class":86},[80,256,258,260,262],{"class":82,"line":257},9,[80,259,126],{"class":86},[80,261,170],{"class":90},[80,263,94],{"class":86},[80,265,267,269,271],{"class":82,"line":266},10,[80,268,136],{"class":86},[80,270,91],{"class":90},[80,272,94],{"class":86},[11,274,275,276,278],{},"لاحظ استخدام ",[59,277,222],{}," حيث تمثل المساحة المخصصة لمحتوى الصفحة الرئيسي في Vuetify.",[11,280,281,282,284],{},"كما استخدمنا المكوّن ",[59,283,242],{}," من Nuxt، والذي يعمل على عرض الصفحة الحالية.",[51,286,288],{"id":287},"صفحة-إضافة-منتج","صفحة إضافة منتج",[11,290,291,292,295,296,298],{},"لإضافة صفحة خاصة بإدخال منتجات جديدة، قم بإنشاء ملف ",[59,293,294],{},"add-product.vue"," داخل مجلد ",[59,297,61],{}," وأضف الكود التالي:",[71,300,302],{"className":73,"code":301,"language":75,"meta":76,"style":76},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Ch2>إضافة منتج\u003C\u002Fh2>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[59,303,304,312,320,333,341],{"__ignoreMap":76},[80,305,306,308,310],{"class":82,"line":83},[80,307,87],{"class":86},[80,309,91],{"class":90},[80,311,94],{"class":86},[80,313,314,316,318],{"class":82,"line":97},[80,315,100],{"class":86},[80,317,103],{"class":90},[80,319,94],{"class":86},[80,321,322,324,326,329,331],{"class":82,"line":108},[80,323,111],{"class":86},[80,325,51],{"class":90},[80,327,328],{"class":86},">إضافة منتج\u003C\u002F",[80,330,51],{"class":90},[80,332,94],{"class":86},[80,334,335,337,339],{"class":82,"line":123},[80,336,126],{"class":86},[80,338,103],{"class":90},[80,340,94],{"class":86},[80,342,343,345,347],{"class":82,"line":133},[80,344,136],{"class":86},[80,346,91],{"class":90},[80,348,94],{"class":86},[11,350,351,352],{},"لعرض هذه الصفحة الجديدة، يمكن فتحها عبر المتصفح بإضافة اسم الصفحة إلى رابط الموقع بالشكل ",[59,353,354],{},"localhost:3000\u002Fadd-product",[51,356,358],{"id":357},"إضافة-روابط-للتنقل-بين-الصفحات","إضافة روابط للتنقل بين الصفحات",[11,360,361],{},"لتسهيل التنقل بين الصفحات، يُفضل إضافة روابط للترويسة (header).",[11,363,364],{},"قبل البدء بذلك، نقوم أولاً بفصل كود الترويسة في مكوّن مستقل لجعل بنية التطبيق أكثر تنظيماً.",[35,366,367,374],{},[38,368,369,370,373],{},"أنشئ مجلدًا جديدًا باسم ",[59,371,372],{},"components"," داخل المشروع.",[38,375,376,377,380,381,383],{},"أضف ملفًا جديدًا داخله باسم ",[59,378,379],{},"header.vue"," وانقل كود الترويسة الموجود حاليًا في ",[59,382,149],{}," إلى هذا الملف ليصبح كما يلي:",[71,385,387],{"className":73,"code":386,"language":75,"meta":76,"style":76},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cv-app-bar :elevation=\"2\" color=\"primary\">\n      \u003Cv-app-bar-title>تطبيق المنتجات\u003C\u002Fv-app-bar-title>\n      \u003Ctemplate v-slot:append>\n        \u003Cv-btn icon=\"mdi-dots-vertical\">\u003C\u002Fv-btn>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fv-app-bar>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[59,388,389,397,405,425,439,450,473,482,490,498],{"__ignoreMap":76},[80,390,391,393,395],{"class":82,"line":83},[80,392,87],{"class":86},[80,394,91],{"class":90},[80,396,94],{"class":86},[80,398,399,401,403],{"class":82,"line":97},[80,400,100],{"class":86},[80,402,103],{"class":90},[80,404,94],{"class":86},[80,406,407,409,411,413,415,417,419,421,423],{"class":82,"line":108},[80,408,111],{"class":86},[80,410,179],{"class":90},[80,412,183],{"class":182},[80,414,186],{"class":86},[80,416,190],{"class":189},[80,418,193],{"class":182},[80,420,186],{"class":86},[80,422,198],{"class":189},[80,424,94],{"class":86},[80,426,427,429,432,435,437],{"class":82,"line":123},[80,428,238],{"class":86},[80,430,431],{"class":90},"v-app-bar-title",[80,433,434],{"class":86},">تطبيق المنتجات\u003C\u002F",[80,436,431],{"class":90},[80,438,94],{"class":86},[80,440,441,443,445,448],{"class":82,"line":133},[80,442,238],{"class":86},[80,444,91],{"class":90},[80,446,447],{"class":182}," v-slot:append",[80,449,94],{"class":86},[80,451,452,455,458,461,463,466,469,471],{"class":82,"line":217},[80,453,454],{"class":86},"        \u003C",[80,456,457],{"class":90},"v-btn",[80,459,460],{"class":182}," icon",[80,462,186],{"class":86},[80,464,465],{"class":189},"\"mdi-dots-vertical\"",[80,467,468],{"class":86},">\u003C\u002F",[80,470,457],{"class":90},[80,472,94],{"class":86},[80,474,475,478,480],{"class":82,"line":235},[80,476,477],{"class":86},"      \u003C\u002F",[80,479,91],{"class":90},[80,481,94],{"class":86},[80,483,484,486,488],{"class":82,"line":248},[80,485,210],{"class":86},[80,487,179],{"class":90},[80,489,94],{"class":86},[80,491,492,494,496],{"class":82,"line":257},[80,493,126],{"class":86},[80,495,103],{"class":90},[80,497,94],{"class":86},[80,499,500,502,504],{"class":82,"line":266},[80,501,136],{"class":86},[80,503,91],{"class":90},[80,505,94],{"class":86},[11,507,508,509,511],{},"في ملف ",[59,510,149],{}," قم بتحديث الكود ليظهر بهذا الشكل:",[71,513,515],{"className":73,"code":514,"language":75,"meta":76,"style":76},"\u003Ctemplate>\n  \u003Cv-layout>\n    \u003CHeader \u002F>\n    \u003Cv-main class=\"bg-grey-lighten-3\" style=\"min-height: 100vh\">\n      \u003CNuxtPage \u002F>\n    \u003C\u002Fv-main>\n  \u003C\u002Fv-layout>\n\u003C\u002Ftemplate>\n",[59,516,517,525,533,545,568,576,584,592],{"__ignoreMap":76},[80,518,519,521,523],{"class":82,"line":83},[80,520,87],{"class":86},[80,522,91],{"class":90},[80,524,94],{"class":86},[80,526,527,529,531],{"class":82,"line":97},[80,528,100],{"class":86},[80,530,170],{"class":90},[80,532,94],{"class":86},[80,534,535,537,540,543],{"class":82,"line":108},[80,536,111],{"class":86},[80,538,539],{"class":90},"Header",[80,541,542],{"class":241}," \u002F",[80,544,94],{"class":86},[80,546,547,549,551,553,555,558,561,563,566],{"class":82,"line":123},[80,548,111],{"class":86},[80,550,222],{"class":90},[80,552,225],{"class":182},[80,554,186],{"class":86},[80,556,557],{"class":189},"\"bg-grey-lighten-3\"",[80,559,560],{"class":182}," style",[80,562,186],{"class":86},[80,564,565],{"class":189},"\"min-height: 100vh\"",[80,567,94],{"class":86},[80,569,570,572,574],{"class":82,"line":133},[80,571,238],{"class":86},[80,573,242],{"class":241},[80,575,245],{"class":86},[80,577,578,580,582],{"class":82,"line":217},[80,579,210],{"class":86},[80,581,222],{"class":90},[80,583,94],{"class":86},[80,585,586,588,590],{"class":82,"line":235},[80,587,126],{"class":86},[80,589,170],{"class":90},[80,591,94],{"class":86},[80,593,594,596,598],{"class":82,"line":248},[80,595,136],{"class":86},[80,597,91],{"class":90},[80,599,94],{"class":86},[11,601,602,603,606,607,609],{},"تم إضافة وسم ",[59,604,605],{},"\u003CHeader \u002F>"," لاستدعاء مكوّن الترويسة من مجلد ",[59,608,372],{}," وبذلك نحصل على هيكل تنظيمي أكثر ترتيباً وسهولة في إدارة الكود.",[51,611,613],{"id":612},"إضافة-الروابط","إضافة الروابط",[11,615,616,617,619],{},"لإضافة الروابط ضمن الترويسة للتنقل بين صفحات التطبيق، قم بتحديث ملف ",[59,618,379],{}," ليحتوي على الكود التالي:",[71,621,623],{"className":73,"code":622,"language":75,"meta":76,"style":76},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cv-app-bar :elevation=\"2\" color=\"primary\">\n      \u003Cv-btn\n        v-for=\"link in links\"\n        :key=\"link.title\"\n        :text=\"link.title\"\n        :to=\"link.route\"\n        size=\"x-large\"\n      \u002F>\n      \u003Ctemplate v-slot:append>\n        \u003Cv-btn icon=\"mdi-dots-vertical\">\u003C\u002Fv-btn>\n      \u003C\u002Ftemplate>\n    \u003C\u002Fv-app-bar>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\nconst links = [\n  { title: 'المنتجات', route: '\u002F' },\n  { title: 'اضافة منتج', route: '\u002Fadd-product' },\n];\n\u003C\u002Fscript>\n",[59,624,625,633,641,661,668,678,688,697,707,717,722,733,752,761,770,779,788,795,816,833,851,866,872],{"__ignoreMap":76},[80,626,627,629,631],{"class":82,"line":83},[80,628,87],{"class":86},[80,630,91],{"class":90},[80,632,94],{"class":86},[80,634,635,637,639],{"class":82,"line":97},[80,636,100],{"class":86},[80,638,103],{"class":90},[80,640,94],{"class":86},[80,642,643,645,647,649,651,653,655,657,659],{"class":82,"line":108},[80,644,111],{"class":86},[80,646,179],{"class":90},[80,648,183],{"class":182},[80,650,186],{"class":86},[80,652,190],{"class":189},[80,654,193],{"class":182},[80,656,186],{"class":86},[80,658,198],{"class":189},[80,660,94],{"class":86},[80,662,663,665],{"class":82,"line":123},[80,664,238],{"class":86},[80,666,667],{"class":90},"v-btn\n",[80,669,670,673,675],{"class":82,"line":133},[80,671,672],{"class":182},"        v-for",[80,674,186],{"class":86},[80,676,677],{"class":189},"\"link in links\"\n",[80,679,680,683,685],{"class":82,"line":217},[80,681,682],{"class":182},"        :key",[80,684,186],{"class":86},[80,686,687],{"class":189},"\"link.title\"\n",[80,689,690,693,695],{"class":82,"line":235},[80,691,692],{"class":182},"        :text",[80,694,186],{"class":86},[80,696,687],{"class":189},[80,698,699,702,704],{"class":82,"line":248},[80,700,701],{"class":182},"        :to",[80,703,186],{"class":86},[80,705,706],{"class":189},"\"link.route\"\n",[80,708,709,712,714],{"class":82,"line":257},[80,710,711],{"class":182},"        size",[80,713,186],{"class":86},[80,715,716],{"class":189},"\"x-large\"\n",[80,718,719],{"class":82,"line":266},[80,720,721],{"class":86},"      \u002F>\n",[80,723,725,727,729,731],{"class":82,"line":724},11,[80,726,238],{"class":86},[80,728,91],{"class":90},[80,730,447],{"class":182},[80,732,94],{"class":86},[80,734,736,738,740,742,744,746,748,750],{"class":82,"line":735},12,[80,737,454],{"class":86},[80,739,457],{"class":90},[80,741,460],{"class":182},[80,743,186],{"class":86},[80,745,465],{"class":189},[80,747,468],{"class":86},[80,749,457],{"class":90},[80,751,94],{"class":86},[80,753,755,757,759],{"class":82,"line":754},13,[80,756,477],{"class":86},[80,758,91],{"class":90},[80,760,94],{"class":86},[80,762,764,766,768],{"class":82,"line":763},14,[80,765,210],{"class":86},[80,767,179],{"class":90},[80,769,94],{"class":86},[80,771,773,775,777],{"class":82,"line":772},15,[80,774,126],{"class":86},[80,776,103],{"class":90},[80,778,94],{"class":86},[80,780,782,784,786],{"class":82,"line":781},16,[80,783,136],{"class":86},[80,785,91],{"class":90},[80,787,94],{"class":86},[80,789,791],{"class":82,"line":790},17,[80,792,794],{"emptyLinePlaceholder":793},true,"\n",[80,796,798,800,803,806,808,811,814],{"class":82,"line":797},18,[80,799,87],{"class":86},[80,801,802],{"class":90},"script",[80,804,805],{"class":182}," lang",[80,807,186],{"class":86},[80,809,810],{"class":189},"\"ts\"",[80,812,813],{"class":182}," setup",[80,815,94],{"class":86},[80,817,819,823,827,830],{"class":82,"line":818},19,[80,820,822],{"class":821},"snl16","const",[80,824,826],{"class":825},"sDLfK"," links",[80,828,829],{"class":821}," =",[80,831,832],{"class":86}," [\n",[80,834,836,839,842,845,848],{"class":82,"line":835},20,[80,837,838],{"class":86},"  { title: ",[80,840,841],{"class":189},"'المنتجات'",[80,843,844],{"class":86},", route: ",[80,846,847],{"class":189},"'\u002F'",[80,849,850],{"class":86}," },\n",[80,852,854,856,859,861,864],{"class":82,"line":853},21,[80,855,838],{"class":86},[80,857,858],{"class":189},"'اضافة منتج'",[80,860,844],{"class":86},[80,862,863],{"class":189},"'\u002Fadd-product'",[80,865,850],{"class":86},[80,867,869],{"class":82,"line":868},22,[80,870,871],{"class":86},"];\n",[80,873,875,877,879],{"class":82,"line":874},23,[80,876,136],{"class":86},[80,878,802],{"class":90},[80,880,94],{"class":86},[11,882,883,884,887,888,891,892,895,896],{},"في هذا الكود، تم إنشاء مصفوفة باسم ",[59,885,886],{},"links"," ضمن وسم ",[59,889,890],{},"\u003Cscript>"," تحتوي على عنوان كل رابط ",[59,893,894],{},"title"," والمسار الخاص به ",[59,897,898],{},"route",[11,900,901,902,904,905,907],{},"بعد ذلك، استخدمنا مكوّن ",[59,903,457],{}," من Vuetify لعرض الأزرار التي تمثل الروابط داخل مكوّن ",[59,906,179],{},".",[11,909,910],{},"كل زرّ يظهر عنوان الصفحة ويقود إلى المسار المحدد عند الضغط عليه.",[11,912,913],{},"بإمكانك الآن تجربة التنقل بين الصفحات (المنتجات \u002F إضافة منتج) عبر الضغط على الروابط في الترويسة أعلى الصفحة.",[51,915,917],{"id":916},"تصميم-صفحة-المنتجات","تصميم صفحة المنتجات",[11,919,920],{},[921,922],"img",{"alt":76,"src":923},"\u002Fimages\u002F673379df4e9c5b5b41766eaa.webp",[11,925,926,927,929,930,932],{},"لعرض تصميم المنتجات ضمن الصفحة قم بتحديث ملف ",[59,928,65],{}," الموجود في مجلد ",[59,931,61],{}," ليصبح بالشكل التالي",[71,934,936],{"className":73,"code":935,"language":75,"meta":76,"style":76},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cv-container>\n      \u003Ch3 class=\"text-h3 cairo\">المنتجات\u003C\u002Fh3>\n      \u003Cv-row class=\"mt-4\">\n        \u003Cv-col\n          v-for=\"product in products\"\n          :key=\"product.id\"\n          cols=\"12\"\n          md=\"6\"\n          lg=\"3\"\n        >\n          \u003Cv-card>\n            \u003Cv-img :src=\"product.image\" height=\"280\" cover \u002F>\n            \u003Cv-card-title>{{ product.name }}\u003C\u002Fv-card-title>\n            \u003Cv-card-subtitle>{{ `${product.price} جنيه` }}\u003C\u002Fv-card-subtitle>\n            \u003Cv-card-text>{{ product.description }}\u003C\u002Fv-card-text>\n          \u003C\u002Fv-card>\n        \u003C\u002Fv-col>\n      \u003C\u002Fv-row>\n    \u003C\u002Fv-container>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n\n\u003Cscript lang=\"ts\" setup>\nconst products = ref([\n  {\n    id: 1,\n    name: 'موبايل سامسونج جالكسي',\n    price: 8000,\n    image: '\u002Fproducts\u002Fsamsung-galaxy.jpg',\n    description:\n      'موبايل سامسونج جالكسي ايه 55 الجيل الخامس 5G، ثنائي شرائح الاتصال، ذاكرة رام 8 جيجا، تخزين 256 ازرق ثلجي',\n  },\n  {\n    id: 2,\n    name: 'موبايل ايفون 12 برو ماكس',\n    price: 15000,\n    image: '\u002Fproducts\u002F12pro-max.jpg',\n    description:\n      'موبايل ايفون 12 برو ماكس ذاكرة 256 جيجا، شريحة واحدة، ازرق - ضمان لمدة عام اصدار محلي',\n  },\n  {\n    id: 3,\n    name: 'موبايل هواوي P40 برو',\n    price: 10000,\n    image: '\u002Fproducts\u002FHuawei-P40-Pro.jpg',\n    description:\n      'موبايل هواوي P40 برو ذاكرة 256 جيجا، شريحة واحدة، اسود - ضمان لمدة عام اصدار محلي',\n  },\n  {\n    id: 4,\n    name: 'موبايل ريلمي 7',\n    price: 5000,\n    image: '\u002Fproducts\u002Frealme-7.jpg',\n    description:\n      'موبايل ريلمي 7 ذاكرة 128 جيجا، شريحة واحدة، ازرق - ضمان لمدة عام اصدار محلي',\n  },\n]);\n\u003C\u002Fscript>\n",[59,937,938,946,954,963,983,999,1006,1016,1026,1036,1046,1056,1061,1071,1100,1114,1128,1142,1151,1161,1169,1177,1185,1193,1198,1215,1231,1237,1249,1260,1271,1282,1288,1296,1302,1307,1317,1327,1337,1347,1352,1360,1365,1370,1380,1390,1400,1410,1415,1423,1428,1433,1443,1453,1463,1473,1478,1486,1491,1497],{"__ignoreMap":76},[80,939,940,942,944],{"class":82,"line":83},[80,941,87],{"class":86},[80,943,91],{"class":90},[80,945,94],{"class":86},[80,947,948,950,952],{"class":82,"line":97},[80,949,100],{"class":86},[80,951,103],{"class":90},[80,953,94],{"class":86},[80,955,956,958,961],{"class":82,"line":108},[80,957,111],{"class":86},[80,959,960],{"class":90},"v-container",[80,962,94],{"class":86},[80,964,965,967,970,972,974,977,979,981],{"class":82,"line":123},[80,966,238],{"class":86},[80,968,969],{"class":90},"h3",[80,971,225],{"class":182},[80,973,186],{"class":86},[80,975,976],{"class":189},"\"text-h3 cairo\"",[80,978,116],{"class":86},[80,980,969],{"class":90},[80,982,94],{"class":86},[80,984,985,987,990,992,994,997],{"class":82,"line":133},[80,986,238],{"class":86},[80,988,989],{"class":90},"v-row",[80,991,225],{"class":182},[80,993,186],{"class":86},[80,995,996],{"class":189},"\"mt-4\"",[80,998,94],{"class":86},[80,1000,1001,1003],{"class":82,"line":217},[80,1002,454],{"class":86},[80,1004,1005],{"class":90},"v-col\n",[80,1007,1008,1011,1013],{"class":82,"line":235},[80,1009,1010],{"class":182},"          v-for",[80,1012,186],{"class":86},[80,1014,1015],{"class":189},"\"product in products\"\n",[80,1017,1018,1021,1023],{"class":82,"line":248},[80,1019,1020],{"class":182},"          :key",[80,1022,186],{"class":86},[80,1024,1025],{"class":189},"\"product.id\"\n",[80,1027,1028,1031,1033],{"class":82,"line":257},[80,1029,1030],{"class":182},"          cols",[80,1032,186],{"class":86},[80,1034,1035],{"class":189},"\"12\"\n",[80,1037,1038,1041,1043],{"class":82,"line":266},[80,1039,1040],{"class":182},"          md",[80,1042,186],{"class":86},[80,1044,1045],{"class":189},"\"6\"\n",[80,1047,1048,1051,1053],{"class":82,"line":724},[80,1049,1050],{"class":182},"          lg",[80,1052,186],{"class":86},[80,1054,1055],{"class":189},"\"3\"\n",[80,1057,1058],{"class":82,"line":735},[80,1059,1060],{"class":86},"        >\n",[80,1062,1063,1066,1069],{"class":82,"line":754},[80,1064,1065],{"class":86},"          \u003C",[80,1067,1068],{"class":90},"v-card",[80,1070,94],{"class":86},[80,1072,1073,1076,1079,1082,1084,1087,1090,1092,1095,1098],{"class":82,"line":763},[80,1074,1075],{"class":86},"            \u003C",[80,1077,1078],{"class":90},"v-img",[80,1080,1081],{"class":182}," :src",[80,1083,186],{"class":86},[80,1085,1086],{"class":189},"\"product.image\"",[80,1088,1089],{"class":182}," height",[80,1091,186],{"class":86},[80,1093,1094],{"class":189},"\"280\"",[80,1096,1097],{"class":182}," cover",[80,1099,245],{"class":86},[80,1101,1102,1104,1107,1110,1112],{"class":82,"line":772},[80,1103,1075],{"class":86},[80,1105,1106],{"class":90},"v-card-title",[80,1108,1109],{"class":86},">{{ product.name }}\u003C\u002F",[80,1111,1106],{"class":90},[80,1113,94],{"class":86},[80,1115,1116,1118,1121,1124,1126],{"class":82,"line":781},[80,1117,1075],{"class":86},[80,1119,1120],{"class":90},"v-card-subtitle",[80,1122,1123],{"class":86},">{{ `${product.price} جنيه` }}\u003C\u002F",[80,1125,1120],{"class":90},[80,1127,94],{"class":86},[80,1129,1130,1132,1135,1138,1140],{"class":82,"line":790},[80,1131,1075],{"class":86},[80,1133,1134],{"class":90},"v-card-text",[80,1136,1137],{"class":86},">{{ product.description }}\u003C\u002F",[80,1139,1134],{"class":90},[80,1141,94],{"class":86},[80,1143,1144,1147,1149],{"class":82,"line":797},[80,1145,1146],{"class":86},"          \u003C\u002F",[80,1148,1068],{"class":90},[80,1150,94],{"class":86},[80,1152,1153,1156,1159],{"class":82,"line":818},[80,1154,1155],{"class":86},"        \u003C\u002F",[80,1157,1158],{"class":90},"v-col",[80,1160,94],{"class":86},[80,1162,1163,1165,1167],{"class":82,"line":835},[80,1164,477],{"class":86},[80,1166,989],{"class":90},[80,1168,94],{"class":86},[80,1170,1171,1173,1175],{"class":82,"line":853},[80,1172,210],{"class":86},[80,1174,960],{"class":90},[80,1176,94],{"class":86},[80,1178,1179,1181,1183],{"class":82,"line":868},[80,1180,126],{"class":86},[80,1182,103],{"class":90},[80,1184,94],{"class":86},[80,1186,1187,1189,1191],{"class":82,"line":874},[80,1188,136],{"class":86},[80,1190,91],{"class":90},[80,1192,94],{"class":86},[80,1194,1196],{"class":82,"line":1195},24,[80,1197,794],{"emptyLinePlaceholder":793},[80,1199,1201,1203,1205,1207,1209,1211,1213],{"class":82,"line":1200},25,[80,1202,87],{"class":86},[80,1204,802],{"class":90},[80,1206,805],{"class":182},[80,1208,186],{"class":86},[80,1210,810],{"class":189},[80,1212,813],{"class":182},[80,1214,94],{"class":86},[80,1216,1218,1220,1223,1225,1228],{"class":82,"line":1217},26,[80,1219,822],{"class":821},[80,1221,1222],{"class":825}," products",[80,1224,829],{"class":821},[80,1226,1227],{"class":182}," ref",[80,1229,1230],{"class":86},"([\n",[80,1232,1234],{"class":82,"line":1233},27,[80,1235,1236],{"class":86},"  {\n",[80,1238,1240,1243,1246],{"class":82,"line":1239},28,[80,1241,1242],{"class":86},"    id: ",[80,1244,1245],{"class":825},"1",[80,1247,1248],{"class":86},",\n",[80,1250,1252,1255,1258],{"class":82,"line":1251},29,[80,1253,1254],{"class":86},"    name: ",[80,1256,1257],{"class":189},"'موبايل سامسونج جالكسي'",[80,1259,1248],{"class":86},[80,1261,1263,1266,1269],{"class":82,"line":1262},30,[80,1264,1265],{"class":86},"    price: ",[80,1267,1268],{"class":825},"8000",[80,1270,1248],{"class":86},[80,1272,1274,1277,1280],{"class":82,"line":1273},31,[80,1275,1276],{"class":86},"    image: ",[80,1278,1279],{"class":189},"'\u002Fproducts\u002Fsamsung-galaxy.jpg'",[80,1281,1248],{"class":86},[80,1283,1285],{"class":82,"line":1284},32,[80,1286,1287],{"class":86},"    description:\n",[80,1289,1291,1294],{"class":82,"line":1290},33,[80,1292,1293],{"class":189},"      'موبايل سامسونج جالكسي ايه 55 الجيل الخامس 5G، ثنائي شرائح الاتصال، ذاكرة رام 8 جيجا، تخزين 256 ازرق ثلجي'",[80,1295,1248],{"class":86},[80,1297,1299],{"class":82,"line":1298},34,[80,1300,1301],{"class":86},"  },\n",[80,1303,1305],{"class":82,"line":1304},35,[80,1306,1236],{"class":86},[80,1308,1310,1312,1315],{"class":82,"line":1309},36,[80,1311,1242],{"class":86},[80,1313,1314],{"class":825},"2",[80,1316,1248],{"class":86},[80,1318,1320,1322,1325],{"class":82,"line":1319},37,[80,1321,1254],{"class":86},[80,1323,1324],{"class":189},"'موبايل ايفون 12 برو ماكس'",[80,1326,1248],{"class":86},[80,1328,1330,1332,1335],{"class":82,"line":1329},38,[80,1331,1265],{"class":86},[80,1333,1334],{"class":825},"15000",[80,1336,1248],{"class":86},[80,1338,1340,1342,1345],{"class":82,"line":1339},39,[80,1341,1276],{"class":86},[80,1343,1344],{"class":189},"'\u002Fproducts\u002F12pro-max.jpg'",[80,1346,1248],{"class":86},[80,1348,1350],{"class":82,"line":1349},40,[80,1351,1287],{"class":86},[80,1353,1355,1358],{"class":82,"line":1354},41,[80,1356,1357],{"class":189},"      'موبايل ايفون 12 برو ماكس ذاكرة 256 جيجا، شريحة واحدة، ازرق - ضمان لمدة عام اصدار محلي'",[80,1359,1248],{"class":86},[80,1361,1363],{"class":82,"line":1362},42,[80,1364,1301],{"class":86},[80,1366,1368],{"class":82,"line":1367},43,[80,1369,1236],{"class":86},[80,1371,1373,1375,1378],{"class":82,"line":1372},44,[80,1374,1242],{"class":86},[80,1376,1377],{"class":825},"3",[80,1379,1248],{"class":86},[80,1381,1383,1385,1388],{"class":82,"line":1382},45,[80,1384,1254],{"class":86},[80,1386,1387],{"class":189},"'موبايل هواوي P40 برو'",[80,1389,1248],{"class":86},[80,1391,1393,1395,1398],{"class":82,"line":1392},46,[80,1394,1265],{"class":86},[80,1396,1397],{"class":825},"10000",[80,1399,1248],{"class":86},[80,1401,1403,1405,1408],{"class":82,"line":1402},47,[80,1404,1276],{"class":86},[80,1406,1407],{"class":189},"'\u002Fproducts\u002FHuawei-P40-Pro.jpg'",[80,1409,1248],{"class":86},[80,1411,1413],{"class":82,"line":1412},48,[80,1414,1287],{"class":86},[80,1416,1418,1421],{"class":82,"line":1417},49,[80,1419,1420],{"class":189},"      'موبايل هواوي P40 برو ذاكرة 256 جيجا، شريحة واحدة، اسود - ضمان لمدة عام اصدار محلي'",[80,1422,1248],{"class":86},[80,1424,1426],{"class":82,"line":1425},50,[80,1427,1301],{"class":86},[80,1429,1431],{"class":82,"line":1430},51,[80,1432,1236],{"class":86},[80,1434,1436,1438,1441],{"class":82,"line":1435},52,[80,1437,1242],{"class":86},[80,1439,1440],{"class":825},"4",[80,1442,1248],{"class":86},[80,1444,1446,1448,1451],{"class":82,"line":1445},53,[80,1447,1254],{"class":86},[80,1449,1450],{"class":189},"'موبايل ريلمي 7'",[80,1452,1248],{"class":86},[80,1454,1456,1458,1461],{"class":82,"line":1455},54,[80,1457,1265],{"class":86},[80,1459,1460],{"class":825},"5000",[80,1462,1248],{"class":86},[80,1464,1466,1468,1471],{"class":82,"line":1465},55,[80,1467,1276],{"class":86},[80,1469,1470],{"class":189},"'\u002Fproducts\u002Frealme-7.jpg'",[80,1472,1248],{"class":86},[80,1474,1476],{"class":82,"line":1475},56,[80,1477,1287],{"class":86},[80,1479,1481,1484],{"class":82,"line":1480},57,[80,1482,1483],{"class":189},"      'موبايل ريلمي 7 ذاكرة 128 جيجا، شريحة واحدة، ازرق - ضمان لمدة عام اصدار محلي'",[80,1485,1248],{"class":86},[80,1487,1489],{"class":82,"line":1488},58,[80,1490,1301],{"class":86},[80,1492,1494],{"class":82,"line":1493},59,[80,1495,1496],{"class":86},"]);\n",[80,1498,1500,1502,1504],{"class":82,"line":1499},60,[80,1501,136],{"class":86},[80,1503,802],{"class":90},[80,1505,94],{"class":86},[11,1507,1508,1509,1512],{},"في هذا الكود تم تصميم صفحة تعرض قائمة من المنتجات، يحتوي القسم الأول قالب ",[59,1510,1511],{},"\u003Ctemplate>"," على الواجهة الرسومية لعرض المنتجات.",[11,1514,1515,1516,1519],{},"بدايةً، يتم إنشاء حاوية رئيسية باستخدام ",[59,1517,1518],{},"\u003Cv-container>"," والتي تضمن تنظيم المحتوى بشكل مناسب ضمن مساحة العرض.",[11,1521,1522,1523,1526,1527,1530],{},"في هذه الحاوية، يظهر عنوان الصفحة \"المنتجات\" باستخدام عنصر ",[59,1524,1525],{},"\u003Ch3>"," حيث يتم تطبيق خط ",[59,1528,1529],{},"Cairo"," على النصوص داخل الصفحة.",[11,1532,1533,1534,1537,1538,907],{},"داخل ",[59,1535,1536],{},"\u003Cv-row>"," يتم وضع المنتجات بشكل صف يحتوي على عدة أعمدة، مما يسمح بتوزيع العناصر بشكل مرن حسب حجم الشاشة، كل عمود يمثل منتجًا واحدًا ويُنشأ باستخدام ",[59,1539,1540],{},"\u003Cv-col>",[11,1542,1543],{},"يتم ضبط إعدادات العرض بحيث يظهر المنتج بعرض كامل على الشاشات الصغيرة، ويحتل نصف العرض على الشاشات المتوسطة، وربع العرض على الشاشات الكبيرة.",[11,1545,1546,1547,1550],{},"داخل كل عمود، تم استخدام ",[59,1548,1549],{},"\u003Cv-card>"," لإنشاء بطاقة مخصصة تحتوي على تفاصيل كل منتج.",[11,1552,1553,1554,1557,1558,1561,1562,1565],{},"تتكون البطاقة من عدة عناصر، حيث العنصر ",[59,1555,1556],{},"\u003Cv-img\u002F>"," يعرض صورة المنتج بارتفاع ",[59,1559,1560],{},"280"," بكسل مع خاصية ",[59,1563,1564],{},"cover"," لضبط الصورة بحيث تغطي المساحة المحددة بالكامل.",[11,1567,1568,1569,1572,1573,1576],{},"يلي ذلك ",[59,1570,1571],{},"\u003Cv-card-title>"," والذي يعرض اسم المنتج كعنوان للبطاقة، في حين أن ",[59,1574,1575],{},"\u003Cv-card-subtitle>"," يظهر سعر المنتج بالجنيه.",[11,1578,1579,1580,1583],{},"أما ",[59,1581,1582],{},"\u003Cv-card-text>"," يوفر مساحة لوصف المنتج بتفاصيل مختصرة داخل البطاقة.",[11,1585,1586,1587,1589,1590,1593,1594,1597,1598,1601,1602,1605,1606,1609,1610,907],{},"في القسم الخاص بالسكربت ",[59,1588,890],{}," يتم تعريف البيانات الخاصة بالمنتجات حيث يتم تخزين قائمة المنتجات ضمن مصفوفة ",[59,1591,1592],{},"products"," بحيث يحتوي كل عنصر على مجموعة من الخصائص التي تشمل معرف فريد ",[59,1595,1596],{},"id"," واسم المنتج ",[59,1599,1600],{},"name"," وسعر ",[59,1603,1604],{},"price"," ومسار الصورة ",[59,1607,1608],{},"image"," ووصف مختصر للمنتج ",[59,1611,1612],{},"description",[11,1614,1615],{},"هذا الكود يتيح إنشاء واجهة منظمة ومرنة تعرض المنتجات بشكل بطاقات منظمة، كل بطاقة تعرض صورة المنتج، اسمه، سعره، ووصفه، مما يسهم في تصميم واجهة جذابة وسهلة الاستخدام.",[11,1617,1618,1619,295,1621,907],{},"بالنسبة للصور، تم نسخ ملفات الصور ووضعها داخل المشروع في مجلد باسم ",[59,1620,1592],{},[59,1622,1623],{},"public",[51,1625,1627],{"id":1626},"تصميم-صفحة-اضافة-منتج","تصميم صفحة اضافة منتج",[11,1629,1630],{},[921,1631],{"alt":76,"src":1632},"\u002Fimages\u002F67337a504e9c5b5b41766ee5.webp",[11,1634,1635,1636,295,1638,932],{},"لتطبيق استايل الصفحة، قم بتعديل الملف ",[59,1637,294],{},[59,1639,61],{},[71,1641,1643],{"className":73,"code":1642,"language":75,"meta":76,"style":76},"\u003Ctemplate>\n  \u003Cdiv>\n    \u003Cv-card class=\"mx-auto px-6 pb-4 pt-2 mt-12\" max-width=\"580\">\n      \u003Cv-card-title class=\"mb-4 text-h4 cairo\">إضافة منتج\u003C\u002Fv-card-title>\n\n      \u003Cv-text-field class=\"mb-2\" label=\"اسم المنتج\" variant=\"outlined\" \u002F>\n\n      \u003Cv-text-field class=\"mb-2\" label=\"السعر\" variant=\"outlined\" \u002F>\n\n      \u003Cv-textarea label=\"الوصف\" variant=\"outlined\">\u003C\u002Fv-textarea>\n\n      \u003Cv-btn color=\"primary\" size=\"large\" variant=\"flat\" block>\n        اضافة جديد\n      \u003C\u002Fv-btn>\n    \u003C\u002Fv-card>\n  \u003C\u002Fdiv>\n\u003C\u002Ftemplate>\n",[59,1644,1645,1653,1661,1684,1703,1707,1739,1743,1770,1774,1800,1804,1836,1841,1849,1857,1865],{"__ignoreMap":76},[80,1646,1647,1649,1651],{"class":82,"line":83},[80,1648,87],{"class":86},[80,1650,91],{"class":90},[80,1652,94],{"class":86},[80,1654,1655,1657,1659],{"class":82,"line":97},[80,1656,100],{"class":86},[80,1658,103],{"class":90},[80,1660,94],{"class":86},[80,1662,1663,1665,1667,1669,1671,1674,1677,1679,1682],{"class":82,"line":108},[80,1664,111],{"class":86},[80,1666,1068],{"class":90},[80,1668,225],{"class":182},[80,1670,186],{"class":86},[80,1672,1673],{"class":189},"\"mx-auto px-6 pb-4 pt-2 mt-12\"",[80,1675,1676],{"class":182}," max-width",[80,1678,186],{"class":86},[80,1680,1681],{"class":189},"\"580\"",[80,1683,94],{"class":86},[80,1685,1686,1688,1690,1692,1694,1697,1699,1701],{"class":82,"line":123},[80,1687,238],{"class":86},[80,1689,1106],{"class":90},[80,1691,225],{"class":182},[80,1693,186],{"class":86},[80,1695,1696],{"class":189},"\"mb-4 text-h4 cairo\"",[80,1698,328],{"class":86},[80,1700,1106],{"class":90},[80,1702,94],{"class":86},[80,1704,1705],{"class":82,"line":133},[80,1706,794],{"emptyLinePlaceholder":793},[80,1708,1709,1711,1714,1716,1718,1721,1724,1726,1729,1732,1734,1737],{"class":82,"line":217},[80,1710,238],{"class":86},[80,1712,1713],{"class":90},"v-text-field",[80,1715,225],{"class":182},[80,1717,186],{"class":86},[80,1719,1720],{"class":189},"\"mb-2\"",[80,1722,1723],{"class":182}," label",[80,1725,186],{"class":86},[80,1727,1728],{"class":189},"\"اسم المنتج\"",[80,1730,1731],{"class":182}," variant",[80,1733,186],{"class":86},[80,1735,1736],{"class":189},"\"outlined\"",[80,1738,245],{"class":86},[80,1740,1741],{"class":82,"line":235},[80,1742,794],{"emptyLinePlaceholder":793},[80,1744,1745,1747,1749,1751,1753,1755,1757,1759,1762,1764,1766,1768],{"class":82,"line":248},[80,1746,238],{"class":86},[80,1748,1713],{"class":90},[80,1750,225],{"class":182},[80,1752,186],{"class":86},[80,1754,1720],{"class":189},[80,1756,1723],{"class":182},[80,1758,186],{"class":86},[80,1760,1761],{"class":189},"\"السعر\"",[80,1763,1731],{"class":182},[80,1765,186],{"class":86},[80,1767,1736],{"class":189},[80,1769,245],{"class":86},[80,1771,1772],{"class":82,"line":257},[80,1773,794],{"emptyLinePlaceholder":793},[80,1775,1776,1778,1781,1783,1785,1788,1790,1792,1794,1796,1798],{"class":82,"line":266},[80,1777,238],{"class":86},[80,1779,1780],{"class":90},"v-textarea",[80,1782,1723],{"class":182},[80,1784,186],{"class":86},[80,1786,1787],{"class":189},"\"الوصف\"",[80,1789,1731],{"class":182},[80,1791,186],{"class":86},[80,1793,1736],{"class":189},[80,1795,468],{"class":86},[80,1797,1780],{"class":90},[80,1799,94],{"class":86},[80,1801,1802],{"class":82,"line":724},[80,1803,794],{"emptyLinePlaceholder":793},[80,1805,1806,1808,1810,1812,1814,1816,1819,1821,1824,1826,1828,1831,1834],{"class":82,"line":735},[80,1807,238],{"class":86},[80,1809,457],{"class":90},[80,1811,193],{"class":182},[80,1813,186],{"class":86},[80,1815,198],{"class":189},[80,1817,1818],{"class":182}," size",[80,1820,186],{"class":86},[80,1822,1823],{"class":189},"\"large\"",[80,1825,1731],{"class":182},[80,1827,186],{"class":86},[80,1829,1830],{"class":189},"\"flat\"",[80,1832,1833],{"class":182}," block",[80,1835,94],{"class":86},[80,1837,1838],{"class":82,"line":754},[80,1839,1840],{"class":86},"        اضافة جديد\n",[80,1842,1843,1845,1847],{"class":82,"line":763},[80,1844,477],{"class":86},[80,1846,457],{"class":90},[80,1848,94],{"class":86},[80,1850,1851,1853,1855],{"class":82,"line":772},[80,1852,210],{"class":86},[80,1854,1068],{"class":90},[80,1856,94],{"class":86},[80,1858,1859,1861,1863],{"class":82,"line":781},[80,1860,126],{"class":86},[80,1862,103],{"class":90},[80,1864,94],{"class":86},[80,1866,1867,1869,1871],{"class":82,"line":790},[80,1868,136],{"class":86},[80,1870,91],{"class":90},[80,1872,94],{"class":86},[11,1874,1875,1876,1878],{},"في هذا الكود، تم تصميم واجهة لإضافة منتج جديد حيث تتألف الواجهة من بطاقة ",[59,1877,1549],{}," تحتوي على حقول إدخال لتجميع بيانات المنتج الأساسية. ",[11,1880,1881,1882,1884],{},"عنصر ",[59,1883,1549],{}," يمثل البطاقة التي تتمركز في منتصف الشاشة وتحدد بعرض أقصى، مما يضمن أن تكون الواجهة متناسقة ومنظمة. ",[11,1886,1887,1888,1890,1891,1893],{},"داخل البطاقة، يبدأ الهيكل بإضافة عنوان رئيسي ",[59,1889,1571],{}," الذي يعرض النص \"إضافة منتج\" ويستخدم خط ",[59,1892,1529],{}," لجعل العنوان بارزًا ومتناسقًا مع تصميم الواجهة.",[11,1895,1896],{},"تتبع العنوان ثلاثة حقول إدخال أساسية مصممة لجمع تفاصيل المنتج. ",[1898,1899,1900,1907,1912],"ul",{},[38,1901,1902,1903,1906],{},"الحقل ",[59,1904,1905],{},"\u003Cv-text-field>"," مخصص لإدخال اسم المنتج ويعرض تسمية \"اسم المنتج\" مما يوضح للمستخدم أن هذا الحقل خاص بتحديد الاسم. ",[38,1908,1902,1909,1911],{},[59,1910,1905],{}," مُعدّ لإدخال السعر ويعرض تسمية \"السعر\" ليكون واضحًا أن المستخدم مطالب بإدخال قيمة السعر هنا. ",[38,1913,1902,1914,1917],{},[59,1915,1916],{},"\u003Cv-textarea>"," وهو حقل متعدد الأسطر مخصص لإدخال وصف المنتج، حيث يتيح للمستخدم كتابة تفاصيل وصفية بشكل أكثر شمولاً، ويظهر بجواره تسمية \"الوصف\".",[11,1919,1920,1921,1924],{},"في أسفل البطاقة يتم تضمين زر إضافة باستخدام ",[59,1922,1923],{},"\u003Cv-btn>"," والذي يمتد بعرض البطاقة بالكامل ويظهر بلون مميز يبرز أهميته كزر للتأكيد على عملية إضافة المنتج. ",[11,1926,1927],{},"هذا التصميم يتيح واجهة مبسطة وسهلة الاستخدام، حيث يتمكن المستخدم من إدخال بيانات المنتج الأساسية والضغط على زر الإضافة لإتمام العملية بشكل سريع وفعال.",[51,1929,1931],{"id":1930},"ملاحظات-على-الاستايل","ملاحظات على الاستايل",[11,1933,1934,1935,1938,1939,1941],{},"في قسم ",[59,1936,1937],{},"\u003Cstyle>"," داخل ملف ",[59,1940,149],{}," تم إضافة التنسيقات التالية:",[71,1943,1947],{"className":1944,"code":1945,"language":1946,"meta":76,"style":76},"language-css shiki shiki-themes github-dark",".cairo {\n  font-family: 'Cairo', sans-serif;\n}\n\n.v-btn {\n  letter-spacing: 0;\n}\n","css",[59,1948,1949,1957,1977,1982,1986,1993,2005],{"__ignoreMap":76},[80,1950,1951,1954],{"class":82,"line":83},[80,1952,1953],{"class":182},".cairo",[80,1955,1956],{"class":86}," {\n",[80,1958,1959,1962,1965,1968,1971,1974],{"class":82,"line":97},[80,1960,1961],{"class":825},"  font-family",[80,1963,1964],{"class":86},": ",[80,1966,1967],{"class":189},"'Cairo'",[80,1969,1970],{"class":86},", ",[80,1972,1973],{"class":825},"sans-serif",[80,1975,1976],{"class":86},";\n",[80,1978,1979],{"class":82,"line":108},[80,1980,1981],{"class":86},"}\n",[80,1983,1984],{"class":82,"line":123},[80,1985,794],{"emptyLinePlaceholder":793},[80,1987,1988,1991],{"class":82,"line":133},[80,1989,1990],{"class":182},".v-btn",[80,1992,1956],{"class":86},[80,1994,1995,1998,2000,2003],{"class":82,"line":217},[80,1996,1997],{"class":825},"  letter-spacing",[80,1999,1964],{"class":86},[80,2001,2002],{"class":825},"0",[80,2004,1976],{"class":86},[80,2006,2007],{"class":82,"line":235},[80,2008,1981],{"class":86},[11,2010,2011,2012,2015],{},"تم تخصيص المعرف ",[59,2013,2014],{},"cairo"," لسهولة تطبيق خط Cairo بسهولة على النصوص في الصفحة.",[11,2017,2018,2019,2021,2022,2025,2026,2028],{},"أما بالنسبة للمعرف ",[59,2020,457],{}," فقد تم ضبط خاصية ",[59,2023,2024],{},"letter-spacing"," على القيمة ",[59,2027,2002],{},"، وذلك لحل مشكلة المسافة الافتراضية بين الحروف التي يضيفها Vuetify للغة الإنجليزية، والتي تتسبب بفصل الحروف عند الكتابة بالعربية. ",[11,2030,2031],{},"هذا التعديل يضمن عرض النصوص العربية بشكل سليم ومتناسق في الأزرار.",[11,2033,2034,2035,907],{},"بإمكانك الوصول إلى الكود الكامل للتطبيق على GitHub عبر ",[18,2036,2043],{"href":2037,"rel":2038,"target":2042},"https:\u002F\u002Fgithub.com\u002Framyahm2010\u002Fproducts-app",[2039,2040,2041],"nofollow","noopener","noreferrer","_blank","رابط المشروع هنا",[11,2045,2046],{},"وفقنى الله وإياك إلى ما يحبه ويرضاه ،،",[2048,2049,2050],"style",{},"html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}html pre.shiki code .s6RL2, html code.shiki .s6RL2{--shiki-default:#FDAEB7;--shiki-default-font-style:italic}html pre.shiki code .snl16, html code.shiki .snl16{--shiki-default:#F97583}html pre.shiki code .sDLfK, html code.shiki .sDLfK{--shiki-default:#79B8FF}",{"title":76,"searchDepth":97,"depth":108,"links":2052},[2053,2054,2055,2056,2057,2058,2059],{"id":53,"depth":97,"text":54},{"id":287,"depth":97,"text":288},{"id":357,"depth":97,"text":358},{"id":612,"depth":97,"text":613},{"id":916,"depth":97,"text":917},{"id":1626,"depth":97,"text":1627},{"id":1930,"depth":97,"text":1931},"\u002Fimages\u002F673379aa4e9c5b5b41766e94.webp","\u002Fimages\u002F673379aa4e9c5b5b41766e94_thumb.webp","2024-11-09T00:02:57.898Z","2024-11-09T00:26:53.351Z","شرح إنشاء وتصميم صفحتي \"المنتجات\" و\"إضافة منتج\"، مع إضافة روابط تنقل تفاعلية لتسهيل حركة المستخدم بين الصفحات.","md",{},"\u002Farticles\u002F672ea6b1759392298216fb86",{"title":5,"description":2064},"articles\u002F672ea6b1759392298216fb86",[2071],{"id":2072,"label":2073},"65bf3e32789ae522f33e3fee","سلسلة بناء التطبيقات","2024-11-12T15:56:19.439Z","A5pJF61PN296q91YU3z95_ADNnVE34LjzgUO7kbdrd8",1788209571270]