开源项目 `details-utils` 使用教程

于 2024-08-27 09:40:40 发布
阅读量185 收藏 2
点赞数 2
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gitblog_00355/article/details/141592543
版权

开源项目 details-utils 使用教程

details-utilsA suite of utilities to add more features to the

element.项目地址:https://gitcode.com/gh_mirrors/de/details-utils

项目介绍

details-utils 是一个开源项目，旨在为 HTML 的 <details> 元素添加更多功能。通过这个项目，开发者可以轻松地为 <details> 元素添加点击外部关闭、动画展开和关闭、强制状态、按下 ESC 键关闭等功能。该项目由 Zach Leatherman 开发，并在 GitHub 上开源。

项目快速启动

安装

首先，通过 npm 安装 details-utils：

npm install @zachleat/details-utils

使用

在项目中引入 details-utils 并使用：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Details Utils Demo</title>
    <script src="node_modules/@zachleat/details-utils/details-utils.js"></script>
</head>
<body>
    <details-utils>
        <details>
            <summary>点击我</summary>
            <p>这是展开的内容。</p>
        </details>
    </details-utils>
</body>
</html>

应用案例和最佳实践

点击外部关闭

通过 details-utils，可以实现点击 <details> 元素外部时自动关闭：

<details-utils>
    <details>
        <summary>点击我</summary>
        <p>这是展开的内容。</p>
    </details>
</details-utils>

动画展开和关闭

添加动画效果，使 <details> 元素展开和关闭时更加平滑：

<details-utils animate>
    <details>
        <summary>点击我</summary>
        <p>这是展开的内容。</p>
    </details>
</details-utils>

按下 ESC 键关闭

允许用户通过按下 ESC 键来关闭 <details> 元素：

<details-utils close-on-esc>
    <details>
        <summary>点击我</summary>
        <p>这是展开的内容。</p>
    </details>
</details-utils>

典型生态项目

details-utils 可以与其他前端框架和库结合使用，例如：

  • React: 通过自定义组件封装 details-utils，使其在 React 项目中更易用。
  • Vue.js: 利用 Vue 的指令系统，将 details-utils 的功能集成到 Vue 组件中。
  • Web Components: 直接在 Web Components 项目中使用 details-utils，增强 <details> 元素的功能。

通过这些结合使用，可以进一步提升前端项目的用户体验和交互效果。

details-utilsA suite of utilities to add more features to the

element.项目地址:https://gitcode.com/gh_mirrors/de/details-utils

