#html #css #reactjs #flexbox #styled-components
Вопрос:
используя стилизованные компоненты для создания своего рода аккордеона — действительно изо всех сил стараясь закрепить стиль. Все в порядке, кроме высоты значка (должна быть на уровне заголовка «Отправляемые товары»), правое поле 12 пикселей идеально. Еще один вопрос, который у меня есть, заключается в том, что когда текст в промежутке расширяется более чем на одну строку, то каждая строка, следующая за первой, отступается влево?
кодовое обозначение: https://codepen.io/simoncunningham/pen/rNyeBYb
const Accordion = styled.div`
background-color: #e5e9eb;
height: 87px;
width: 612px;
border-radius: 2px;
border: 1px solid #27282a;
margin-bottom: 48px;
span {
font-size: 14px;
line-height: 20px;
padding-left: 24px;
}
`;
const AccordionExpanded = styled.div`
background-color: #e5e9eb;
height: 174px;
width: 612px;
border-radius: 2px;
border: 1px solid #27282a;
margin-bottom: 48px;
span {
font-size: 14px;
line-height: 20px;
padding-left: 24px;
}
`;
const Title = styled.h3`
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding-left: 24px;
padding-top: 20px;
padding-bottom: 0px;
`;
const ExpandIcon = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
`;
const CollapseIcon = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
-webkit-transform: rotate(180deg);
`;
const ExpandableString = ({ attribute, className }: Props) => {
const [isExpanded, setIsExpanded] = React.useState(false);
const fullDescription = attribute.readonlyvalue;
const shortHeading = fullDescription.substring(0, 40) '...';
function toggleContent() {
setIsExpanded(prev => !prev);
}
return (
isExpanded ? <AccordionExpanded className={className}>
<Title>Goods being sent</Title>
<span>{fullDescription}</span>
<CollapseIcon onClick={toggleContent} src={chevron} alt="Collapse content" aria-label="Collapse content" />
</AccordionExpanded> : <Accordion className={className}>
<Title>Goods being sent</Title>
<span>{shortHeading}</span>
<ExpandIcon onClick={toggleContent} src={chevron} alt="Expand content" aria-label="Expand content" />
</Accordion>
);
};
Комментарии:
1. пожалуйста, добавьте также рабочую демо-версию. большинство проблем css не могут быть решены с помощью кода. Спасибо!
2. codepen.io/simoncunningham/pen/rNyeBYb -создал этот кодовый набор, чтобы воспроизвести проблему
Ответ №1:
Если вы хотите, чтобы уровень значка был таким же, как у заголовка div, просто поместите значок span внутри заголовка div. float:right
об остальном позаботимся
Для многострочной проблемы с вашим промежутком. Просто добавьте display: block;
в свой класс content span.
Вот конечный результат;
.accordion {
background-color: #e5e9eb;
height: 87px;
width: 612px;
border-radius: 2px;
border: 1px solid #27282a;
margin-bottom: 48px;
}
.accordion span {
font-size: 14px !important;
padding-left: 24px;
display: block;
}
.title {
font-size: 12px;
letter-spacing: 1px;
text-transform: uppercase;
padding-left: 24px;
padding-top: 20px;
padding-bottom: 0px;
}
.icon {
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
background-color: red;
}
<div class="accordion">
<div class="title">
<div class="icon"></div>
Goods being sent
</div>
<span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur quis risus et diamaaw sollicitudin suscipit non vel justo. Morbi vel enim sit amet erat blandit pellentesque.</span>
</div>