تتحقق - تصميم المواد CSS Framework
غوغل تصميم المواد يهدف إلى العمل بشكل جيد على الويب وكذلك على تطبيقات الأجهزة المحمولة. تكتسب شعبية مع المطورين ، وإذا كنت ترغب في اعتماده أيضًا ، فهناك العديد من الطرق لتطبيق تصميم المواد على موقعك. يمكنك استخدام البوليمر أو الزاوي ، أو يمكنك استخدام Materialize.
تجسيد هو إطار CSS يعتمد على مبادئ تصميم المواد مع دعم Sass لتحسين التنمية. يحمل التصميم الافتراضي لسهولة الاستخدام ، ويحتوي على وثائق مفصلة.
يمكنك العثور على الكثير من المكونات المفيدة داخل: مربع الحوار ، المشروط ، منتقي التاريخ ، أزرار المواد ، المنظر ، البطاقات والمزيد. كما أن لديها العديد من خيارات التنقل التي يمكنك الاختيار من بينها ، مثل القائمة المنسدلة والشريحة في القائمة وعلامات التبويب. تجسيد يستخدم أيضا نظام 12 شبكة مع 3 استعلامات وسائط حجم الشاشة الافتراضية: أقصى عرض 600px هو جهاز محمول ، 992px الجهاز اللوحي وأي أكثر من 992px يعد جهاز سطح مكتب.
ابدء
هناك طريقتان لبدء استخدام Materialize: use معيار المغلق أو ساس. يمكن تحميل كلا المصدرين من هنا. يمكنك أيضًا الحصول عليها باستخدام كوخ في الريف باستخدام الأمر التالي:
كوخ
بعد الحصول على المصادر ، تأكد من ربطها بشكل صحيح في ملف المشروع الخاص بك أو ترجمة المصدر إذا كنت تستخدم إصدار Sass.
المميزات
في هذا القسم ، سأشرح بعض الميزات التي توفرها Materialize.
1. ساس ميكس
يحمل هذا الإطار Sass Mixins الذي يضيف تلقائيًا جميع بادئات المتصفح عند كتابة بعض خصائص CSS. إنها ميزة رائعة يجب ضمانها التوافق عبر جميع المتصفحات, مع القليل من الضجة ، ورمز ، ممكن.
ألق نظرة على خصائص الرسوم المتحركة التالية:
-webkit-animation: 0.5s؛ - الرسوم المتحركة: 0.5s ؛ - الرسوم المتحركة: 0.5 ثانية ؛ -ms-animation: 0.5s؛ الرسوم المتحركة: 0.5s ؛
يمكن إعادة كتابة سطور التعليمات البرمجية هذه بسطر واحد من Sass mixin مثل:
تضمين @ animation (.5s) ؛
هناك حوالي 19 الخلطات الرئيسية متاح. للاطلاع على القائمة الكاملة ، توجه إلى فئة Sass في MIXINS التبويب.
2. تدفق النص
بينما تستخدم أطر الواجهة الأمامية الأخرى نصًا ثابتًا ، فإن Materialize تنفذ نصًا سريع الاستجابة. يتم تغيير حجم النص وارتفاع الخط أيضًا استجابةً للحفاظ على قابلية القراءة. عندما يتعلق الأمر بالشاشات الأصغر ، يتم قياس ارتفاع الخط بشكل أكبر.
لاستخدام تدفق النص ، يمكنك ببساطة إضافة تدفق النص الطبقة على النص المطلوب. على سبيل المثال:
هذا هو تدفق النص.
راجع العرض التوضيحي هنا في قسم Flow Text.
3. تموج تأثير مع الأمواج
يأتي تصميم المواد أيضًا بملاحظات تفاعلية ، ومن الأمثلة البارزة تأثير التموج. في تتحقق ، ويسمى هذا التأثير أمواج. عندما ينقر المستخدمون أو ينقرون / يمسوا زرًا أو بطاقة أو أي عنصر آخر ، يظهر التأثير. يمكن إنشاء موجات بسهولة عن طريق إضافة موجات تأثير الطبقة على العناصر الخاصة بك.
يمنحك هذا المقتطف تأثير الأمواج.
خضع
التموجات رمادية بشكل افتراضي. لكن في حالة وجود خلفية ملونة داكنة فيها ، قد ترغب في تغيير اللون. لإضافة لون مختلف ، فقط أضف waves- (لون) إلى العنصر. استبدل "(اللون)" باسم اللون.
خضع
يمكنك الاختيار من بين 7 ألوان: الضوء والأحمر والأصفر والبرتقالي والأرجواني والأخضر البط البري. يمكنك دائمًا إنشاء أو تخصيص ألوان خاصة بك إذا كانت هذه الألوان لا تناسب احتياجاتك.
4. الظل
لإيصال العلاقات بين العناصر ، يوصي تصميم المواد باستخدام الارتفاع على الأسطح. تجسيد يسلم على هذا المبدأ مع ض depth- (عدد) صف دراسي. يمكنك تحديد عمق الظل عن طريق تغيير (الرقم) من 1 إلى 5:
عمق الظل 3
جميع أعماق الظل تظهر مع الصورة أدناه.
5. الأزرار والأيقونات
يوجد في "تصميم المواد" ثلاثة أنواع أزرار رئيسية: زر مرفوع, القوات المسلحة البوروندية (زر العمل العائم) و زر مسطح.
(1) زر أثار
الزر المرفوع هو الزر الافتراضي. لإنشاء هذا الزر ، فقط أضف BTN الطبقة لعناصرك. إذا كنت ترغب في إعطائها تأثير الموجة عند النقر عليها أو الضغط عليها ، فانتقل إلى هذا:
زر
بدلاً من ذلك ، يمكنك أيضًا إعطاء الزر رمزًا على يمين النص أو يمينه. للرمز ، سوف تحتاج إلى إضافة العرف علامة مع اسم فئة رمز والموقف. على سبيل المثال:
تحميل
في المقتطف أعلاه نستخدمها MDI ملف ملف التحميل فئة لأيقونة التحميل. هناك حوالي 740 أيقونات مختلفة يمكنك استخدام. لرؤيتهم يتجهون إلى صفحة ساس في علامة التبويب الرموز.
(2) زر عائم
يمكن إنشاء زر عائم عن طريق إلحاق BTN العائمة الطبقة والرمز المطلوب. على سبيل المثال:
في "تصميم المواد" ، يُستخدم الزر المسطح غالبًا داخل مربع الحوار. لإنشائه ، فقط أضف BTN المسطحة لعنصر الخاص بك مثل ذلك:
انخفاض
بالإضافة إلى ذلك ، يمكن تعطيل أزرار مع معاق الطبقة وجعل أكبر باستخدام BTN متجول صف دراسي.
6. الشبكة
تجسيد يستخدم معيار شبكة 12 عمود استجابة النظام. تنقسم الاستجابة إلى ثلاثة أجزاء: صغير (ق) للجوال ، متوسط (م) للكمبيوتر اللوحي و كبير (لتر) لسطح المكتب.
لإنشاء أعمدة ، استخدم s أو m أو l للإشارة إلى الحجم ، متبوعًا برقم الشبكة. على سبيل المثال ، عندما تريد إنشاء تخطيط بحجم نصف للجهاز المحمول ، يجب عليك تضمين S6 الطبقة في التصميم الخاص بك. S6 تمثل 6 صغير وهو ما يعني 6 عمود على جهاز صغير.
يجب عليك أيضا تضمين أ العقيد الطبقة في التصميم الذي قمت بإنشائه ووضعه داخل عنصر يحتوي على صف صف دراسي. هذا هو الشكل الذي يمكن وضعه في الأعمدة بشكل صحيح. إليك مثال:
لدي 12 عمودًا أو عرض كامل هنا4 أعمدة (الثلث) هنا4 أعمدة (الثلث) هنا4 أعمدة (الثلث) هنا
وهنا النتائج:
بشكل افتراضي, العقيد S12 هو ثابت الحجم ومحسّن لجميع حجم الشاشة ، وأساسا نفس العقيد S12 M12 L12. لكن إذا كنت ترغب في تحديد حجم الأعمدة للأجهزة المختلفة. كل ما عليك فعله هو سرد الأحجام الإضافية مثل:
يتضمن عرضي دائمًا 12 عمودًا في كل مكانلدي 12 عمودًا على الهاتف المحمول و 6 على الكمبيوتر اللوحي و 9 على سطح المكتب
إليك ما يبدو عليه هذا:
هذه ليست سوى عدد قليل من الميزات المادية. لمعرفة المزيد حول ميزاتها الأخرى ، توجه إلى صفحة الوثائق.
