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

ssyyxx

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

大家好！好久不见了，不知道昨天8.0发布会，大家是否抽到奖品了呢？（我反正连一本书都没抽到T_T）

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

动画.gif802743224.png

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

首先，我们先搭建好页面布局，以及基础数据的录入
image.png148916625.png

我们先做左边菜单部分的样式：新建一个单元格样式，我们给他命名为“菜单”
image.png937127990.png

然后这一步非常重要：一定要把“当前行”和“选择行”都做一点点设置。如果全部未设置，HTML标签的类名不会出现"focus"和"selected"这两个状态，我们便无法用CSS选择器命中这两个状态对应的标签。
image.png937339477.png

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

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

image.png845916747.png

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

.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部分完成了，接下来让我们回到设计器，既然是编辑页面，我们当然得增加一些编辑功能
image.png343454284.png

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

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