Создайте текстовое поле Fancy Focus с использованием RiveDJS и менее CSS

Автор оригинала: Chris Harrington.

Сегодня я собираюсь поговорить о том, как создать элемент управления фокусом, используя Реагировать js и Меньше CSS Отказ Класс должен заменить входы типа текста и пароля и предоставлять некоторую относительно модульную обратную связь с пользователем относительно того, какой вход фокусируется. Я собираюсь предположить, что вы хотя бы на полпути знаком с этими инструментами, но если вы не можете, я предлагаю вам взглянуть, используя ссылки выше. Если вы просто заинтересованы в примере, вы можете посмотреть здесь Отказ

Я собираюсь разделить статью на два раздела. Во-первых, я пойду на реактивный материал и как я разбиваю классы и что каждый из классов делает и так далее. Далее мы обсудим, как CSS используется для создания модных анимаций, чтобы указать, что текстовое поле было сосредоточено.

Реагировать

У меня есть два класса для раздела React. Приложение Класс используется исключительно в качестве контейнера для проведения приложения, а Focusox Класс используется для отображения текстового поля ввода фокуса.

var App = React.createClass({
  render: function() {
    return 

      
      
    
;
  }
});

var FocusBox = React.createClass({
  getInitialState: function() {
    return {
      focused: false
    };
  },
      
  focus: function() {
    this.setState({ focused: true });
  },
        
  blur: function() {
    this.setState({ focused: false });
  },
      
  render: function() {
    return 

      

        
        

          

        
      
    
;
  }
});

Приложение Класс довольно объяснительный, поэтому там на самом деле нельзя сказать. Для Focusox Класс, мы устанавливаем наше начальное состояние, чтобы просто иметь сосредоточены Свойство установлена на ложь. Это то, что мы используем для отслеживания, когда пользователь фокусируется на текстовом поле. Связанные с этим двумя другими функциями без рендер: Фокус и размытие , которые подключены к соответствующим событиям на поле ввода в методе Render. Когда пользователь фокусируется на текстовом поле, целенаправленное свойство состояния обновляется в True, чтобы отразить это, и установить false, когда пользовательские размытия (фокусируются на что-то другое) на текстовом поле.

оказывать Метод используется для создания того, что видит пользователь, когда мы добавляем Focusox родителю. классное значение Свойство содержащего div имеет пару условных условий, которые обеспечивают пользовательский стиль. Первый – класс фокусировки, который добавляет цвет подсветки при установке свойства состояния фокусировки. Второе предназначено для условия ошибки, которое изменяет цвет подсветки красным.

Меньше CSS.

Примечание: Есть несколько смеси в менее CSS ниже, которые не определены. Они почти исключительно используются для скрытия префиксов уродливых поставщиков. Для полного меньшего кода посмотрите на источник Демо-страница Отказ

div.focus-box {
  float:left;
  display:block;
  width:250px;
  border:solid 1px #AAA;
  margin-right:15px;
  margin-top:10px;

  div {
    float:left;
    width:100%;
    text-align:inherit;

    >input {
      float:left;
      width:100%;
      -webkit-appearance:none;
      text-align:inherit;
      padding:@spacing;
      border:none;
      font-size:0.875em;
      background:white;
      outline:none;
      .border-box;
      .border-radius;
      .transition(background ease 250ms);
    }

    >div.focus {
      float:left;
      width:100%;
      margin-top:-1px;
      position:relative;
      height:1px;
      background:transparent; 
      border-color:transparent;

      >div {
        position:absolute;
        z-index:2;
        width:100%;
        .transform(scale(0, 1)); 
        height:2px;
        margin-top:-1px;
        background:@select-colour;
        .transition(all ease 250ms);
      }
    }
  }

  &.focus {
    input { background:#DEE9FA !important; }
    div.focus>div { .transform(scale(1, 1)) !important; }
  }
  &.error {
    div.focus>div { background:red !important; }	
  }
  &.focus.error {
    input { background:rgba(255, 0, 0, 0.125) !important; }
  }
}

Для позиционирования мы перемещаем панель фокуса вверх по пикселю, чтобы скрыть нижнюю границу на текстовом поле. Существует две анимации, которые возникают, когда текстовое поле усиливает фокус: во-первых, мы распространяем полосу фокусировки на дне ввода, а во-вторых, мы исчезаем фон ввода на синий (или красный, если Ошибка). Первый достигнут с помощью Преобразование: масштаб правило Преобразование шкалы до (0, 1) указывает на то, что ширина элемента должна быть отображена как ноль, а высота должна составлять 100%, что является нашей по умолчанию. При фокусировании масштаб изменяется в (1, 1), что указывает на ширину, следует вернуть до 100%. Это анимировано, потому что у нас есть Переход установить для трансформировать имущество. Фон исчезновения достигается таким же образом, добавляя Переход к Фон Свойство входного элемента.

Заключение

Вот и все! Как я уже упоминал выше, я собрал демонстрационную страницу, которая показывает текстовое поле в его окончательной форме. Вы можете увидеть это здесь Отказ Спасибо за прочтение!