#html #css #reactjs
Вопрос:
В настоящее время я работаю в проекте react. Существует страница сведений о товаре, которая отображается при нажатии на любой товар на странице почты (так же, как на странице продукта и сведений о продукте).
На этой странице сведений я хочу скрыть часть формы, когда пользователь не аутентифицирован, и показать кнопку входа в систему.
Недавно я столкнулся с тем, что статьи средней пары будут скрывать контент, если участник не входит в план подписки.
То же самое я хочу реализовать в своем проекте. я могу скрывать контент на основе isAuth.
function pageDetail({ auth }){
return (
<Actual content >
{ auth amp;amp;
<Form />
}
<Login-ui >
)
}
Здесь мне нужно скрыть от 50% снизу и показать пользовательский интерфейс входа с непрозрачностью сверху (такой же, как на изображении выше).
Любые предложения были бы весьма признательны. Спасибо
Комментарии:
1. Вы можете легко достичь этого с некоторыми
CSS
. Речь идет не о реакции!
Ответ №1:
вы можете создать компонент входа в систему с той же высотой видимой страницы и поместить в этот компонент фон с линейным градиентом:
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
затем вы должны заблокировать прокрутку статьи за ней, чтобы не показывать полный текст пользователям.