手写 collapse(折叠) 的 css/html 部分

最新推荐文章于 2024-08-27 09:43:18 发布

编程世界-云

最新推荐文章于 2024-08-27 09:43:18 发布

阅读量1.8k

点赞数

文章标签： html css 前端 web前端前端开发

本文链接：https://blog.csdn.net/weixin_45761317/article/details/103377572

版权

本文探讨如何使用HTML和SCSS手写一个前端折叠(collapse)组件，指出在现代框架如Vue和React中，大部分组件的实现重点在于CSS。文章展示了常规版本和简化版的效果，并提供了相关HTML和SCSS代码片段。

摘要由CSDN通过智能技术生成

做一个组件库不难

其实vue/react等框架的出现, 让自己做一个ui变得简单, 大部分的js逻辑都被库封装, 反而组件的代码主要都是css, 所以只要css写好了, 一个组件就完成60%以上了.

最终效果

常规版本

简化版

html

web前端开发学习Q-q-u-n：784783012 ，分享学习的方法和需要注意的小细节，不停更新最新的教程和学习方法
（学习工具，详细的前端项目实战教程，PDF
<div class="a-collapse a-collapse--simplify">
    <div class="a-collapse__item a-collapse__item--open">
        <header role="button">
            <i class="icon-arrow"></i>
            <p>唐诗</p>
        </header>
        <article role="tabpanel">
            <p>唐诗，泛指创作