Angular2 FlashBoxComponent

Пример приложения компонента Angular2-Flashbord

Компонент Flashbox - это компонент Angular2, предоставляемый для отображения простых пользовательских информационных сообщений.

Приложение скелет, используемый для разработки, можно найти здесь Angular2 - скелет приложения

Предварительные условия

Должен быть установлен узлы и NPM.

Как начать приложение

Установите зависимости узла в корневом каталоге вашего проекта (здесь находится файл 'package.json') с использованием:

$ npm install

Установить определения типа

$ typings install

Начните приложение с

$ gulp

Приложение будет составлено и начато. По умолчанию сервер прослушивает на порту 3000. Приложение можно получить через ваш веб -браузер на URL Localhost: 3000 .

Как использовать компонент Flashbox

Компонент Flashbox является (только сейчас) частью модуля CommonComponents.

Чтобы использовать модуль, вы должны настроить загрузчик модуля. В случае, если вы используете загрузчик модуля SystemJS , добавьте следующие отображения:

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

В модуле определения приложения импорт файл импорт CommonComponents.

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

Теперь мы можем использовать компонент Flashbox в нашем шаблоне компонента, объявленного компонентом с использованием элемента.

Поместите свое сообщение пользователя на основе HTML в элемент Flash-Box .

 <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. Тип: Строка , по умолчанию: первичный тип типа флэш -поля. Доступные типы: по умолчанию , первичный , успех , информация , предупреждение , опасность на основе типов метки начальной загрузки по умолчанию

2. позиция: строка , по умолчанию: tr . Укажите положение флеш -бокса. Доступные значения:

• tr - правая верхняя часть,
• TM - Top -Middle,
• TL - верхний левый,
• CR - Центр -правый,
• CM - Center -Middle,
• Cl - Центр -лето,
• Br - правая нижняя,
• BM - нижняя среда,
• BL - левый нижний

3. максимальная ширина: строка , по умолчанию: 300px Укажите максимальную ширину компонента флеш-бокса

4. Номер SETTIMEOUT , по умолчанию: 2000 Укажите тайм -аут (количество MS. Обращение видно) в MS . По умолчанию 2 сек .

Действия

Чтобы привести к управлению Flashbox, используйте шаблон 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 Suct Time
2. Show (): void - Сделайте контроль видимым в течение неограниченного количества времени (или пока не произойдет какое -то другое действие)
3. Hide (): void - Сделайте контроль скрытым в течение неограниченного количества времени (или пока не произойдет какое -либо другое действие)
4. startflashing (): void - начать мигание в течение неограниченного количества времени (или пока не произойдет какое -то другое действие). Переходный период от невидимых к видимым устанавливается на 0,5 с и в настоящее время не соответствует невыполненному. Flashbox контролирует нас за время SetTimeout .
5. Stopflashing (): void - остановите мигание