Від автора: я нещодавно попросив дизайнера створити стиль елемента вводу тексту, схожий на панель пошуку в TripAdvisor. Мені він дуже сподобався. І тепер я хочу поділитися готовим рішенням у вигляді покрокового керівництва, щоб ви могли створити його самостійно.
В даному випадку для реалізації стилю підсвічування тексту CSS недостатньо, тому ми будемо використовувати ще і JavaScript. Так що, я виходжу з того, що у вас є базові знання з SCSS і React. Ось повний код на CodePen:
Давайте створимо це!
Спочатку ми створимо простий компонент React і перенесемо його в DOM:
class App extends React.Component {
render() {
return (
);
}
}
ReactDOM.render(
,
document.getElementById(‘root’)
);
Додамо до нього CSS:
$input-font-size: 30px;
$input line-height: 70px;
$font-family: Roboto Slab, sans-serif;
body {
background-color: #222222;
}
.input-wrapper {
width: 500px;
margin: 50px auto;
}
input {
height: 60px;
width: 100%;
min-width: 100%;
padding: 0;
border-radius: 0;
line-height: $input line-height;
background-color: transparent;
color: white;
font-size: $input-font-size;
border: none;
outline: none;
border-bottom: 3px solid #333333;
font-family: $font-family;
}
Додамо HTML-контейнер для ReactDOM, щоб відобразити його:
В результаті ми отримаємо базовий елемент вводу з нижньою межею.
Тепер давайте оживимо кордон!
Труднощі з реалізацією підсвічування полягає в тому, що вона повинна змінювати межу на рівні з текстом, що вводиться. Вона також повинна працювати з будь-якими font-family й font-size.
Оскільки ширина елемента вводу фіксована, нам потрібен інший прийом, щоб визначити, де закінчується текст в будь-який конкретний момент часу.
Припустимо, ми можемо використовувати другий елемент з динамічною шириною — у нашому прикладі це буде елемент span з класом input-highlight. Потім ми скопіюємо введений текст і помістимо його всередині span. Я задав контрольований введення тексту, надавши властивість value. Тепер наш компонент React виглядає наступним чином:
class App extends React.Component {
render() {
return (
basic input, bottom border
);
}
}
Додайте наступні правила CSS для input-highlight. Примітка: тут ми використовуємо змінні SCSS, щоб властивість font мало однакові значення для input і для span:
.input-highlight {
font-size: $input-font-size;
line-height: $input line-height;
font-family: $font-family;
max-width: 100%;
}
І ми отримаємо наступне:
Потім додамо верхню межу для span і розташувати її так, щоб ця межа накладалася на нижню межу input. Крім того, оскільки для input-highlight тепер задано position: absolute, для батьківського нам потрібно задати правило position: relative.
.input-highlight {
font-size: $input-font-size;
line-height: $input line-height;
font-family: $font-family;
max-width: 100%;
border-top: 3px solid white;
position: absolute;
left: 0;
bottom: 0;
height: 0;
}
.input-wrapper {
width: 500px;
margin: 50px auto;
position: relative;
}
Елемент span закінчується там, де закінчується текст. Це робить його ідеальною мірою довжини тексту, що вводиться! Тепер, легка частина: давайте використаємо JavaScript для оновлення тексту в елементі span при кожній зміні вводиться вмісту. Ми будемо використовувати state React, щоб одночасно оновлювати значення як input, так і span. Ось наш оновлений компонент:
class App extends React.Component {
constructor() {
super();
this.state = {
inputValue:”
};
this.onInputChange = this.onInputChange.bind(this);
}
onInputChange(e) {
const { value } = e.target;
this.setState({
inputValue: value
});
}
render() {
const { inputValue } = this.state;
return (
{ inputValue.replace(/ /g, “\u00a0”) }
);
}
}
Частина .replace(/ /g, “\u00a0”) необхідна для того, щоб React правильно обробляв прогалини. Потім ми приховаємо span, додавши наступні рядки в селектор CSS input-highlight:
color: transparent;
user-select: none;
overflow: hidden;
Нам потрібно overflow: hidden для span, щоб обмежити висоту контейнера (інакше це призведе до розтягування контейнера по горизонталі — спасибі Prasanna і Andrea за те, що вони вказали це в коментарях!)
Підводячи риску
Все вже працює досить добре. Останній штрих — ми додамо для підсвічування інший onFocus колір. Щоб досягти цього, нам потрібен спосіб задати для span стиль, який застосовується, коли input виділено фокусом введення. input і span — це елементи одного рівня, тому ми будемо використовувати селектор CSS +. Ось повний код для селектора input, включаючи селектор + для input-highlight:
input {
height: 60px;
width: 100%;
min-width: 100%;
padding: 0;
border-radius: 0;
line-height: $input line-height;
background-color: transparent;
color: white;
font-size: $input-font-size;
border: none;
outline: none;
border-bottom: 3px solid #333333;
font-family: $font-family;
&:focus {
+ .input-highlight {
border-top: 3px solid #fbc91b;
}
}
}
Дякую за увагу! Якщо вам сподобався цей пост, поділіться посиланням зі своїми друзями.