问题描述
我需要制作垂直滑块动画( dots and line
),如这张图片所示
我设法做手风琴和点,但我不知道我将如何实现它(我正在使用伪)
**我的手风琴组件我在其中根据数据数组定义嵌套手风琴的逻辑**
function MultiLevelAccordion({
data,bodyClass,headerClass,wrapperClass,renderHeader,renderContent,}) {
const RootAccordionId = 'parent-0';
const [accordionsstates,setActiveCardsIndex] = useMergeState({});
const onAccordionToggled = (id,activeEventKey) => {
console.log(activeEventKey);
setActiveCardsIndex({
[id]: activeEventKey ? Number(activeEventKey) : activeEventKey
});
};
console.log('data',data);
const accordionGenerator = (data,parentId) => {
return map(data,(item,index) => {
const active = accordionsstates[parentId] === index;
const hasChildren = item.hasOwnProperty('children') && isArray(item.children) && !isEmpty(item.children);
const isRootAccordion = RootAccordionId === parentId;
const isLastnestedAccordion = !isRootAccordion && !hasChildren;
const accordion = (
<Card className={classNames(wrapperClass,{
'nested-root-accordion': !isRootAccordion,'last-nested-root-accordion': isLastnestedAccordion,'multi-level-accordion': !isLastnestedAccordion
})}
>
<Accordion.Toggle
{...{ ...item.id && { id: item.id } }}
onClick={() => this}
as={Card.Header}
eventKey={`${index}`}
className={'cursor-pointer d-flex flex-column justify-content-center'}
>
<div className="d-flex justify-content-between align-items-center">
{renderHeader(item,hasChildren)}
<img
style={{
transition: 'all .5s ease-in-out',transform: `rotate(${active ? 180 : 0}deg)`
}}
src={setIcon('arrow-down')}
className="ml-2"
alt="collapse"
/>
</div>
</Accordion.Toggle>
<Accordion.Collapse eventKey={`${index}`}>
<Card.Body
className={`accordion-content-wrapper ${!hasChildren ? 'accordion-children-body' : ''} ${bodyClass}`}
>
{!hasChildren ? renderContent(item,hasChildren) : (
<Accordion onSelect={activeEventKey => onAccordionToggled(`${parentId}-${index}`,activeEventKey)}>
<Fade cascade top when={active}>
{accordionGenerator(item.children,`${parentId}-${index}`)}
</Fade>
</Accordion>
)}
</Card.Body>
</Accordion.Collapse>
</Card>
);
return isRootAccordion ? accordion : (
<div className={'d-flex align-items-center'}>
{accordion}
<div className="accordion-indicator-wrapper">
<div className="accordion-indicator" id={`indicator-${parentId}-${index}`} />
</div>
</div>
);
});
};
if (!isArray(data)) {
return;
}
return (
<Accordion onSelect={activeEventKey => onAccordionToggled(RootAccordionId,activeEventKey)}>
{accordionGenerator(data,RootAccordionId)}
</Accordion>
);
}
export default MultiLevelAccordion;
scss中使用的样式
.faqs-questions-wrapper {
padding: 20px 10px
}
.faqs-q-count {
color: $black-color;
font-size: calc(1rem - 1rem/8)
}
.faqs-q-a-wrapper {
flex-basis: 95%;
}
.faq-child-title {
color: $black-color
}
.nested-root-accordion {
flex-basis: 90%;
}
.accordion-indicator-wrapper {
flex-basis: 10%;
width: 100%;
display: flex;
justify-content: center;
.accordion-indicator {
width: 10px;
height: 10px;
border-radius: 50%;
background-color: $theme-color;
position: relative;
}
}
有什么线索吗?
提前致谢。
解决方法
React JS 让这一切变得简单
行扩展需要根据框窗口的高度进行编码
对于下拉容器,将垂直按钮线保留在与手风琴不同的 div 中
看看这支笔在按钮之间创建线条 https://codepen.io/cataldie/pen/ExVGjya css部分:
.status-container{
padding:10px;
margin:10px;
position:relative;
display: inline-block;
}
.bullet{
padding:0px;
margin:0px;
display: inline-block;
z-index: 10;
}
.bullet:before {
content: ' \25CF';
font-size: 5em;
}
.bullet-before{
/*position:relative;
right:-12px;*/
}
.bullet-after{
/*position:relative;
left:-30px;*/
}
.line{
stroke:blue;
stroke-width:0.3em;
padding:0px;
margin:0px;
display: inline-block;
}
.line-on{
stroke:red;
}
.line-off{
stroke:gray;
}
.color-on{
color: red;
}
.color-off{
color: gray;
}
https://codepen.io/emwing/pen/LgzJOx
我认为你可以在这里使用一些灵感