كيفية استخدام الرموز المخصصة في المواد الزاويّة

إذا كنت تبحث عن استخدام رموز مخصصة في Angular Material ، فهناك بعض الخطوات التي ستحتاج إلى اتخاذها. أولاً ، ستحتاج إلى إنشاء مجموعة الرموز الخاصة بك. تأتي Angular Material مع مجموعة مدمجة من الرموز ، ولكن يمكنك أيضًا إنشاء الرموز الخاصة بك. بمجرد حصولك على الرموز الخاصة بك ، ستحتاج إلى تسجيلها في Angular Material. يمكن القيام بذلك في ملف الوحدة النمطية للتطبيق الخاص بك. بمجرد تسجيل الرموز الخاصة بك ، يمكنك استخدامها تمامًا مثل الرموز المضمنة. يمكنك استخدامها في الترميز الخاص بك ، أو يمكنك الوصول إليها برمجيًا. هذا كل ما في الأمر لاستخدام الرموز المخصصة في Angular Material! باتباع هذه الخطوات ، يمكنك بسهولة إضافة الرموز الخاصة بك إلى Angular Material لاستخدامها في تطبيقاتك.

في هذا البرنامج التعليمي ، سنستخدم المكون> mat-icon> لإنشاء الخط Material Icons. سيتم استخدام المكون بالإضافة إلى دعم رمز sva المخصص. على GitHub ، يمكنك العثور على كود العمل الكامل. هذا المنشور مخصص لأولئك الذين يتعلمون فقط Angular v4.2 +. تمت كتابة المادة الزاويّة لهذا البرنامج التعليمي في الأصل في Angular 5.2 و Angular 10.1. الرمز الذي سنستخدمه في هذا البرنامج التعليمي (الذي يشبه وجهًا بابتسامة) هو رمز الحالة المزاجية. بالإضافة إلى قائمة شاملة بأيقونات المواد ، يوفر موقع تصميم المواد مجموعة متنوعة من أنماط الرموز التي يمكن استخدامها بمفردها.

يمكننا الآن استخدام أيقونة الماوس لعرض صور SVG. بإدخال تسمية في خاصية الإدخال لملف a.html ، يمكنك استخدام تسمية الرمز لتحديد الرمز الذي يتم الوصول إليه. يجب أن يكون عنوان URL https: //app.html. دعنا نلقي نظرة على ما هو متاح حاليًا. عندما تنظر إلى التطبيق في متصفحك ، ستلاحظ أن الرمز المخصص مصمم على شكل مادة. سيساعد نقل MatIconRegistry إلى فئة خدمة في الحفاظ على كود أوضح.

كيف يمكنني استخدام رموز Svg في الزاوية 12؟

لاستخدام أيقونات SVG في Angular 12 ، ستحتاج إلى تثبيت حزم @ angular / material و @ angular / material-extension. يمكنك بعد ذلك استخدام خدمة matIconRegistry لتسجيل الرموز وإضافتها إلى مكوناتك.

يمكنك إدارة الكود في Angular2 باستخدام ملف Icon.svg الخاص بك باعتباره saparate. بالإضافة إلى ذلك ، يمكن استخدام الوحدة النمطية ng-inline-svg (أو ، إن أمكن ، طرق أخرى مماثلة) للقيام بذلك. نتيجةً لذلك ، فهو في الأساس شيء في المنتصف - سيكون لديك ملفات منفصلة لكل نوع من الصور ، بحيث تكون الصور مضمنة عند تحميل الصفحة حتى تتمكن من معالجتها باستخدام JS / CSS.

سيسمح استخدام aria-الموصوفة كجزء من SVG للمستخدمين ذوي الإعاقة بالحصول على تجربة أفضل عند استخدام موقع الويب الخاص بك. نتيجة لذلك ، عندما تصف أيقوناتك بالنغمات الموصوفة من قبل ، ستتمكن من التأكد من أن المستخدمين ذوي الإعاقة يمكنهم فهم ما يمثلونه.

نقاش بابوا نيو غينيا مقابل. أيقونات Svg

من ناحية أخرى ، يمكن أيضًا إضافة قناة ألفا إلى ملف SVG. بمعنى آخر ، نظرًا لإمكانية تضمينها في مساحات شفافة مع الاحتفاظ بقليل من الألوان ، فإن أيقونات SVG أكثر تنوعًا من أيقونات PNG . يعود اختيار الملف الذي تريد استخدامه لأيقوناتك إلى مشروعك المحدد واحتياجاته.

كيف يمكنني استخدام رموز Svg المخصصة في Html؟

لاستخدام رموز SVG المخصصة في HTML ، تحتاج إلى تضمين مسار ملف الرمز في سمة href لعنصر الرمز. يجب أن يكون مسار الملف متعلقًا بالدليل الجذر للصفحة. على سبيل المثال ، إذا كانت الأيقونة موجودة في مجلد يسمى "أيقونات" في الدليل الجذر ، فسيكون مسار الملف هو "icons / icon.svg".

