数据库模版列如何使用这样的进度条

本贴最后更新于 343 天前,其中的信息可能已经水流花落

对于每天看打卡状态的人来说,通过 checkbox 打卡再正常不过了,虽然模板列的功能很强大,可玩性更高,但是对小白真的很不友好,像这样通过 checkbox 显示的进度条在 notion、flowus、wolai 上都能轻松实现,求求好心的大佬给个代码,相信会有很多人需要的 🙏

CleanShot20240405at00.19.082x.png

  • 思源笔记

    思源笔记是一款隐私优先的个人知识管理系统,支持完全离线使用,同时也支持端到端加密同步。

    融合块、大纲和双向链接,重构你的思维。

    24526 引用 • 100386 回帖
  • Q&A

    提问之前请先看《提问的智慧》,好的问题比好的答案更有价值。

    9265 引用 • 42141 回帖 • 118 关注

相关帖子

被采纳的回答
  • 如果按照你的图片,大概按下面的代码改改就能用了:

    image.png

    .action{$total:= 4} .action{/* 填列数 */} .action{$count:= 0} .action{/* 有多少列就填多少组 */} .action{$state1:= index . "早起"} .action{$state2:= index . "运动"} .action{$state3:= index . "阅读"} .action{$state4:= index . "日报"} .action{if eq $state1 "√"} .action{$count = add1 $count} .action{end} .action{if eq $state2 "√"} .action{$count = add1 $count} .action{end} .action{if eq $state3 "√"} .action{$count = add1 $count} .action{end} .action{if eq $state4 "√"} .action{$count = add1 $count} .action{end} .action{$width:= round (mulf (divf $count $total) 100) 0} .action{$transparency:= addf (mulf (divf $count $total) 0.8) 0.2} <div style="display: flex; justify-content: flex-end; height: 100%;"> <span style="font-size: 100%; margin-right: 4px;">.action{$width}%</span> <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 12px;border-radius: 6px;align-self: center;overflow: hidden;"> <span style="text-align: right; font-size: 12px; width: .action{$width}%; background-color: rgba(45,164,78,.action{$transparency}); display: inline-block;height: inherit;vertical-align: top;"></span> </span> </div>

欢迎来到这里!

我们正在构建一个小众社区,大家在这里相互信任,以平等 • 自由 • 奔放的价值观进行分享交流。最终,希望大家能够找到与自己志同道合的伙伴,共同成长。

注册 关于
请输入回帖内容 ...
  • SenorPink via macOS

    u r right!!

  • 其他回帖
  • 另外你可能会需要关注这个 issue :数据库主键支持隐藏、编辑名称 #10882

    1 回复
  • 如果按照你的图片,大概按下面的代码改改就能用了:

    image.png

    .action{$total:= 4} .action{/* 填列数 */} .action{$count:= 0} .action{/* 有多少列就填多少组 */} .action{$state1:= index . "早起"} .action{$state2:= index . "运动"} .action{$state3:= index . "阅读"} .action{$state4:= index . "日报"} .action{if eq $state1 "√"} .action{$count = add1 $count} .action{end} .action{if eq $state2 "√"} .action{$count = add1 $count} .action{end} .action{if eq $state3 "√"} .action{$count = add1 $count} .action{end} .action{if eq $state4 "√"} .action{$count = add1 $count} .action{end} .action{$width:= round (mulf (divf $count $total) 100) 0} .action{$transparency:= addf (mulf (divf $count $total) 0.8) 0.2} <div style="display: flex; justify-content: flex-end; height: 100%;"> <span style="font-size: 100%; margin-right: 4px;">.action{$width}%</span> <span style="background-color: rgba(175,184,193,0.2); width: 100%; display: inline-block;height: 12px;border-radius: 6px;align-self: center;overflow: hidden;"> <span style="text-align: right; font-size: 12px; width: .action{$width}%; background-color: rgba(45,164,78,.action{$transparency}); display: inline-block;height: inherit;vertical-align: top;"></span> </span> </div>
    1 回复
  • SenorPink via macOS

    真是太棒了!我昨天写的时候总是想把每个 ✓ 转成 1,原来可以这么简单就实现!😭

  • 查看全部回帖

