Skip to content

Commit 5166a74

Browse files
yinLiangDreamyinLiangDream
committed
COMPONENT
- 新增 Accordion 手风琴组件
1 parent ec79d8a commit 5166a74

File tree

11 files changed

+1206
-750
lines changed

11 files changed

+1206
-750
lines changed

‎.idea/workspace.xml

+219-238
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎@types/accordion.d.ts

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import {ComponentClass} from 'react';
2+
3+
export interface IProps {
4+
/**
5+
* 展开速度
6+
*/
7+
speed?: number;
8+
/**
9+
* 标题
10+
*/
11+
title?: string;
12+
/**
13+
* 打开/关闭
14+
*
15+
* 默认值 `false`
16+
*/
17+
open?: boolean;
18+
/**
19+
* 动画效果
20+
*
21+
* 默认值 `true`
22+
*/
23+
animation?: boolean;
24+
/**
25+
* 卡片形式
26+
*/
27+
card?: boolean;
28+
/**
29+
* 点击事件
30+
* @param flag
31+
*/
32+
onClick?: (flag: boolean) => void;
33+
children?: any;
34+
}
35+
36+
declare const According: ComponentClass<IProps>
37+
38+
export default According

‎@types/index.d.ts

+1
Original file line numberDiff line numberDiff line change
@@ -31,3 +31,4 @@ export {default as ClGrid} from './grid';
3131
export {default as ClAnimation} from './animation';
3232
export {default as ClVerticalTab} from './verticalTab';
3333
export {default as ClVerticalTabCell} from './verticalTabCell';
34+
export {default as ClAccordion} from './accordion'

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
11
# MP-COLORUI 是基于 Taro 框架的组件库
22

