#Overflow-tracking
Данная директива отслеживает переполнение элемента, в зависимости от значения (html, gradient)
обрабатывает его.
##Установка с npm:
в терминале
npm i angular-overflow-tracking --save
в проекте
import angular from 'angular';
import 'angular-overflow-tracking';
var app = angular.module('app',[
'overflow-tracking'
]);
или можно скачать готовый дистрибутив
и просто подключить к проекту
<script src="../node_modules/angular/angular.js"></script>
<script src="../bundle/js/overflow-tracking.js"></script>
##Использование
<div overflow-tracking="html"></div>
-
overflow-tracking="html" выполняет рекурсивный обход
детей контейнера и вырезает по слову, пока контейнер переполнен. По умолчанию resize="100" demo
-
overflow-tracking="html" added-word="string"
добавляет слово в конец контейнера
-
overflow-tracking="html" container=".overflow-container" находит по
селектору дочерний элемент и вырезает по слову пока родительский контейнер переполнен. demo
-
overflow-tracking="html" resize="200" добавляет задержку в милисекундах
на действия директивы, при ресайзе окна браузера.
-
overflow-tracking="gradient" вычисляет background-color, line-height
и в зависимости от "position" добавляет gradient. По умолчанию gradient="hor" size="0.2"
-
overflow-tracking="gradient" gradient="hor" градиент по горизонтали. demo
-
overflow-tracking="gradient" gradient="ver" градиент по виртикали. demo
-
overflow-tracking="gradient" size="0.2" устанавливает размер градиента.
Значения в диапозоне от 0 до 1.
Так же для плавного появления можно добавить
[overflow-tracking]{
opacity:0;
transition:opacity .2s;
}
[overflow-tracking].is-tracking{
opacity:1;
}
//stylus
[overflow-tracking]
opacity:0;
transition:opacity .2s;
&.is-tracking
opacity:1;