API إطار مسج واجهة المستخدم CSS

إطار مسج واجهة المستخدم CSS

يشمل مسج واجهة المستخدم إطار CSS قوية، من أجل خلق العرف الحاجيات مسج والتصميم. الإطار يحتوي على فصول دراسية واجهة المستخدم المشتركة المطلوبة، ويمكن استخدامها صيانة مسج واجهة المستخدم شكل رولر. من خلال خلق مكونات واجهة المستخدم الخاصة بك باستخدام إطار مسج واجهة المستخدم CSS. تحتاج إلى استخدام اتفاقية Sharemark، من أجل سد العجز في الاندماج في المجتمع التعليمات البرمجية.

دروس الإطار

هي أنماط الطبقة CSS يلي ثابتة وفقا لمنظم، أو ما إذا كان themable (الألوان، والخطوط، والخلفيات، وما إلى ذلك)، تم تعريفها في ui.core.css و ui.theme.css ملفين. وتهدف هذه الدراسة لعناصر واجهة المستخدم من أجل تحقيق الاتساق المرئي عبر التطبيق، من خلال مسج واجهة المستخدم شكل رولر من مكونات تطبيق السمات.

مساعد تخطيط

• .ui-helper-hidden : عناصر تطبيق display: none .
• .ui-helper-hidden-accessible عناصر التطبيق للوصول إلى سرية (المواقع المطلق في الصفحة):.
• .ui-helper-reset : إعادة تعيين عناصر النمط واجهة المستخدم الأساسية. إعادة تعيين بعض العناصر مثل: padding ، margin ، text-decoration ، على غرار قائمة، وهلم جرا.
• .ui-helper-clearfix : تطبيق خصائص تعويم التعبئة والتغليف العنصر الأصلي.
• .ui-helper-zfix : ل <iframe> عنصر تنطبق الإطار من "الإصلاح" CSS.

حاوية القطعة

• .ui-widget : الفئة على السطح الخارجي للحاوية لتطبيق كل من الحاجيات. تطبيق القطعة للالخط وحجم الخط، ولكن أيضا على نفس الخط من العناصر استمارة الطلب وحجم الخط 1em للتعامل مع نظام التشغيل Windows الخلافة متصفح.
• .ui-widget-header : عنوان التطبيق حاوية فئة. العنصر والنص أبنائها، وصلات، والرموز تطبيق العنوان حاوية الاسلوب.
• .ui-widget-content : محتويات فئة من التطبيقات حاوية. العنصر والنص أبنائها، وصلات، والرموز المحتوى تطبيق أسلوب الحاوية. (يمكن تطبيقها على لقب عنصر الوالدين أو الأشقاء)

الدولة التفاعلية

• .ui-state-default : يمكن انقر على زر عنصر الدرجة التطبيقية. العنصر والنص أبنائها، وصلات، وتطبيق الرموز "الافتراضي للنقر" حاوية الاسلوب.
• .ui-state-hover : الماوس معلق عند تطبيقها في عنصر زر نقر عندما على الدرجة. العنصر والنص أبنائها، وصلات، وتطبيق الرموز "تحوم نقر" على غرار حاوية.
• .ui-state-focus : فئة التطبيق عند تركيز لوحة المفاتيح في عنصر زر قابل للنقر. العنصر والنص أبنائها، وصلات، وتطبيق الرموز "تحوم نقر" على غرار حاوية.
• .ui-state-active : فئة التطبيق عند النقر بالماوس يمكن النقر على عنصر زر. العنصر والنص أبنائها، وصلات، الرموز التطبيق "للنقر النشط" على غرار حاوية.

الإشارات السريعة التفاعلية

• .ui-state-highlight : لتسليط الضوء أو اختيار التطبيقات العنصر فئة. العنصر والنص أبنائها، وصلات، الرموز التطبيق "تسليط الضوء" على غرار حاوية.
• .ui-state-error : خطأ حاوية رسالة تطبيقات العنصر فئة. العنصر والنص أبنائها، وصلات، الرموز التطبيق "خطأ" على غرار حاوية.
• .ui-state-error-text : ليس فقط ضد لون الخلفية من الدرجة نص الخطأ التطبيق. ويمكن استخدامه لتشكيل تسميات لتكون الفرعي لون رمز الخطأ رمز التطبيق.
• .ui-state-disabled : لتعطيل عناصر واجهة المستخدم تنطبق التعتيم قاتمة. وهذا يعني أن عناصر أسلوب محددة مسبقا لإضافة نمط إضافية.
• .ui-priority-primary : الفئة الأولى التطبيقات زر الأولوية. تطبيق النص الغامق.
• .ui-priority-secondary : فئة من التطبيقات زر الأولوية الثانية. تطبيق عناصر النص الوزن الطبيعي تطبق الشفافية طفيفة.

رمز

وضع وصورة

• .ui-icon : الفئة الأساسية لعنصر رمز التطبيق. تعيين حجم 16px الساحات، كانت مخبأة داخل نص العفريت حالة "المحتوى" تعيين صورة الخلفية. ملاحظة: .ui-icon ، والطبقة الحصول على مختلف العفريت صورة خلفية على أساس حاوية الأم. على سبيل المثال، ui-state-default الحاويات ui-icon العنصر وفقا ui-state-default رمز التلوين اللون.

رمز نوع

في بيان .ui-icon بعد انتهاء اليوم الدراسي، ثم يمكنك تعريف السرعة الثانية من نوع رمز الطبقة. في ظل الظروف العادية، فإن الطبقة رمز يتبع بناء الجملة .ui-icon-{icon type}-{icon sub description}-{direction} .

على سبيل المثال، رمز المثلث لافتا إلى اليمين، على النحو التالي: .ui-icon-triangle-1-e

مسج واجهة المستخدم شكل رولر في العمود معاينة ليوفر مجموعة كاملة من رمز الإطار المغلق. تحوم فوق الرمز لعرض اسم الفئة.

صور أخرى

مساعد دائرة نصف قطرها

• .ui-corner-tl : الركن العلوي الأيسر من دائرة نصف قطرها عنصر التطبيق.
• .ui-corner-tr : الزاوية اليمنى العليا من دائرة نصف قطرها عنصر التطبيق.
• .ui-corner-bl : الزاوية السفلى اليسرى من دائرة نصف قطرها عنصر التطبيق.
• .ui-corner-br : الزاوية اليمنى السفلى من دائرة نصف قطرها عنصر التطبيق.
• .ui-corner-top : الزاوية اليسرى العليا من دائرة نصف قطرها عنصر التطبيق.
• .ui-corner-bottom : عناصر من الزاوية السفلى اليسرى من دائرة نصف قطرها التطبيق.
• .ui-corner-right : عناصر قطري الحق العلوي والسفلي من دائرة نصف قطرها التطبيق.
• .ui-corner-left : عناصر قطري من اليسار العلوي والسفلي من دائرة نصف قطرها التطبيق.
• .ui-corner-all : جميع الزوايا الأربع من دائرة نصف قطرها تطبيق العنصر.

غطاء والظلال

• .ui-widget-overlay : لتغطية 100٪ من عرض الشاشة وارتفاع الطلب، وتعيين لون الخلفية / الملمس والتعتيم على الشاشة.
• .ui-widget-shadow : فئة من تغطية الطلب، مجموعة من الابهام، الإزاحة / الأوفست اليسار، والظل "سمك". سمك هو من قبل جميع الاطراف على هامش مجموعة الظل (الحشو) طبقت. يقابله وضع هامش (هامش) والهامش الأيسر (هامش) طبقت (يمكن أن تكون إيجابية، يمكن أن يكون سلبيا).