Swipeout 侧滑

Swipeout 是一个仿 IOS 样式的侧滑操作组件。

代码演示

左侧滑

import { Swipeout, IconFont, Utils } from 'tuya-panel-kit'
const { convertX: cx } = Utils.RatioUtils;
export const Icons = {
Heart: (
<IconFont
style={{
position: 'absolute',
left: '50%',
top: '50%',
marginTop: -cx(7),
marginLeft: -cx(7),
}}
color="white"
d="M945.04003,120.634097 C894.507815,66.8110344 825.95718,36.5714286 754.477057,36.5714286 C682.996933,36.5714286 614.446299,66.8110344 563.914083,120.634097 L511.986898,175.917017 L460.059712,120.634097 C354.814688,8.58773556 184.178791,8.58773691 78.9337681,120.6341 C-26.3112549,232.680462 -26.3112562,414.343509 78.9337652,526.389874 L130.860951,581.672794 L511.258015,986.652586 C511.63613,987.055136 512.268986,987.074945 512.671536,986.69683 C512.686742,986.682547 512.701497,986.667791 512.71578,986.652586 L893.112845,581.672794 L893.112845,581.672794 L945.04003,526.389874 C995.595972,472.592071 1024,399.61143 1024,323.511985 C1024,247.41254 995.595972,174.431899 945.04003,120.634097 Z"
/>
),
};
<Swipeout
autoClose={true}
left={[
{
text: 'action',
type: 'primary',
backgroundColor: '#FAAD21',
// @ts-ignore
fontStyle: { color: '#fff', fontSize: 16 },
content: Icons.Heart,
},
]}
>
<View
style={{
height: 44,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
}}
>
<TYText style={{ color: '#333' }}>
请尝试左侧滑
</TYText>
</View>
</Swipeout>

右侧滑

import { Swipeout, IconFont, Utils } from 'tuya-panel-kit'
const { convertX: cx } = Utils.RatioUtils;
export const Icons = {
DeleteIcon: (
<IconFont
style={{
position: 'absolute',
left: '50%',
top: '50%',
marginTop: -cx(7),
marginLeft: -cx(7),
}}
color="white"
d="M768,256 C825.029202,256 871.895675,299.511814 877.212045,355.148068 L877.714286,365.714286 L877.714286,877.714286 C877.714286,954.83332 818.038653,1018.01436 742.346046,1023.59876 L731.428571,1024 L292.571429,1024 C215.452394,1024 152.271351,964.324367 146.686957,888.63176 L146.285714,877.714286 L146.285714,365.714286 C146.285714,308.685084 189.797528,261.818611 245.433782,256.502241 L256,256 L768,256 Z M402.285714,475.428571 C384.332077,475.428571 369.400073,488.365726 366.3035,505.426239 L365.714286,512 L365.714286,731.428571 L366.3035,738.002332 C369.400073,755.062845 384.332077,768 402.285714,768 C420.239352,768 435.171355,755.062845 438.267928,738.002332 L438.857143,731.428571 L438.857143,512 L438.267928,505.426239 C435.171355,488.365726 420.239352,475.428571 402.285714,475.428571 Z M621.714286,475.428571 C603.760648,475.428571 588.828645,488.365726 585.732072,505.426239 L585.142857,512 L585.142857,731.428571 L585.732072,738.002332 C588.828645,755.062845 603.760648,768 621.714286,768 C639.667923,768 654.599927,755.062845 657.6965,738.002332 L658.285714,731.428571 L658.285714,512 L657.6965,505.426239 C654.599927,488.365726 639.667923,475.428571 621.714286,475.428571 Z M474.443665,73.1923517 L564.344974,73.2273457 C594.825413,73.7855475 618.180277,78.0005819 621.347648,109.659176 L841.142857,109.714286 C861.340699,109.714286 877.714286,126.087872 877.714286,146.285714 C877.714286,164.239352 864.777131,179.171355 847.716618,182.267928 L841.142857,182.857143 L182.857143,182.857143 C162.659301,182.857143 146.285714,166.483557 146.285714,146.285714 C146.285714,128.332077 159.222869,113.400073 176.283382,110.3035 L182.857143,109.714286 L417.28,109.641143 L417.406371,108.498569 C421.02789,77.3184785 444.258596,73.6143467 474.443665,73.1923517 Z"
/>
),
};
<Swipeout
autoClose={true}
right={[
{
text: 'delete',
type: 'delete',
// @ts-ignore
fontStyle: { color: '#fff', fontSize: 16 },
content: Icons.DeleteIcon,
},
]}
>
<View
style={{
height: 44,
backgroundColor: '#fff',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
}}
>
<TYText style={{ color: '#333' }}>
请尝试右侧滑
</TYText>
</View>
</Swipeout>

禁用侧滑

import { Swipeout } from 'tuya-panel-kit'
<Swipeout
autoClose={true}
disabled={true}
right={[
{
text: 'delete',
type: 'delete',
// @ts-ignore
fontStyle: { color: '#fff', fontSize: 16 },
},
]}
>
<View
style={{
height: 44,
backgroundColor: 'white',
justifyContent: 'center',
alignItems: 'center',
paddingHorizontal: 16,
}}
>
<TYText style={{ color: '#FF4444' }}>禁用侧滑</TYText>
</View>
</Swipeout>

API

tuya02:55