seo网站建设是什么意思,个人备案做公司网站,抖音添加小程序怎么赚钱,工贸企业logo设计需要实现这样一个功能
默认高度下文本超出隐藏#xff0c;点击展开可查看所有内容#xff0c;点击收起可折叠 方法一#xff1a;通过html和css实现
代码部分
html:div classNameexpand-foldinput idcheck-box typecheckbox点击展开可查看所有内容点击收起可折叠 方法一通过html和css实现
代码部分
html:div classNameexpand-foldinput idcheck-box typecheckbox /div classNamecontent{/* htmlFor和input的id一致 */}label classNamelabel htmlForcheck-box/labelspanLorem ipsum dolor sit amet consectetur adipisicing elit. Explicaboquas architecto perspiciatis voluptas odio magni dolorem doloribusrecusandae commodi accusamus voluptates, laudantium tempora, estsoluta blanditiis labore tempore officia ipsam! Lorem ipsum dolorsit amet consectetur adipisicing elit. Explicabo quas architectoperspiciatis voluptas odio magni dolorem doloribus recusandaecommodi accusamus voluptates, laudantium tempora, est solutablanditiis labore tempore officia ipsam!/span/div/divcss:.expand-fold {display: flex;#check-box { // 将勾选框隐藏display: none;}#check-box:checked .content { // 选中勾选框(点击展开)时修改最大高度合理即可max-height: 800px;}#check-box:checked .content .label { // 展开时隐藏省略号文字改为收起::before {// 隐藏省略号content: ;}::after {content: 收起;}}.content { font-size: 16px;flex: 1;max-height: 46px;line-height: 23px;overflow: hidden;::before { // 将展开/收起文字对齐最右边content: ;float: right;height: calc(100% - 23px);}}.label { // 展开收起文字部分position: relative;float: right;clear: both;font-size: 16px;padding: 0 8px;color: #26caf8;border-radius: 4px;cursor: pointer;::before { // 默认展开时添加省略号content: ...;position: absolute;left: -5px;color: #333;transform: translateX(-100%);}::after {content: 展开;}}}方法二通过AntDesign react实现组件封装
AntDesign默认只有展开功能没有收起功能以下是基于Typography组件实现展开收起
组件UI部分
import { Typography } from antd;
import React, { useState } from react;
import style from ./index.less;const { Paragraph } Typography;export type ExpandTextType {rows?: number;symbol?: React.ReactNode;foldSlot?: React.ReactNode;children?: React.ReactNode;
};const defaultSymbol () (span classNameant-typography展开 i classNameiconfont icon-jiantou-shaixuanzhankai/i/span
);const Example: React.FCExpandTextType (props) {const { rows 2, symbol defaultSymbol(), foldSlot } props;const [ellipsis, setEllipsis] useState(false);const [counter, setCounter] useState(0);const onFold () {setEllipsis(!ellipsis);setCounter(counter 1);};const onExpand () {setEllipsis(!ellipsis);setCounter(counter 0);};// 自定义收起文案const renderFold () {return (a classNameant-typography-fold onClick{onFold}{foldSlot ? (foldSlot) : (span收起i classNameiconfont icon-jiantou-shaixuanzhankai icon-fold/i/span)}/a);};return (div className{style[container]}Paragraphkey{counter}ellipsis{{rows,expandable: true,symbol,onExpand,}}{props?.children}{ellipsis renderFold()}/Paragraph/div);
};export default Example;
组件css
.container {:global {.ant-typography {margin-bottom: 0;}.ant-typography-expand,.ant-typography-fold {color: #089cdb;font-size: 13px;cursor: pointer;height: 17px;line-height: 17px;margin-left: 4px;.iconfont.icon-jiantou-shaixuanzhankai {display: inline-block;font-size: 10px;transform: rotate(90deg);}.iconfont.icon-jiantou-shaixuanzhankai.icon-fold {transform: rotate(-90deg);margin-left: 4px;}}}
}页面使用组件
import ExpandText from /components/ExpandText;
import style from ./index.less;export type ExampleType unknown;
const Example: React.FCExampleType () {return (div className{style.container}ExpandText这里放入要展示的文案内容啊.../ExpandText/div);
};export default Example;
