表单自定义组件 - 可选择卡片SelectCard

在这里插入图片描述

import React from 'react';
import styles from './index.module.less';type OptionsType = {/*** 每个item渲染一行,第0项为标题*/labels?: any[];/*** 自定义渲染内容*/label?: string | React.ReactNode;value: any;
};
interface IProps {value?: any;onChange?: Function;options: OptionsType[];layout?: 'horizontal' | 'vertical';disabled?: boolean;
}export default function Index(props: IProps) {const { value, onChange = () => {}, options, layout = 'horizontal', disabled = false } = props;const clickHandler = (row) => {if (disabled) return;if (value === row.value) {onChange(undefined);} else {onChange(row.value);}};return (<div className={`${styles.container} ${styles[layout]}`}>{options?.map((item, index) => {const activeStyles = item.value === value ? styles['select-card-checked'] : styles['select-card'];const disabledStyles = disabled ? styles['select-card-disabled'] : '';return (<div key={index} className={`${activeStyles} ${disabledStyles}`.trim()} onClick={() => clickHandler(item)}><div className={styles.corner}></div><div className={styles.content}>{item?.label? item?.label: item?.labels?.map((v, idx) => {return (<React.Fragment key={idx}>{idx === 0 && v ? (<div className={styles.title}>{v}</div>) : (<div className={styles.text}>{v}</div>)}</React.Fragment>);})}</div></div>);})}</div>);
}
@primaric-color: #5050e6;
@primary-color-opacity: #5050e680;.container {.select-card {position: relative;width: 300px;padding: 14px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);border: 1px solid #f9f9f9;background-color: #fff;cursor: pointer;margin: 0 14px 14px 0;.corner {position: absolute;top: 2px;right: 2px;width: 0;height: 0;border-top: 12px solid #5050e6;border-left: 12px solid transparent;border-radius: 0 3px 0 0;opacity: 0;}.content {.title {margin: 0;font-size: 15px;font-weight: bold;color: #333;margin-bottom: 10px;}.title:nth-last-of-type(1) {margin-bottom: 0;}.text {margin-bottom: 10px;font-size: 14px;color: #666;}.text:nth-last-of-type(1) {margin-bottom: 0;}}}.select-card:hover {border-color: @primary-color-opacity;box-shadow: 0 0 3px 0 @primaric-color;}.select-card:nth-last-of-type(1) {margin: 0;}.select-card-checked {position: relative;width: 300px;padding: 14px;border-radius: 5px;box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);border: 1px solid @primary-color-opacity;background-color: #f0f2ff;cursor: pointer;margin: 0 14px 14px 0;box-shadow: 0 0 3px 0 @primaric-color;.corner {position: absolute;top: 2px;right: 2px;width: 0;height: 0;border-top: 12px solid @primaric-color;border-left: 12px solid transparent;border-radius: 0 3px 0 0;opacity: 1;}.content {.title {margin: 0;font-size: 15px;font-weight: bold;margin-bottom: 10px;}.title:nth-last-of-type(1) {margin-bottom: 0;}.text {margin-bottom: 10px;font-size: 14px;color: #666;}.text:nth-last-of-type(1) {margin-bottom: 0;}}}.select-card-checked:nth-last-of-type(1) {margin: 0;}.select-card-disabled {background-color: #e0e0e0;border-color: #a0a0a0;color: #666;box-shadow: none;cursor: not-allowed;.corner {border-top-color: #a0a0a0;}}
}.horizontal {
}.vertical {display: flex;flex-wrap: wrap;
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/41874.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【C++】B树及其实现

写目录 一、B树的基本概念1.引入2.B树的概念 二、B树的实现1.B树的定义2.B树的查找3.B树的插入操作4.B树的删除5.B树的遍历6.B树的高度7.整体代码 三、B树和B*树1.B树2.B*树3.总结 一、B树的基本概念 1.引入 我们已经学习过二叉排序树、AVL树和红黑树三种树形查找结构&#x…

vue事件参数

事件参数 事件参数可以获取event对象和通过事件传递数据 获取event对象 <template> <buttonclick"addCount">点击</button><p>count is: {{ count }}</p><p>{{ coutent_e }}</p> </template> <script>expor…

关于HTTP的攻击实验

实验原理&#xff1a;1. 根据ARP中间人攻击&#xff0c;获取 用户和服务器之间的数据2. 将获取到的数据 通过一定的技术来复原&#xff0c;进而获取用户的信息或者 相关权限实验拓扑图 将 kali 的网卡改为桥接模式&#xff0c;查看Kali和本机的ip 启动ettercap&#xff0c;…

【Python学习】流程控制、函数与类详解

&#x1f3ac; 鸽芷咕&#xff1a;个人主页 &#x1f525; 个人专栏: 《C干货基地》《粉丝福利》 ⛺️生活的理想&#xff0c;就是为了理想的生活! 引言 Python作为一门强大而又简洁的编程语言&#xff0c;提供了丰富的工具和结构来帮助开发者编写清晰、高效的代码。在本文中…

阿里云OSS文件上传不配置环境变量使用显式AccessKey验证

问题背景 在中阿里云官方文档中介绍文件上传时&#xff0c;推荐配置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。这里用简单的方法&#xff0c;直接在Demo.java中显式指定accessKeyId和accessKeySecret&#xff0c;同时修改OSSClientBuilder()的入参。 解决方法 首先…

C语言 -- 深入理解指针(一)

C语言 -- 深入理解指针&#xff08;一&#xff09; 1.内存和地址1.1 内存1.2 究竟该如何理解编址 2. 指针变量和地址2.1 取地址操作符&#xff08;&&#xff09;​2.2 指针变量和解引用操作符&#xff08;*&#xff09;​​2.2.1 指针变量2.2.2 如何拆解指针类型2.2.3 解引…

C++11 shared_ptr---面试常考

shared_ptr简介 共享对其所指堆内存空间的所有权&#xff0c;当最后⼀个指涉到该对象的shared_ptr不再指向他时&#xff0c;shared_ptr会⾃动析构所指对象如何判断⾃⼰是否指涉到该资源的最后⼀个&#xff1f;《引⽤计数》 shared_ptr构造函数&#xff0c;使引⽤计数析构函数&…

Java线上接口耗时分析神器 Arthas

介绍 程序员的日常&#xff0c;总是离不开“调优”和“排查”。尤其当线上环境出现问题&#xff0c;性能瓶颈把人逼疯。这时候&#xff0c;你就需要一款像 Arthas 这样的神器来救场。 什么是 Arthas&#xff1f; 简单来说&#xff0c;Arthas 是阿里巴巴开源的 Java 诊断工具…

String类对象比较:==和equals的具体细节

public class test {public static void main(String[] args) {String name1 "zzz";String name2 "zzz";String name3 new String("zzz");// hashCode() 方法&#xff1a;基于字符串的内容计算哈希值&#xff0c;因此内容相同的字符串对象其 …

在 PostgreSQL 中,如何处理多个长时间运行的查询对系统资源的竞争?

文章目录 一、问题分析二、解决方案&#xff08;一&#xff09;优化查询语句&#xff08;二&#xff09;限制资源使用&#xff08;三&#xff09;调整数据库参数&#xff08;四&#xff09;监控和分析查询性能&#xff08;五&#xff09;分区表&#xff08;六&#xff09;异步处…

Ratf协议图解、Nacos CP集群源码分析

文章目录 Nacos CP集群说明Raft协议leader选举重新选举leader多个Candidate情况更新操作&#xff0c;日志复制网络分区 源码实现服务注册leader选举leader心跳包 Nacos CP集群 说明 CAP原则 C 一致性 ConsistencyA 可用性 Availability分区容错性 Partition tolerance 分区…

【密码学】密码学五要素

密码学五要素是密码系统的基本组成部分&#xff0c;这五个要素共同构成了密码系统的框架。在实际应用中&#xff0c;密码系统的安全性依赖于密钥的安全管理以及算法的强度。 如果任何一方被泄露或破解&#xff0c;那么整个密码系统都将面临风险。因此&#xff0c;在设计和使用密…

生物化学笔记:电阻抗基础+电化学阻抗谱EIS+电化学系统频率响应分析

视频教程地址 引言 方法介绍 稳定&#xff1a;撤去扰动会到原始状态&#xff0c;反之不稳定&#xff0c;还有近似稳定的 阻抗谱图形&#xff08;Nyquist和Bode图&#xff09; 阻抗谱图形是用于分析电化学系统和材料的工具&#xff0c;主要有两种类型&#xff1a;Nyquist图和B…

《第一行代码》小结

文章目录 一. Android总览1. 系统架构2. 开发环境3. 在红米手机上运行4. 项目资源详解4.1 整体结构4.2 res文件4.3 build.gradle文件 二. Activity0. 常用方法小结1. 创建一个Activity 一. Android总览 1. 系统架构 应用层&#xff1a;所有安装在手机上的应用程序 应用框架层&…

罗剑锋的C++实战笔记学习(一):const、智能指针、lambda表达式

1、const 1&#xff09;、常量 const一般的用法就是修饰变量、引用、指针&#xff0c;修饰之后它们就变成了常量&#xff0c;需要注意的是const并未区分出编译期常量和运行期常量&#xff0c;并且const只保证了运行时不直接被修改 一般的情况&#xff0c;const放在左边&…

解决Docker Desktop启动异常 Docker Desktop- WSL distro terminated abruptly

异常 当打开Docker Desktop时候&#xff0c;启动docker引擎时&#xff0c;提示 加粗样式文本信息 Docker Desktop - WSL distro terminated abruptly A WSL distro Docker Desktop relies on has exited unexpectedly. This usually happensas a result of an external entit…

Vue2基础 14:自定义指令

自定义指令 1 函数式1.1 案例--v-text放大10倍 2 对象式2.1 案例--v-fbind默认获取焦点&#xff08;函数式&#xff09;2.2 案例--v-fbind默认获取焦点&#xff08;对象式&#xff09; 3 自定义指令容易犯的错4 全局指令写法&#xff08;参考过滤器写法&#xff09;&#xff1a…

Go 依赖注入设计模式

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

系统重装

待更新 重置win11 双系统删除其中一个&#xff0c;并将格式化后的空间并入