如何实现超出 div 界面后的滑条展示？

编程并不是一个机械性的工作，而是需要有思考，有创新的工作，语法是固定的，但解决问题的思路则是依靠人的思维，这就需要我们坚持学习和更新自己的知识。今天golang学习网就整理分享《如何实现超出 div 界面后的滑条展示？ 》，文章讲解的知识点主要包括，如果你对文章方面的知识点感兴趣，就不要错过golang学习网，在这可以对大家的知识积累有所帮助，助力开发能力的提升。

如何实现超出 div 界面后的滑条展示

export type ItemType = {
    type: "property" | "method",
    value: string,
    selected?: boolean    
}

export type SubContainerProps = {
    height?: number,
    title: string,
    data: ItemType[], // 这个是items
}

export default function subContainer (props: SubContainerProps){ 

   

    return (
        <div style={{borderRadius: '8px',  border: '2px dashed #333', height: props.height, overflow: 'auto'}}>
            <div style={{textAlign: 'left'}}>
                <label>{props.title}</label>
            </div>
            <div>
                {props.data.map((item, index) => (
                    <div 
                        key={`${index}-${item.type}-${item.value} `} 
                        style={{ 
                            float: 'left', 
                            display: 'inline-block', 
                            borderRadius: '6px', 
                            border: '2px solid #000', 
                            margin: '8px', 
                            padding:'4px',
                            backgroundColor: item.selected ? '#39fe40': '' 
                        }}
                        
                    >{item.value}</div>
                ))}
            </div>
        </div>
    )
}

本篇关于《如何实现超出 div 界面后的滑条展示？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！