منذ إدخال أدوات الإنترنت مثل Icomoon و Fontello ، أصبح إنشاء خطوط الويب أسهل بكثير. باستخدام HTML5 ، يمكننا الوصول إلى نطاق أوسع بكثير من الرموز ، وذلك بفضل Scalable Vector Graphics. إذا كنت ترغب في تقديم الدعم الفني لبرنامج Explorer 8 ، فهناك بعض الخيارات الاحتياطية البسيطة. معرف الجزء هو خاصية SVG مضمنة. يمكننا الإشارة إلى جزء إذا أردنا استخدام مواصفات عرض SVG أو معالجة مصفوفة. هذا العنصر هو عنصر SVG بناءً على> view> ID الخاص به. لإظهار الحصان الأسود فقط من كائن قطعة الشطرنج هذه (من Wikipedia Commons) ، يجب أن تكتشف القيم تمامًا كما تفعل في المخطط أدناه.

باستخدام علامة img لتحديد الصورة ، تعمل التقنية بشكل جيد مع Firefox و Chrome و Safari (سطح المكتب) و Opera. بدلاً من ذلك ، يمكنك استخدام ملف SVG خارجي لإنشاء نقوش CSS ، كما هو موضح في الصورة أدناه. هذه تقنية تصنيع موثوقة وجاهزة للاستخدام. لقد اختبرت ذلك في مجموعة متنوعة من المتصفحات الرئيسية (بما في ذلك IE8) وعمل بشكل مثالي. تظهر الرموز على الشاشة كعلامة. مرة أخرى ، يمكن استخدام Icomoon لإنشاء مجموعة علامات الرموز يدويًا ، أو يمكنك استخدام بعض المكونات الإضافية لـ Grunt (google لدمج Grunt SVG) للقيام بذلك. باستثناء IE9 ، يمكن استخدام هذه الطريقة مع جميع المتصفحات الرئيسية. حتى حل جوناثان نيل ، SVG4everybody ، يمكن استخدامه لحل هذه المشكلة.

ما لم تحدد شفرة المصدر سمة العرض المطلوبة ، لا يتم عرض صورة sva في متصفح Chrome. إذا لم يكن لدى SVG هذه السمة ، فسيقوم المتصفح بجعل الصورة أكبر أو أصغر.

كيفية استخدام صور Svg على صفحة الويب الخاصة بك

يمكنك إدراج صور SVG مباشرة في HTML باستخدام علامة svg> / svg>. يمكن الوصول إلى صورة SVG في كود VS أو IDE المفضل لديك عن طريق نسخ الكود ولصقه داخل عنصر نص مستند HTML الخاص بك. إذا سارت الأمور بسلاسة ، فستبدو صفحة الويب الخاصة بك تمامًا مثل الصفحة المعروضة هنا.
يمكن إنشاء الرموز باستخدام صور SVG ببساطة عن طريق كتابة اسمها في متصفح الويب. يمكن تضمين HTML فيها ، ويمكن تثبيت إصدارات مخبأة منها. كما أن الأدلة واعدة للمستقبل. يجب إنشاء الرموز باستخدام PNGs أو واجهات رسومية قابلة للتطوير (SVGs).

قائمة أيقونات المواد الزاوي Svg

توفر مكتبة Angular Material مجموعة من مكونات واجهة المستخدم القابلة لإعادة الاستخدام والمختبرة جيدًا والتي يمكن الوصول إليها استنادًا إلى مواصفات تصميم المواد من Google. تتمثل إحدى ميزات المكتبة في القدرة على استخدام رموز SVG كأيقونات مواد. تتضمن مجموعة أيقونات Angular Material مجموعة متنوعة من الرموز ، بما في ذلك أيقونات الوسائط الاجتماعية وأيقونات نوع الملف والأسهم. يمكنك تصفح القائمة الكاملة لأيقونات Angular Material على موقع أيقونات المواد.

يمكن عرض الرموز باستخدام مكون Mat- Icon للمادة الزاويّة. الميزة الرئيسية لهذا المكون هي القدرة على عرض الصور باستخدام خطوط الويب مثل Font-awesome ، والتي تتطلب ببساطة اسم الصورة التي تطلبها. ماذا يحدث للأيقونات التي لا تنتمي لخطوط الويب؟ في الرمز ، هل ترغب في إجراء تغييرات (على سبيل المثال ، اللون عند التمرير أو حالة الزر في موقع معين) في وقت التشغيل؟ يظهر الخطأ التالي بعد فتح قسم وحدة تحكم المستعرضات. عند استخدام سياق عنوان URL للمورد ، يتم استخدام القيمة غير الآمنة. يتم استخدام تحديد عنوان URL كمعامل لتجاوز SecurityTrustResourceUrl ، والذي يمنع المهاجم من إدخال عنوان URL ضار مثل هذا ، راجع وثائق DomSanitizer الرسمية.

