1.0.0 • Published 2 years ago
@mas.io/adc-folder v1.0.0
安装
tnpm install --save @alipay/adc-folder
组件介绍
行业小程序折叠组件,可对文本或其他任意类型的元素进行折叠,满足常见的折叠需求。
参数说明
属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
---|---|---|---|---|---|
className | 否 | string | 组件容器自定义类名 | -- | -- |
id | 否 | string | 如果一个页面仅引入一个折叠组件,此属性可不填。但如果引入了多个折叠组件,则必须给每个组件设一个唯一的id | -- | -- |
lineClamp | 否 | number | 如果是对文本进行折叠,此属性可设置文本折叠行数 | 3 | -- |
maxHeight | 否 | string | 手动设置折叠元素的初始最大高度,优先级高于lineClamp。对非文本类型的元素进行折叠时为必填 | '' | '80rpx' |
folderBtnPosition | 否 | 'right' | 'center' | 按钮的位置和样式 | 'right' | -- |
folderBtnText | 否 | string | 按钮文本内容 | '展开' | '查看更多' | -- |
在小程序中使用
{
"usingComponents": {
"adc-folder": "@alipay/adc-folder/es/index"
}
}
在 page.axml 中引用组件
<!-- 页面使用方式 -->
<adc-folder>
<view class="article">
康桥的灵性全在一条河上;康河,我敢说是全世界最秀丽的一条水。河的名字是葛兰大(Granta),也有叫康河(Kiver Cam)的,许有上下流的区别,我不甚清楚。河身多的是曲折,上游是有名的拜伦潭——“Byron’s
Pool”——当年拜伦常在那里玩的;有一个老村子叫格兰骞斯德,有一个果子园,你可以躺在累累的桃李树荫下吃茶,花果会掉入你的茶杯,小雀子会到你桌上来啄食,那真是别有一番天地。这是上游;下游是从骞斯德顿下去,河面展开,那是春夏间竞舟的场所。上下河分界处有一个坝筑,水流急得很,在星光下听水声,听近村晚钟声,听河畔倦牛刍草声,是我康桥经验中最神秘的一种:大自然的优美、宁静,调谐在这星光与波光的默契中不期然的淹入了你的性灵。
</view>
</adc-folder>
注意事项
此组件只针对静态内容做折叠。因此,如果加载的是一段异步传入的文本(如网络获取), 需要在获取内容完成后,再渲染此组件。例如:
<adc-folder a:if="{{loaded}}">
<view class="article">
{{textFromServer}}
</view>
</adc-folder>
Slot
Name | 说明 | 是否必传 |
---|---|---|
default | 待折叠的内容 | 是 |
folder-btn | 自定义展开按钮 | 否 |
Badges
1.0.0
2 years ago