分享一个自定义Block样式

Hardy 2023-2-21 613

.node[block-style~='card'] {
 /** 可以在这里修改颜色 **/
  --color: var(--cl-slate-400);

  outline: 1px solid var(--color);
  border-radius: 4px;
  padding: 0px;
  margin-top: 8px !important;
  
  > .node-tools {
    margin-left: -28px;
    opacity: 0;
  }
  
  &:hover {
  	> .node-tools {
    	opacity: 1;
    }
  }
  
  > .node-head {
  	background-color: var(--color);
    padding-top: 4px;
    padding-bottom: 4px;
    min-width: 100%;
  }
  
  > .node-body {
  	padding-left: 0px !important;
    margin-left: 0px !important;
    border-left: none !important;
  }
}

实现的 Block 样式效果:

使用方式:

将以上代码添加到 App/Styles 主题内的 Block styles 节点之下,如下图

 

然后就可以在节点的功能菜单中调用这个样式了,如下图:

 

 

快速回复
最新回复 (3)
  • himrgin 2023-3-2
    0 2
    外行人,普通大众消费者,软件使用者,代码小白的我,我觉得大部分基数的人和我一样吧,我是完全看不懂你表达啥意思? 哗众取宠 花里胡巧 纯属个人恨铁不成钢的思维。
  • Neo 12月前
    0 3
    写的很不错
  • 泉毅 11月前
    0 4
    himrgin 外行人,普通大众消费者,软件使用者,代码小白的我,我觉得大部分基数的人和我一样吧,我是完全看不懂你表达啥意思? 哗众取宠 花里胡巧 纯属个人恨铁不成钢的思维。
    卡片视窗是我私信联系开发者开发的,因为我从V1就一直开始用这个视窗,没有这个视窗我比较不习惯,就联系了hardy,hardy很快就给出了解决方案。
    这个样式直接拷贝过去就能用,完全没有什么障碍。
返回