3+
## 特色
4+
5+
- 全部采用 TypeScript 编写，类型声明一目了然
6+
- 丰富的配色方案，极具色彩表现力
7+
- 丰富的组件库，应有尽有，不够提 [issue](https://github.com/yinLiangDream/mp-colorui/issues) 再加
8+
39
## 使用方式
410

511
> 安装：`npm i mp-colorui`， `yarn add mp-colorui`

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "mp-colorui",
3-
"version": "0.2.1",
3+
"version": "0.2.2",
44
"description": "MP ColorUI 是一款基于 Taro 框架并且联合 Color-UI CSS 库开发的多端 UI 组件库（目前仅支持小程序端）",
55
"main": "dist/index.js",
66
"main:h5": "dist/h5/index.js",

‎src/components/accordion/index.tsx

+61
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,61 @@
1+
import Taro, {pxTransform, useEffect, useState} from '@tarojs/taro'
2+
import {View} from '@tarojs/components';
3+
4+
import {IProps} from '../../../@types/accordion'
5+
import ClIcon from "../icon";
6+
7+
export default function ClAccordion(props: IProps) {
8+
const {open, title, animation, onClick, card} = props;
9+
const [show, setShow] = useState(open);
10+
const [height, setHeight] = useState(0);
11+
const id = `cl-accordion-content-${+new Date()}`;
12+
useEffect(() => {
13+
if (show) {
14+
const query = Taro.createSelectorQuery().in(this.$scope);
15+
query.select(`#${id}`).fields({
16+
size: true,
17+
rect: true
18+
}, (res) => {
19+
setHeight(res.height)
20+
}).exec()
21+
} else {
22+
setHeight(0)
23+
}
24+
}, [show]);
25+
return (
26+
<View className={`cu-list menu ${card ? 'card-menu' : ''}`} style={{
27+
overflow: "hidden",
28+
height: pxTransform((50 + height) * 2),
29+
transition: `all ${animation ? `${props.speed}s` : 0} linear`
30+
}}>
31+
<View className={`cu-item`} onClick={() => {
32+
onClick && onClick(!show);
33+
setShow(!show);
34+
}}>
35+
<View className='flex justify-between align-center' style={{width: '100%'}}>
36+
<View>{title}</View>
37+
<View style={{transition: `all ${props.speed}s linear`, transform: `rotate(${show ? '90deg' : '0'})`}}>
38+
<ClIcon iconName={"right"} size={"small"}/>
39+
</View>
40+
</View>
41+
</View>
42+
<View id={id} className='bg-white'>
43+
{this.props.children}
44+
</View>
45+
</View>
46+
)
47+
}
48+
49+
ClAccordion.options = {
50+
addGlobalClass: true
51+
}
52+
53+
ClAccordion.defaultProps = {
54+
open: false,
55+
title: '',
56+
animation: true,
57+
onClick: () => {
58+
},
59+
card: false,
60+
speed: 0.15
61+
} as IProps;

‎src/index.js

+36-35
Original file line numberDiff line numberDiff line change
@@ -1,39 +1,40 @@
1-
import Taro from '@tarojs/taro';
2-
import './app.scss';
3-
import './style/index.scss';
1+
import Taro from '@tarojs/taro'
2+
import './app.scss'
3+
import './style/index.scss'
44

5-
export { default as ClAvatar } from './components/avatar';
6-
export { default as ClButton } from './components/button';
7-
export { default as ClCard } from './components/card';
8-
export { default as ClCheckbox } from './components/checkbox';
9-
export { default as ClDrawer } from './components/drawer';
10-
export { default as ClIcon } from './components/icon';
11-
export { default as ClInput } from './components/input';
12-
export { default as ClLayout } from './components/layout';
13-
export { default as ClLoading } from './components/loading';
14-
export { default as ClMenuList } from './components/menuList';
15-
export { default as ClModal } from './components/modal';
16-
export { default as ClNavBar } from './components/navBar';
17-
export { default as ClProgress } from './components/progress';
18-
export { default as ClRadio } from './components/radio';
19-
export { default as ClScreenDrawer } from './components/screenDrawer';
20-
export { default as ClSearchBar } from './components/searchBar';
21-
export { default as ClSelect } from './components/select';
22-
export { default as ClShopBar } from './components/shopBar';
23-
export { default as ClStep } from './components/steps';
24-
export { default as ClSwiper } from './components/swiper';
25-
export { default as ClSwitch } from './components/switch';
26-
export { default as ClTabBar } from './components/tabBar';
27-
export { default as ClTabs } from './components/tabs';
28-
export { default as ClTag } from './components/tag';
29-
export { default as ClText } from './components/text';
30-
export { default as ClTimeline } from './components/timeline';
31-
export { default as ClTitleBar } from './components/titleBar';
32-
export { default as ClImagePicker } from './components/imagePicker';
33-
export { default as ClFlex } from './components/flex';
34-
export { default as ClGrid } from './components/grid';
35-
export { default as ClAnimation } from './components/animation';
5+
export { default as ClAvatar } from './components/avatar'
6+
export { default as ClButton } from './components/button'
7+
export { default as ClCard } from './components/card'
8+
export { default as ClCheckbox } from './components/checkbox'
9+
export { default as ClDrawer } from './components/drawer'
10+
export { default as ClIcon } from './components/icon'
11+
export { default as ClInput } from './components/input'
12+
export { default as ClLayout } from './components/layout'
13+
export { default as ClLoading } from './components/loading'
14+
export { default as ClMenuList } from './components/menuList'
15+
export { default as ClModal } from './components/modal'
16+
export { default as ClNavBar } from './components/navBar'
17+
export { default as ClProgress } from './components/progress'
18+
export { default as ClRadio } from './components/radio'
19+
export { default as ClScreenDrawer } from './components/screenDrawer'
20+
export { default as ClSearchBar } from './components/searchBar'
21+
export { default as ClSelect } from './components/select'
22+
export { default as ClShopBar } from './components/shopBar'
23+
export { default as ClStep } from './components/steps'
24+
export { default as ClSwiper } from './components/swiper'
25+
export { default as ClSwitch } from './components/switch'
26+
export { default as ClTabBar } from './components/tabBar'
27+
export { default as ClTabs } from './components/tabs'
28+
export { default as ClTag } from './components/tag'
29+
export { default as ClText } from './components/text'
30+
export { default as ClTimeline } from './components/timeline'
31+
export { default as ClTitleBar } from './components/titleBar'
32+
export { default as ClImagePicker } from './components/imagePicker'
33+
export { default as ClFlex } from './components/flex'
34+
export { default as ClGrid } from './components/grid'
35+
export { default as ClAnimation } from './components/animation'
3636
export { default as ClVerticalTab } from './components/verticalTab'
3737
export { default as ClVerticalTabCell } from './components/verticalTab/verticalTabCell'
38+
export { default as ClAccordion } from './components/accordion'
3839

39-
Taro.initPxTransform({ designWidth: 750, deviceRatio: {} });
40+
Taro.initPxTransform({ designWidth: 750, deviceRatio: {} })

‎src/pages/index/index.tsx

+20-10
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,9 @@
11
import { View } from '@tarojs/components';
22
import Taro, { Component, Config } from '@tarojs/taro';
3-
import ClRadio from "../../components/radio";
3+
import ClAccordion from '../../components/accordion';
4+
import ClCard from "../../components/card";
5+
import ClLayout from "../../components/layout";
6+
import ClText from "../../components/text";
47

58
export default class Index extends Component {
69
/**
@@ -32,15 +35,22 @@ export default class Index extends Component {
3235
render() {
3336
return (
3437
<View className='index'>
35-
<ClRadio type={"list"} title={'666'} checkedValue={'222'} radioGroup={[
36-
{
37-
key: '123',
38-
value: '222'
39-
}, {
40-
key: 'aaa',
41-
value: 'bbbb'
42-
}
43-
]}/>
38+
<ClAccordion title='道德经'>
39+
<ClLayout padding='normal' paddingDirection='around'>
40+
<ClCard type='full'>
41+
<ClText text='道可道，非常道。名可名，非常名。无名天地之始。有名万物之母。' textColor='blue'/>
42+
</ClCard>
43+
<ClCard type='full'>
44+
<ClText text='有无相生，难易相成，长短相形，高下相盈，音声相和，前后相随。恒也。' textColor='brown'/>
45+
</ClCard>
46+
<ClCard type='full'>
47+
<ClText text='上善若水。水善利万物而不争，处众人之所恶，故几于道。' textColor='red'/>
48+
</ClCard>
49+
<ClCard type='full'>
50+
<ClText text='道生一，一生二，二生三，三生万物。万物负阴而抱阳，冲气以为和。'/>
51+
</ClCard>
52+
</ClLayout>
53+
</ClAccordion>
4454
</View>
4555
);
4656
}

‎src/style/animation.scss

+58
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,24 @@
5757
&-reverse {
5858
animation-direction: reverse;
5959
}
60+
61+
&-rotate {
62+
&-90 {
63+
animation-name: rotate-90;
64+
}
65+
66+
&-180 {
67+
animation-name: rotate-180;
68+
}
69+
70+
&-270 {
71+
animation-name: rotate-270;
72+
}
73+
74+
&-360 {
75+
animation-name: rotate-360;
76+
}
77+
}
6078
}
6179

6280
@keyframes fade {
@@ -183,3 +201,43 @@
183201
transform: translateX(0);
184202
}
185203
}
204+
205+
@keyframes rotate-90 {
206+
0% {
207+
transform: rotate(0deg);
208+
}
209+
210+
100% {
211+
transform: rotate(90deg);
212+
}
213+
}
214+
215+
@keyframes rotate-180 {
216+
0% {
217+
transform: rotate(0deg);
218+
}
219+
220+
100% {
221+
transform: rotate(180deg);
222+
}
223+
}
224+
225+
@keyframes rotate-270 {
226+
0% {
227+
transform: rotate(0deg);
228+
}
229+
230+
100% {
231+
transform: rotate(270deg);
232+
}
233+
}
234+
235+
@keyframes rotate-360 {
236+
0% {
237+
transform: rotate(0deg);
238+
}
239+
240+
100% {
241+
transform: rotate(360deg);
242+
}
243+
}

0 commit comments

Comments
 (0)