推荐标签 标签

  • sts
    2 引用 • 2 回帖 • 219 关注
  • 人工智能

    人工智能(Artificial Intelligence)是研究、开发用于模拟、延伸和扩展人的智能的理论、方法、技术及应用系统的一门技术科学。

    152 引用 • 279 回帖
  • 强迫症

    强迫症(OCD)属于焦虑障碍的一种类型,是一组以强迫思维和强迫行为为主要临床表现的神经精神疾病,其特点为有意识的强迫和反强迫并存,一些毫无意义、甚至违背自己意愿的想法或冲动反反复复侵入患者的日常生活。

    15 引用 • 161 回帖 • 1 关注
  • CodeMirror
    1 引用 • 2 回帖 • 148 关注
  • 运维

    互联网运维工作,以服务为中心,以稳定、安全、高效为三个基本点,确保公司的互联网业务能够 7×24 小时为用户提供高质量的服务。

    150 引用 • 257 回帖
  • SSL

    SSL(Secure Sockets Layer 安全套接层),及其继任者传输层安全(Transport Layer Security,TLS)是为网络通信提供安全及数据完整性的一种安全协议。TLS 与 SSL 在传输层对网络连接进行加密。

    70 引用 • 193 回帖 • 416 关注
  • 电影

    这是一个不能说的秘密。

    122 引用 • 608 回帖
  • 域名

    域名(Domain Name),简称域名、网域,是由一串用点分隔的名字组成的 Internet 上某一台计算机或计算机组的名称,用于在数据传输时标识计算机的电子方位(有时也指地理位置)。

    43 引用 • 208 回帖 • 2 关注
  • Sandbox

    如果帖子标签含有 Sandbox ,则该帖子会被视为“测试帖”,主要用于测试社区功能,排查 bug 等,该标签下内容不定期进行清理。

    425 引用 • 1250 回帖 • 598 关注
  • Rust

    Rust 是一门赋予每个人构建可靠且高效软件能力的语言。Rust 由 Mozilla 开发,最早发布于 2014 年 9 月。

    58 引用 • 22 回帖 • 2 关注
  • Sublime

    Sublime Text 是一款可以用来写代码、写文章的文本编辑器。支持代码高亮、自动完成,还支持通过插件进行扩展。

    10 引用 • 5 回帖
  • uTools

    uTools 是一个极简、插件化、跨平台的现代桌面软件。通过自由选配丰富的插件,打造你得心应手的工具集合。

    7 引用 • 27 回帖
  • 大数据

    大数据(big data)是指无法在一定时间范围内用常规软件工具进行捕捉、管理和处理的数据集合,是需要新处理模式才能具有更强的决策力、洞察发现力和流程优化能力的海量、高增长率和多样化的信息资产。

    93 引用 • 113 回帖
  • 支付宝

    支付宝是全球领先的独立第三方支付平台,致力于为广大用户提供安全快速的电子支付/网上支付/安全支付/手机支付体验,及转账收款/水电煤缴费/信用卡还款/AA 收款等生活服务应用。

    29 引用 • 347 回帖 • 2 关注
  • 代码片段

    代码片段分为 CSS 与 JS 两种代码,添加在 [设置 - 外观 - 代码片段] 中,这些代码会在思源笔记加载时自动执行,用于改善笔记的样式或功能。

    用户在该标签下分享代码片段时需在帖子标题前添加 [css] [js] 用于区分代码片段类型。

    126 引用 • 848 回帖
  • 深度学习

    深度学习(Deep Learning)是机器学习的分支,是一种试图使用包含复杂结构或由多重非线性变换构成的多个处理层对数据进行高层抽象的算法。

    54 引用 • 40 回帖
  • 宕机

    宕机,多指一些网站、游戏、网络应用等服务器一种区别于正常运行的状态,也叫“Down 机”、“当机”或“死机”。宕机状态不仅仅是指服务器“挂掉了”、“死机了”状态,也包括服务器假死、停用、关闭等一些原因而导致出现的不能够正常运行的状态。

    13 引用 • 82 回帖 • 74 关注
  • 持续集成

    持续集成(Continuous Integration)是一种软件开发实践,即团队开发成员经常集成他们的工作,通过每个成员每天至少集成一次,也就意味着每天可能会发生多次集成。每次集成都通过自动化的构建(包括编译,发布,自动化测试)来验证,从而尽早地发现集成错误。

    15 引用 • 7 回帖
  • jQuery

    jQuery 是一套跨浏览器的 JavaScript 库,强化 HTML 与 JavaScript 之间的操作。由 John Resig 在 2006 年 1 月的 BarCamp NYC 上释出第一个版本。全球约有 28% 的网站使用 jQuery,是非常受欢迎的 JavaScript 库。

    63 引用 • 134 回帖 • 732 关注
  • Eclipse

    Eclipse 是一个开放源代码的、基于 Java 的可扩展开发平台。就其本身而言,它只是一个框架和一组服务,用于通过插件组件构建开发环境。

    76 引用 • 258 回帖 • 638 关注
  • Electron

    Electron 基于 Chromium 和 Node.js,让你可以使用 HTML、CSS 和 JavaScript 构建应用。它是一个由 GitHub 及众多贡献者组成的活跃社区共同维护的开源项目,兼容 Mac、Windows 和 Linux,它构建的应用可在这三个操作系统上面运行。

    15 引用 • 136 回帖 • 3 关注
  • 30Seconds

    📙 前端知识精选集,包含 HTML、CSS、JavaScript、React、Node、安全等方面,每天仅需 30 秒。

    • 精选常见面试题,帮助您准备下一次面试
    • 精选常见交互,帮助您拥有简洁酷炫的站点
    • 精选有用的 React 片段,帮助你获取最佳实践
    • 精选常见代码集,帮助您提高打码效率
    • 整理前端界的最新资讯,邀您一同探索新世界
    488 引用 • 384 回帖 • 3 关注
  • 互联网

    互联网(Internet),又称网际网络,或音译因特网、英特网。互联网始于 1969 年美国的阿帕网,是网络与网络之间所串连成的庞大网络,这些网络以一组通用的协议相连,形成逻辑上的单一巨大国际网络。

    99 引用 • 361 回帖
  • SpaceVim

    SpaceVim 是一个社区驱动的模块化 vim/neovim 配置集合,以模块的方式组织管理插件以
    及相关配置,为不同的语言开发量身定制了相关的开发模块,该模块提供代码自动补全,
    语法检查、格式化、调试、REPL 等特性。用户仅需载入相关语言的模块即可得到一个开箱
    即用的 Vim-IDE。

    3 引用 • 31 回帖 • 116 关注
  • Laravel

    Laravel 是一套简洁、优雅的 PHP Web 开发框架。它采用 MVC 设计,是一款崇尚开发效率的全栈框架。

    20 引用 • 23 回帖 • 737 关注
  • Dubbo

    Dubbo 是一个分布式服务框架,致力于提供高性能和透明化的 RPC 远程服务调用方案,是 [阿里巴巴] SOA 服务化治理方案的核心框架,每天为 2,000+ 个服务提供 3,000,000,000+ 次访问量支持,并被广泛应用于阿里巴巴集团的各成员站点。

    60 引用 • 82 回帖 • 612 关注
  • SQLServer

    SQL Server 是由 [微软] 开发和推广的关系数据库管理系统(DBMS),它最初是由 微软、Sybase 和 Ashton-Tate 三家公司共同开发的,并于 1988 年推出了第一个 OS/2 版本。

    21 引用 • 31 回帖