Автор оригинала: Chris Harrington.
Сегодня я собираюсь поговорить о том, как создать раскрывающееся контроль, используя Реагировать js , Меньше CSS и Шрифт потрясающий Отказ Я собираюсь предположить, что вы хотя бы на полпути знаком с этими инструментами, но если вы не можете, я предлагаю вам взглянуть, используя ссылки выше.
Сам раскрывающийся список представляет собой класс Rection JS, который входит в систему, используя меньше CSS, чтобы обеспечить некоторую необработанную открытую и близкую анимацию. Вы можете увидеть это здесь Отказ Я разделим запись в несколько разделов. Во-первых, мы перейдем к раскрывающемуся классу React, в том числе оба представления, так и обработчики событий, а затем обсудим CSS, используемые для создания модных анимаций для раскрывающегося списка. Эта запись не предназначена для использования производства любым растяжением; Здесь здесь больше как учебное пособие, показывающее, как создать класс React вместо какого-либо контроля на производстве.
Примечание: Показанные здесь CSS могут не совпадать с тем, что вы видите на демонстрационной странице, потому что я хочу, чтобы демонстрировать, как минимум на полпути, приличный с некоторым симпатичным стилем. По большей части я собираюсь попытаться сохранить CSS на уроке как можно более обнаженным.
Реагировать
var Dropdown = React.createClass({
getInitialState: function() {
return {
listVisible: false
};
},
select: function(item) {
this.props.selected = item;
},
show: function() {
this.setState({ listVisible: true });
document.addEventListener("click", this.hide);
},
hide: function() {
this.setState({ listVisible: false });
document.removeEventListener("click", this.hide);
},
render: function() {
return
{this.props.selected.name}
{this.renderListItems()}
;
},
renderListItems: function() {
var items = [];
for (var i = 0; i < this.props.list.length; i++) {
var item = this.props.list[i];
items.push(
{item.name}
);
}
return items;
}
});
var colours = [{
name: "Red",
hex: "#F21B1B"
}, {
name: "Blue",
hex: "#1B66F2"
}, {
name: "Green",
hex: "#07BA16"
}];
React.render(Первое, что мы делаем здесь, создает Выпадать класс, вызывая Rection’s CreateClass метод. Получающийся стадь Функция устанавливает состояние раскрывающегося списка, когда он сначала создается, а именно то, что часть списка в настоящее время не видима. Класс принимает два разных реквизита при создании: Список и выбран Отказ Первый – это список предметов, которые должны быть отображены, когда пользователь открывает раскрывающийся список, а последняя является текущим выбранным элементом.
После этого есть три метода, используемые для обработки событий: Выберите , Показать и Скрыть Отказ Способ выбора обрабатывает, когда пользователь нажимает на элемент списка и устанавливает выбран пропры Показать и скрыть несут ответственность за показ и сокрытие списка предметов соответственно.
оказывать Метод представляет собой необходимую функцию для класса RACT и отвечает за построение HTML, которое показано клиенту. Здесь мы устанавливаем различные классы CSS (которые я пойду через чуть позже) для стайлинга как скрытых, так и показанных состояний для списка раскрывающегося списка. Обработчик Click устанавливается на контейнере на этикетке. RenderListiteMs Метод отвечает за рендеринг каждого отдельного списка элемента Div Отказ Этикетка для каждого элемента имеет свой свой свой свой свой свой свой свой свой свой свой свойств, чтобы обеспечить некоторую добавленную обратную связь, для которой пользователь может выбрать пользователь.
Наконец, мы оказываем выпадающий класс, используя Rection оказывать Способ при указании списка предварительно построенных цветов и выбранного цвета в качестве опоры.
Меньше CSS.
@height:40px;
@spacing:10px;
@select-colour:#2875C7;
@font-size:14px;
@border-colour:#DDD;
div.dropdown-container {
&.show>div.dropdown-list {
.transform(scale(1, 1));
}
@icon-width:14px;
>div.dropdown-display {
float:left;
width:100%;
background:white;
height:@height;
cursor:pointer;
border:solid 1px @border-colour;
.border-box;
>* {
float:left;
height:100%;
.vertical-centre(@height);
}
>span {
font-size:@font-size;
width:100%;
position:relative;
.border-box;
padding-right:@icon-width+@spacing*2;
padding-left:@spacing;
}
>i {
position:relative;
width:@icon-width;
margin-left:(@spacing+@icon-width)*-1;
font-size:1.125em;
font-weight:bold;
padding-right:@spacing;
text-align:right;
}
}
>div.dropdown-list {
float:left;
width:100%;
position:relative;
width:100%;
.transform(scale(1, 0));
.transition(-webkit-transform ease 250ms);
.transition(transform ease 250ms);
>div {
position:absolute;
width:100%;
z-index:2;
cursor:pointer;
background:white;
>div {
float:left;
width:100%;
padding:0 @spacing;
font-size:@font-size;
.border-box;
border:solid 1px @border-colour;
border-top:none;
@icon-width:20px;
&:hover {
background:#F0F0F0;
}
&.selected {
background:@select-colour;
color:white;
}
>* {
.vertical-centre(@height);
}
>span {
float:left;
width:100%;
}
}
}
}
}
В разделе CSS мы просто устанавливаем внешний вид раскрывающегося списка. выпадающий список Класс показывает, как я делаю анимацию, чтобы показать и скрыть раскрывающийся список, который является масштаб операция. Я анимирую в преобразовании вместо высоты из-за мобильной совместимости. Браузер действительно хорош в анимировании двух вещей: непрозрачность и трансформация (например, например, масштаб). На мобильном устройстве, используя переход с высотой приведет к плохой производительности, но масштаб преобразования работает много, намного лучше.
Заключение
Вот и все! Подобно выше, я также собрал угловую демонстрацию, которая показывает раскрывающуюся форму. Вы можете увидеть это здесь Отказ Спасибо за прочтение!