سننظر في طريقة أفضل لاحقًا ، ولكن الآن ، سنضعها ببساطة في صفحة app.html. أضف فئة في علامة mat- icon HTML كما هو موضح أعلاه. عندما يقوم المستخدم بتمرير الماوس فوق الرمز ، يتغير لون الصورة كنتيجة لـ SCSS. يجب أن تغير الرموز الآن ألوانها عند المرور فوقها. كجزء من منشور مستقبلي ، سننظر في تحسين هذا وإعادة البناء للسماح بتحميل الرموز باستخدام خدمة.

كيفية استخدام أيقونات المواد الزاويّة

أين يمكنني أن أجد أيقونات المواد الزاويّة؟
الشيء الوحيد الذي عليك القيام به هو استخدام CSS لخطوط الويب التالية من Google في كود HTML الخاص بك. يمكن العثور على أيقونات المواد في ملف واحد (42 كيلوبايت) ويتراوح حجمها من كبير إلى صغير. تنقسم الأيقونات إلى عشر فئات مختلفة يمكنك رؤيتها في مستودع Git. يمكن أيضًا استضافة الرموز على الخادم الخاص بك.
ما هي بعض المواقع الجيدة لمشاهدة أيقونات المواد؟
لقد قمنا بتجميع أيقونات المواد في مستودع Git ، والذي يتضمن جميع التنسيقات التي نوفرها.
ما هي أفضل طريقة لتخصيص أيقونتي؟
يجب إضافة عنصر الفئة إلى علامة mat-icon HTML ، كما هو موضح أعلاه. تؤدي إضافة SCSS إلى الفئة إلى تغيير لون الرمز كلما مرر المستخدم فوقه. عند التمرير فوق الأيقونات ، يجب عليهم الآن تغيير الألوان.

كيفية استخدام أيقونات المواد الزاويّة

أيقونات المواد الزاويّة هي صور SVG يمكن استخدامها في تطبيق Angular الخاص بك. لاستخدام رمز ، ما عليك سوى إضافة فئة الرمز إلى عنصر. على سبيل المثال ، لاستخدام رمز دائرة الحساب ، يمكنك إضافة فئة mat-icon-account -ائرة إلى عنصر.

لدينا مكتبات مواد في الزاوية يمكن استخدامها لتصميم تطبيقنا بسرعة وتخصيص علامات بناء عليه. تحتوي مكتبة المواد على رمز حصيرة ، وهو مطلوب لعرض الرموز لنا. في الأقسام التالية ، سنتعلم كيفية تثبيت المكتبات المطلوبة وكيفية تنفيذ ذلك لعرض الرموز في تطبيقنا. خدمتنا الأولى هي MatIconRegistry ، وهي عبارة عن سجل يسمح لنا بتحديد وتعريف الأسماء المستعارة للرموز باستخدام خدمة قابلة للحقن. الرمز سهل الاستخدام للغاية ، لكنه يتطلب استيراد هذا التوجيه إلى المشروع أو الوحدة النمطية الجذر حيث نعتزم عرضه. ابدأ الأمر المذكور أعلاه في موجه الأوامر لإنشاء مشروع زاوي جديد. يرجى تجربة أحد الأوامر المذكورة أدناه للتأكد من تثبيت جميع المكتبات الضرورية في مشروعنا. هذا ينطبق بشكل خاص على المطورين ، الذين يمكنهم استخدام المكتبة والوحدة النمطية مباشرة في تطبيقنا دون الحاجة إلى التعامل مع خطوات إضافة المكتبة والوحدة النمطية إلى الوحدة النمطية الجذر.

حصيرة أيقونة Svg

إن mat- icon svg هو رسم متجه بسيط يمكن استخدامه لتمثيل رمز أو شعار. يمكن تغيير حجم الرسم دون فقدان الجودة ، ويمكن تعديله أو تغييره بسهولة.

باستخدام مكون mat-ion للمواد الزاوي ، يمكننا إنشاء SVGs محلية. نحن نقوم بحقن خدمة MatIconRegistry بالإضافة إلى DomSanitizer في المُنشئ. تتضمن وظيفة registerIcons () تحميل المعلمات وعنوان URL ، بالإضافة إلى وظيفة خاصة تسمى load. إذا استخدمنا هذا الاختلاف ، فسنحتاج فقط إلى إضافة اسم ملف الصورة. إذا كنت تستخدم سلسلة ، فإن وظيفة تحميل icon.service مختلفة قليلاً. سيتم إنشاء اسم الصورة باستخدام الفهرس كمفتاح لاسم الصورة في وظيفة التحميل. يجب الآن تفعيل هذه الخدمة عند بدء تحميل التطبيق. من الأسهل بكثير قراءة الكود والحفاظ عليه لأنه أكثر قابلية للقراءة. لقد قسمنا الصور إلى أقسام منفصلة ، وتم تطبيق خدمة أبسط.