阿凡佬 发表于 2022-7-9 15:16:53

【CSS美化专题】图文列表的妙用

本帖最后由 阿凡佬 于 2022-7-14 09:07 编辑

大家好!好久不见了,不知道昨天8.0发布会,大家是否抽到奖品了呢?(我反正连一本书都没抽到T_T)

为庆祝活字格8.0版本上线,我给大家带来了一张咖啡馆的菜单,想喝啥我请客
先看成品



让我们看看它是如何实现的吧!

首先,我们先搭建好页面布局,以及基础数据的录入


我们先做左边菜单部分的样式:新建一个单元格样式,我们给他命名为“菜单”
然后这一步非常重要:一定要把“当前行”和“选择行”都做一点点设置。如果全部未设置,HTML标签的类名不会出现"focus"和"selected"这两个状态,我们便无法用CSS选择器命中这两个状态对应的标签。

这里我把它的五个状态的左外边距设置为1,这样对样式影响最小。
然后右边的图文列表,我们也给他新建一个单元格样式,叫“菜品”


然后在设计器里添加一个空白的CSS文件,再点击运行





接下来的活就可以抛弃设计器了,我们直接用浏览器的开发工具,找到我们刚刚添加的空白的CSS文件,在其中添加一点点代码:

.ForguncyRepeaterCellType-菜单-TEMPLATE {/*整体样式设置*/
    background: #FFFFFF;
    border: #EEEEEE solid 1px;
    transition: ease-in-out .15s;
}

.ForguncyRepeaterCellType-菜单-TEMPLATE::after {/*前面的bar*/
    content: "";
    height: 0%; /*默认隐藏,当选择时显示*/
    width: 3px;
    background: #4B7AE9;
    position: absolute;
    top: 50%;
    left: 0%;
    transition: ease-in .15s;
    border-top-left-radius:3px;
    border-bottom-left-radius:3px;
    box-shadow: inset 2px 3px 6px -3px #ffffff, inset 4px 0 3px -4px #2f2f2f,1px 0 2px -1px #000000;
}

.ForguncyRepeaterCellType-菜单-TEMPLATE.ForguncyRepeaterCellType-菜单-TEMPLATE-focus {
    z-index: 99;
    box-shadow: 1px 2px 10px -3px #00000024;
}

.ForguncyRepeaterCellType-菜单-TEMPLATE.ForguncyRepeaterCellType-菜单-TEMPLATE-focus::after {
    top: 0%;
    height: 100%;/*将前面的bar显示出来*/
}让我们看看效果

还行~

在浏览器内编辑的代码,一定不要忘了,把它复制再粘贴回设计器中的CSS文件哦,不然浏览器一关,好,前功尽弃~!

现在给菜品部分,添加一点点代码。对了,在这之前,先在设计器中排版好菜品的内容格式
.ForguncyRepeaterCellType-菜品-TEMPLATE {
    /*整体样式设置*/
    background: #FFFFFF;
    border: #EEEEEE solid 1px;
    transition: ease-in-out .15s;
    border-radius: 10px !important;
    /*一般来讲,圆角应当直接在设计器里设置,而不是像这样用!important关键字去覆盖*/
    margin-top: 4px;
}
.ForguncyRepeaterCellType-菜品-TEMPLATE::after {
    content: "";
    position: absolute;
    background: var(--FGC_Accent1, #4B7AE9);
    height: 100%;
    width: 0px;
    opacity: 0;
    top: 0;
    left: 0;
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
    transition: ease-out .15s;
    box-shadow: inset -6px 0 6px -6px #00000069;
}

.ForguncyRepeaterCellType-菜品-TEMPLATE:hover::after {
    width: 8px;
    opacity: 1;
}

.ForguncyRepeaterCellType-菜品-TEMPLATE>div {
    transition: ease-out .15s;
}

.ForguncyRepeaterCellType-菜品-TEMPLATE:hover>div {
    margin-left: 4px;
}让我们看看效果

在鼠标移过的时候,有一个动态效果,用户能够准确判断鼠标位置

CSS部分完成了,接下来让我们回到设计器,既然是编辑页面,我们当然得增加一些编辑功能

但是现在看这个页面,是不是觉得,很多不必要的按钮出现在页面上,使整个页面变得杂乱了。如果能够使除用户焦点之外的按钮隐藏,那么页面能够变得很整洁
现在让我们直点今天的主题:图文列表的妙用

我们知道,在设计器中我们可以用条件格式判断一个单元格的值,并设置其禁用、不可见和只读。因此,我们只需要一个值,能够指示是否当前行即可但是图文列表的关联列只提供了 行选择状态 ,并未提供当前行呀

其实我们完全可以在表格的当前行变更命令中,模拟出一个指示当前行的列


如此两行命令即可。
之后,在图文列表模板页内添加一个隐藏列,再将按钮的条件格式设置为:
让我们来看看效果吧


然后有格友提出要求了,我想让右边菜品栏的编辑按钮,鼠标悬停在卡片上方时显示,该如何实现呢?
这时候条件格式失去作用了,我们又需要把目光回到CSS上
我们先给这个按钮赋一个CSS类名:悬停显示

.ForguncyRepeaterCellType-菜品-TEMPLATE .悬停显示
然后这个选择器,便能准确命中这个按钮了。
接下来就是我们为所欲为的时候了,简简单单几行代码,就实现了悬停显示的效果
.ForguncyRepeaterCellType-菜品-TEMPLATE .悬停显示{
    opacity:0;
    transition: ease-out .2s;
}
.ForguncyRepeaterCellType-菜品-TEMPLATE:hover .悬停显示{
    opacity:1;
}

好了,大功告成!以下是这次的工程文件和源码

**** Hidden Message *****





阿凡佬 发表于 2022-7-9 15:19:02

本帖最后由 阿凡佬 于 2022-7-9 15:22 编辑

第一期:【CSS美化专题】用CSS美化表格删除按钮
第二期:【CSS美化专题】原生日历控件美化
第三期:【CSS美化专题】单选框组件美化——在拟物化的岔路上越走越远
第四期:【CSS美化专题】更美观的下拉窗口
第五期:【CSS美化专题】不一样的菜单用法
第六期:【CSS美化专题】图文列表的妙用


遇见未知的自己 发表于 2022-7-9 16:03:12

:hjyzw::hjyzw::hjyzw:

tominson 发表于 2022-7-9 17:17:18

好牛

caozb 发表于 2022-7-9 20:47:46

好牛

WangSR 发表于 2022-7-9 22:06:49

学到了学到了牛逼

dlxubo 发表于 2022-7-10 15:05:07

:i0tw:

歪比马卡 发表于 2022-7-11 09:18:49

想看看源码

ilham101 发表于 2022-7-11 15:06:31

感谢

jeffmy 发表于 2022-7-12 14:04:22

这个教程好详细,谢谢楼主
页: [1] 2 3 4 5 6 7 8 9
查看完整版本: 【CSS美化专题】图文列表的妙用