郝赢泉
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue使用xe-utils函数库的具体方法
08-27
"Vue 使用 XE-Utils 函数库的具体方法" 了解 Vue 中使用 XE-Utils 函数库的具体方法，可以帮助开发者更好地使用该函数库，提高开发效率和质量。XE-Utils 是一个功能强大且灵活的 JavaScript 实用程序库，提供了多种...
alsa-utils alsa-utils alsa-utils
11-27
alsa-utils
前端项目-jszip-utils.zip
09-03
【jszip-utils.zip】是一个前端项目，主要包含与JSZIP库配合使用的跨浏览器工具集合。JSZIP是一款强大的...通过对【jszip-utils-master】的深入理解和使用，可以提升前端项目在文件操作方面的性能和用户体验。
vxe-utils::cactus: 用于 Vue 全局安装 xe-utils
05-05
vxe-utils 用于Vue全局安装xe-utils 正在安装 npm install xe-utils vxe-utils < script src =" https://cdn.jsdelivr.net/npm/vue " > </ script > < script src =" ...
nfs-utils离线安装包.zip
08-19
离线安装nfs-utils用，安装nfs-utils所需依赖也都在里面 复制到服务器后直接执行以下命令即可顺利安装： sudo rpm -ivh *.rpm --force --nodeps sudo systemctl start rpcbind sudo systemctl enable rpcbind ...
基于微信小程序社区垃圾回收管理系统设计与实现.docx
08-27
基于微信小程序社区垃圾回收管理系统设计与实现.docx
基于YOLOv9实现工业布匹缺陷(破洞、污渍)检测系统python源码+详细运行教程+训练好的模型+评估指标曲线.zip
08-27
基于YOLOv9实现工业布匹缺陷(破洞、污渍)检测系统python源码+详细运行教程+训练好的模型+评估 【使用教程】 一、环境配置 1、建议下载anaconda和pycharm 在anaconda中配置好环境，然后直接导入到pycharm中，在pycharm中运行项目 anaconda和pycharm安装及环境配置参考网上博客，有很多博主介绍 2、在anacodna中安装requirements.txt中的软件包 命令为：pip install -r requirements.txt 或者改成清华源后再执行以上命令，这样安装要快一些 软件包都安装成功后才算成功 3、安装好软件包后，把anaconda中对应的python导入到pycharm中即可（不难，参考网上博客） 二、环境配置好后，开始训练（也可以训练自己数据集） 1、数据集准备 需要准备yolo格式的目标检测数据集，如果不清楚yolo数据集格式，或者有其他数据训练需求，请看博主yolo格式各种数据集集合链接：https://blog.csdn.net/DeepLearning_/article/details/127276492 里面涵盖了上百种yolo数据集，且在不断更新，基本都是实际项目使用。来自于网上收集、实际场景采集制作等，自己使用labelimg标注工具标注的。数据集质量绝对有保证！ 本项目所使用的数据集，见csdn该资源下载页面中的介绍栏，里面有对应的下载链接，下载后可直接使用。 2、数据准备好，开始修改配置文件 参考代码中data文件夹下的banana_ripe.yaml，可以自己新建一个不同名称的yaml文件 train：训练集的图片路径 val：验证集的图片路径 names: 0: very-ripe 类别1 1: immature 类别2 2: mid-ripe 类别3 格式按照banana_ripe.yaml照葫芦画瓢就行，不需要过多参考网上的 3、修改train_dual.py中的配置参数，开始训练模型 方式一： 修改点： a.--weights参数，填入'yolov9-s.pt'，博主训练的是yolov9-s，根据自己需求可自定义 b.--cfg参数，填入 models/detect/yolov9-c.yaml c.--data参数，填入data/banana_ripe.yaml，可自定义自己的yaml路径 d.--hyp参数，填入hyp.scratch-high.yaml e.--epochs参数，填入100或者200都行，根据自己的数据集可改 f.--batch-size参数，根据自己的电脑性能（显存大小）自定义修改 g.--device参数，一张显卡的话，就填0。没显卡，使用cpu训练，就填cpu h.--close-mosaic参数，填入15 以上修改好，直接pycharm中运行train_dual.py开始训练 方式二： 命令行方式，在pycharm中的终端窗口输入如下命令，可根据自己情况修改参数 官方示例：python train_dual.py --workers 8 --device 0 --batch 16 --data data/coco.yaml --img 640 --cfg models/detect/yolov9-c.yaml --weights '' --name yolov9-c --hyp hyp.scratch-high.yaml --min-items 0 --epochs 500 --close-mosaic 15 训练完会在runs/train文件下生成对应的训练文件及模型，后续测试可以拿来用。 三、测试 1、训练完，测试 修改detect_dual.py中的参数 --weights，改成上面训练得到的best.pt对应的路径 --source，需要测试的数据图片存放的位置，代码中的test_imgs --conf-thres，置信度阈值，自定义修改 --iou-thres，iou阈值，自定义修改 其他默认即可 pycharm中运行detect_dual.py 在runs/detect文件夹下存放检测结果图片或者视频 【特别说明】 *项目内容完全原创，请勿对项目进行外传，或者进行违法等商业行为！ 【备注】 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！有问题请及时沟通交流。 2、适用人群：计算机相关专业(如计科、信息安全、数据科学与大数据技术、人工智能、通信、物联网、自动化、电子信息等)在校学生、专业老师或者企业员工下载使用。
java-ssm+jsp明星周边在线购物商城实现源码
08-27
java-ssm+jsp明星周边在线购物商城 项目关键技术 开发工具：IDEA 、Eclipse 编程语言: Java 数据库: MySQL5.7+ 后端技术：ssm 前端技术：jsp 关键技术：jsp、spring、ssm、MYSQL、MAVEN 数据库工具：Navicat、SQLyog
专题01 数列大题基础练（解析版） (1).pdf
08-27
专题01 数列大题基础练（解析版） (1)
【优质】基于sa4828的智能化全数字式专用变频器的硬件设计.doc
08-27
【优质】基于sa4828的智能化全数字式专用变频器的硬件设计.doc
基于微信小程序婚庆摄影小程序设计与实现.docx
08-27
基于微信小程序婚庆摄影小程序设计与实现.docx
java基于ssm+vue银行贷款管理系统源码 带毕业论文+PPT
08-27
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
【机械手控制】基于matlab机器人机械手自适应模糊滑模控制【含Matlab源码 7368期】.mp4
08-27
Matlab研究室上传的视频均有对应的完整代码，皆可运行，亲测可用，适合小白； 1、代码压缩包内容 主函数：main.m； 调用函数：其他m文件；无需运行 运行结果效果图； 2、代码运行版本 Matlab 2019b；若运行有误，根据提示修改；若不会，私信博主； 3、运行操作步骤 步骤一：将所有文件放到Matlab的当前文件夹中； 步骤二：双击打开main.m文件； 步骤三：点击运行，等程序运行完得到结果； 4、仿真咨询 如需其他服务，可私信博主或扫描视频QQ名片； 4.1 博客或资源的完整代码提供 4.2 期刊或参考文献复现 4.3 Matlab程序定制 4.4 科研合作
Another-Redis-Desktop-Manager.1.6.7.exe
08-27
Redis桌面(GUI)管理客户端
基于ZigBee的无线控制系统软硬件设计.docx
最新发布
08-27
基于ZigBee的无线控制系统软硬件设计.docx
基于微信小程序中国剪纸微信小程序的设计与实现.docx
08-27
基于微信小程序中国剪纸微信小程序的设计与实现.docx
java基于ssm+vue线上办公管理系统源码 带毕业论文
08-27
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；VUE技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
springboot591图书大厦图书管理系统的设计与实现--.zip
08-27
随着互联网时代的发展，传统的线下管理技术已无法高效、便捷的管理信息。为了迎合时代需求，优化管理效率，各种各样的管理系统应运而生，图书大厦图书管理日益严峻下，图书大厦图书管理系统建设也逐渐进入了信息化时代。 这个系统的设计主要包括方便管理员和用户两者互动的后端数据库，要求系统需要良好的数据处理能力、友好的界面和易用的功能。 数据要被工作人员通过界面操作传输至数据库中。通过研究，以MySQL为数据库，以IDEA为开发平台，采用SPRINGBOOT架构，建立以首页，个人中心，用户管理，图书分类管理，图书信息管理，图书借阅管理，图书续借管理，图书归还管理，反馈类型管理，需求反馈管理，归还入库管理，系统管理等必要功能的、稳定的图书大厦图书管理系统。
基于PLC的温度控制系统设计—硬件和MCGS监控界面设计（已处理）.doc
08-27
基于PLC的温度控制系统设计—硬件和MCGS监控界面设计（已处理）.doc
docker项目部署
08-21
Docker项目部署是指使用Docker容器技术将应用程序和依赖项打包成可移植的容器，并在不同的环境中进行部署和运行。通过使用Docker，可以实现应用程序在不同的操作系统和硬件平台上的一致性，并提供更高的灵活性和可扩展性。 首先，为了进行Docker项目部署，我们需要了解Docker的概念和原理。Docker是一种开源的容器化平台，它可以将应用程序及其依赖项打包在一个独立的容器中，与宿主机隔离，并提供一致的运行环境。这使得应用程序的部署和管理更加简单和高效。 在部署Docker项目之前，我们需要安装Docker CE，即Docker社区版。在CentOS 7上安装Docker CE的步骤如下： 1. 安装Docker的依赖库： ``` yum install -y yum-utils device-mapper-persistent-data lvm2 ``` 2. 添加Docker CE的软件源信息： ``` sudo yum-config-manager --add-repo https://download.docker.com/linux/centos/docker-ce.repo ``` 安装完成后，可以使用Docker命令行工具来构建、运行和管理Docker容器。通过编写Dockerfile文件，可以定义容器的配置和依赖项，并使用Docker构建命令来构建镜像。然后，可以使用Docker run命令来启动容器并运行应用程序。 除了在单个主机上部署Docker项目，还可以使用Docker Swarm或Kubernetes等容器编排工具，将多个Docker容器组织成一个集群，并实现负载均衡和高可用性。 总结来说，Docker项目部署是通过将应用程序和依赖项打包成容器，并使用Docker工具来进行部署和管理。这种方式可以提供一致的运行环境、高效的部署过程和更好的可扩展性。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [docker项目部署](https://blog.csdn.net/m0_49556309/article/details/117093002)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* *3* [使用Docker部署前端项目实战教程，该踩的坑我都帮你踩了！](https://blog.csdn.net/qq_32442973/article/details/119963691)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

郝赢泉

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值