如何实现超出 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 界面后的滑条展示?的详细内容,更多请关注知识资源分享宝库其它相关文章!
版权声明
本站内容来源于互联网搬运,
仅限用于小范围内传播学习,请在下载后24小时内删除,
如果有侵权内容、不妥之处,请第一时间联系我们删除。敬请谅解!
E-mail:dpw1001@163.com
发表评论