资讯专栏INFORMATION COLUMN

写一个90分的list组件

SolomonXie / 2460人阅读

摘要:在切图中,有时会遇到设计师关键几点在于文字时前方点同时亮每个下方风格的分隔线每行文字前的点,大小可配置,颜色可配置多行文本时,点要固定在第一行的前面的可和点击区域不能太大源码链接实际效果还有一些不完善的地方,期待有更好的灵感。

在切图中,有时会遇到设计师

关键几点在于:

1.文字hover时前方点同时亮
2.每个list下方dash风格的分隔线
3.每行文字前的点,大小可配置,颜色可配置
4.多行文本时,点要固定在第一行的前面
5.a的可hover和点击区域不能太大

源码链接
http://jsbin.com/xinefa/edit?...

实际效果

还有一些不完善的地方,期待有更好的灵感。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/115514.html

相关文章

  • 前端项目目录如何组织

    摘要:背景最近看了发现其项目的目录结构组织的不错。然后再按照自己的项目经验,对其项目的组织进行修改,现在总结下自己的想法。总结以上就是我根据修改的,我认为比较通用的项目目录结构这里没有提到测试相关。 背景 最近看了 antd pro 发现其项目的目录结构组织的不错。然后再按照自己的项目经验,对其项目的组织进行修改,现在总结下自己的想法。 正题 我们看下 antd pro 自己生成的目录结构 ...

    ninefive 评论0 收藏0
  • 微信小程序——商城篇

    摘要:微信小程序之跳转在进入商品详情页以后,点击左下角的图标原应该跳转到首页,但是一直点也不跳,而且也不报错。放下效果图微信小程序购物车购物车页面逻辑的话,要按业务需求来。 前言 随着wepy和mpvue的出现及流行,开发小程序变的越来越便捷和强大,作为基佬社区的一份子,我们都需要把自己遇到的问题以及如何解决的方式相互分享,这样才能帮助到更多的朋(ji)友(lao)。如有写的不足的地方,请各...

    k00baa 评论0 收藏0
  • React性能探索 --- 避免不必要渲染

    摘要:如何修复既然是不需要渲染,那就要阻止它的渲染。我个人觉得,在实际中,用跟两个工具已经可以很好帮我们判断哪部分不需要重新渲染,帮助我们做出优化。 背景 上一篇文章的结尾http://imweb.io/topic/5985cc4...我们说到,也许,不是所有的节点都需要重新渲染,对于那些不需要渲染的节点,我们如何找到它们并做优化呢? 本篇文章来具体解答这个问题。 应用分析 首先,先看这个应...

    missonce 评论0 收藏0
  • 动手封装一个React Native多级联动

    摘要:如果只有用到里面非常简单的功能,很快就可以开发好,建议自己开发,没必要引用一个庞大的包,如果要特殊定制的话,就只有自己开发。 背景 肯定是最近有一个项目,需要一个二级联动功能了!本来想封装完整之后,放在github上面赚星星,但发现市面上已经有比较成熟的了,为什么我在开发之前没去搜索一下(项目很赶进度),泪崩啊,既然已经封装就来说说过程吧 任务开始 一. 原型图或设计图 在封装一个组件...

    Coly 评论0 收藏0
  • MongoDB 如何实现实时排名

    摘要:总之,通过这样的保存方式,我们能够实现当学生成绩改变时,快速简单的修改数据库记录,而又能够实时的查询出新的排名了。 当我们将考试分数录入系统时,会要对学生的分数进行一个排名,这个不困难。困难的是当学生的分数变更时,如何实时更新这些排名? 如果我们将排名保存为一个字段,那么意味着每次修改分数都会导致重新计算排名,以及更新数据库中的排名字段值。这个计算量可大可小,极端的情况下,如果一个学生...

    why_rookie 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<