Angular2 FlashBoxComponent

angular2-flashbox exampon application application

مكون Flashbox هو مكون Angular2 متوفر لعرض رسائل معلومات المستخدم البسيطة.

يمكن العثور على هيكل عظمي للتطبيق المستخدم للتطوير هنا Angular2 - هيكل عظمي للتطبيق

المتطلبات الأساسية

يجب أن يكون لديك عقدة و NPM مثبتة.

كيف تبدأ التطبيق

تثبيت تبعيات العقدة في دليل جذر المشروع الخاص بك (هذا هو المكان الذي يوجد فيه ملف "package.json") باستخدام:

$ npm install

تثبيت تعريفات TypeScript باستخدام:

$ typings install

ابدأ التطبيق مع

$ gulp

سيتم تجميع التطبيق وبدء. بشكل افتراضي ، يستمع الخادم على المنفذ 3000. يمكن الوصول إلى التطبيق من خلال متصفح الويب الخاص بك على عنوان URL LocalHost: 3000 .

كيفية استخدام مكون Flashbox

مكون Flashbox هو (الآن فقط) جزء من وحدة CommonComponents.

من أجل استخدام الوحدة النمطية ، يجب عليك تكوين محمل الوحدة النمطية. في حالة استخدام Loader وحدة SystemJS ، أضف الخطر التالي:

 System.config({
    ...
    map: {
        'commoncomponents': 'node_modules/commoncomponents'
    }
    ...
})

في وحدة تعريف وحدة التطبيق الخاصة بك ، استيراد وحدة CommonComponents CommonComponents.

 ... 
Import { CommonComponentsModule} from '/commoncomponents/commoncomponents.module';
...
@NgModule({
    ...
     imports:      [ CommonComponentsModule ],
    ...
})

الآن يمكننا استخدام مكون Flashbox في قالب المكون المعلن عن الوحدة النمطية باستخدام العنصر.

ضع رسالة معلومات المستخدم المستندة إلى HTML داخل عنصر صندوق الفلاش .

 <flash-box>
        <!-- Message -->
</flash-box> 

المدخلات

صفات

    <flash-box [type]="type_value" [position]="position_value" [max-width]="maxwidth_value" [setTimeout]="setTimeout_value>
        HTML message
    </flash-box>    

الإجراءات

1. اكتب: سلسلة ، افتراضية: PRIMALED حدد نوع مربع الفلاش. الأنواع المتاحة: الافتراضي ، الأساسي ، النجاح ، المعلومات ، التحذير ، الخطر بناءً على أنواع تسمية bootstrap الافتراضية

2. الموضع: سلسلة ، افتراضي: tr . حدد موضع مربع الفلاش. القيم المتاحة:

• TR - أعلى اليمين ،
• TM - الوسط العلوي ،
• TL - أعلى اليسار ،
• CR - مركز الصرف ،
• CM - الوسط الوسط ،
• Cl - Center -Left ،
• BR - أسفل اليمين ،
• BM - الوسط السفلي ،
• BL - أسفل اليسار

3. Max-Width: String ، افتراضي: 300 بكسل حدد أقصى عرض لمكون مربع الفلاش

4. رقم SetTimeout ، الافتراضي: 2000 حدد timeout (عدد مرض التصلب العصبي المتعدد مرئي) في MS . الافتراضي هو 2 ثانية .

الإجراءات

من أجل التسبب في إجراء التحكم في صندوق الفلاش ، استخدم نظام المتغير المحلي Angular2.

مثال قالب

    <flash-box .... #tlv_name>
        ....
    </flash-box>
    
    <button (click)="tlv_name.available_action">Cause flashbox action</button>

مثال على وحدة التحكم

مكون مرجعي

 import { FlashBoxComponent } from 'commoncomponents/components/flashbox.component';

مكون مرجعي من القالب المتغير المحلي باستخدام

 @ViewChild("tlv_name") tlv:FlashBoxComponent;
tlv_name.available_action();

الإجراءات المتاحة:

1. flashonce (): void - عرض Flashbox مرة واحدة فقط لمقدار الوقت setTimeout
2. show (): void - اجعل التحكم مرئيًا لمقدار الوقت غير المحدود (أو حتى يحدث بعض الإجراءات الأخرى)
3. Hide (): void - اجعل التحكم مخفيًا بسبب كمية غير محدودة من الوقت (أو حتى يحدث بعض الإجراءات الأخرى)
4. StartFlashing (): void - ابدأ وميضًا لفترة غير محدودة من الوقت (أو حتى يحدث بعض الإجراءات الأخرى). يتم ضبط فترة الانتقال من غير ستصر إلى مرئي على 0،5 ثانية وهو حاليًا لا يمكن تكييفه. يتحكم صندوق Flashbox في إظهاره لمقدار الوقت.
5. stopflashing (): void - توقف عن الوميض