Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commit626795d

Browse files
committed
Landing Stack info updates & fix variables names
1 parent8e168d2 commit626795d

File tree

8 files changed

+100
-82
lines changed

8 files changed

+100
-82
lines changed

‎src/constants/Categories.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export const NEW = [
99
'Grid Scan',
1010
'Floating Lines'
1111
];
12-
exportconstUPDATED=['Profile Card','Logo Loop'];
12+
exportconstUPDATED=['Profile Card','Logo Loop','Animated Content','Fade Content','Stack'];
1313

1414
// Used for main sidebar navigation
1515
exportconstCATEGORIES=[

‎src/constants/Information.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -673,7 +673,7 @@ export const componentMetadata = {
673673
},
674674
'Components/Stack':{
675675
videoUrl:'/assets/video/stack.webm',
676-
description:'Layered stack with swipe animations and smooth transitions.',
676+
description:'Layered stack with swipe animations, autoplay and smooth transitions.',
677677
category:'Components',
678678
name:'Stack',
679679
docsUrl:'https://reactbits.dev/components/stack',

‎src/constants/code/Components/stackCode.js‎

Lines changed: 20 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,19 +9,27 @@ export const stack = {
99
usage:`import Stack from './Stack'
1010
1111
const images = [
12-
{ id: 1, img:"https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format" },
13-
{ id: 2, img:"https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format" },
14-
{ id: 3, img:"https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format" },
15-
{ id: 4, img:"https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format" }
12+
"https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format",
13+
"https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format",
14+
"https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format",
15+
"https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format"
1616
];
17-
18-
<Stack
19-
randomRotation={true}
20-
sensitivity={180}
21-
sendToBackOnClick={false}
22-
cardDimensions={{ width: 200, height: 200 }}
23-
cardsData={images}
24-
/>`,
17+
18+
<div style={{ width: 208, height: 208 }}>
19+
<Stack
20+
randomRotation={true}
21+
sensitivity={180}
22+
sendToBackOnClick={true}
23+
cards={images.map((src, i) => (
24+
<img
25+
key={i}
26+
src={src}
27+
alt={\`card-\${i + 1}\`}
28+
style={{ width: '100%', height: '100%', objectFit: 'cover' }}
29+
/>
30+
))}
31+
/>
32+
</div>`,
2533
code,
2634
css,
2735
tailwind,

‎src/content/Components/Stack/Stack.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -46,8 +46,8 @@ export default function Stack({
4646
cards=[],
4747
animationConfig={stiffness:260,damping:20},
4848
sendToBackOnClick=false,
49-
autoAnimate=false,
50-
autoInterval=3000,
49+
autoplay=false,
50+
autoplayDelay=3000,
5151
mobileClickOnly=false,
5252
mobileBreakpoint=768,
5353
}){
@@ -134,15 +134,15 @@ export default function Stack({
134134
};
135135

136136
useEffect(()=>{
137-
if(autoAnimate&&stack.length>1){
137+
if(autoplay&&stack.length>1){
138138
constinterval=setInterval(()=>{
139139
consttopCardId=stack[stack.length-1].id;
140140
sendToBack(topCardId);
141-
},autoInterval);
141+
},autoplayDelay);
142142

143143
return()=>clearInterval(interval);
144144
}
145-
},[autoAnimate,autoInterval,stack]);
145+
},[autoplay,autoplayDelay,stack]);
146146

147147
return(
148148
<div

‎src/demo/Components/StackDemo.jsx‎

Lines changed: 54 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -16,8 +16,8 @@ import { stack } from '../../constants/code/Components/stackCode';
1616
constStackDemo=()=>{
1717
const[randomRotation,setRandomRotation]=useState(false);
1818
const[sensitivity,setSensitivity]=useState(200);
19-
const[cardWidth,setCardWidth]=useState(208);
20-
const[cardHeight,setCardHeight]=useState(208);
19+
const[autoplay,setAutoplay]=useState(false);
20+
const[autoplayDelay,setAutoplayDelay]=useState(3000);
2121
const[key,forceRerender]=useForceRerender();
2222

2323
constpropData=[
@@ -33,50 +33,66 @@ const StackDemo = () => {
3333
default:200,
3434
description:'Drag sensitivity for sending a card to the back.'
3535
},
36-
{
37-
name:'cardDimensions',
38-
type:'object',
39-
default:'{ width: 208, height: 208 }',
40-
description:'Defines the width and height of the cards.'
41-
},
4236
{
4337
name:'sendToBackOnClick',
4438
type:'boolean',
4539
default:'false',
46-
description:'When enabled, thealsostack shifts to the next card on click.'
40+
description:'When enabled, the stack also shifts to the next card on click.'
4741
},
4842
{
49-
name:'cardsData',
50-
type:'array',
43+
name:'cards',
44+
type:'ReactNode[]',
5145
default:'[]',
52-
description:'The array of carddata, including `id` and `img` properties.'
46+
description:'The array of cardelements to display in the stack.'
5347
},
5448
{
5549
name:'animationConfig',
5650
type:'object',
5751
default:'{ stiffness: 260, damping: 20 }',
5852
description:"Configures the spring animation's stiffness and damping."
53+
},
54+
{
55+
name:'autoplay',
56+
type:'boolean',
57+
default:'false',
58+
description:'When enabled, the stack automatically cycles through cards.'
59+
},
60+
{
61+
name:'autoplayDelay',
62+
type:'number',
63+
default:'3000',
64+
description:'Delay in milliseconds between automatic card transitions.'
5965
}
6066
];
6167

6268
constimages=[
63-
{id:1,img:'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format'},
64-
{id:2,img:'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format'},
65-
{id:3,img:'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format'},
66-
{id:4,img:'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format'}
69+
'https://images.unsplash.com/photo-1480074568708-e7b720bb3f09?q=80&w=500&auto=format',
70+
'https://images.unsplash.com/photo-1449844908441-8829872d2607?q=80&w=500&auto=format',
71+
'https://images.unsplash.com/photo-1452626212852-811d58933cae?q=80&w=500&auto=format',
72+
'https://images.unsplash.com/photo-1572120360610-d971b9d7767c?q=80&w=500&auto=format'
6773
];
6874

6975
return(
7076
<TabsLayout>
7177
<PreviewTab>
7278
<Boxposition="relative"className="demo-container"minH={400}overflow="hidden">
73-
<Stack
74-
key={key}
75-
randomRotation={randomRotation}
76-
sensitivity={sensitivity}
77-
cardDimensions={{width:cardWidth,height:cardHeight}}
78-
cardsData={images}
79-
/>
79+
<divstyle={{width:208,height:208}}>
80+
<Stack
81+
key={key}
82+
randomRotation={randomRotation}
83+
sensitivity={sensitivity}
84+
autoplay={autoplay}
85+
autoplayDelay={autoplayDelay}
86+
cards={images.map((src,i)=>(
87+
<img
88+
key={i}
89+
src={src}
90+
alt={`card-${i+1}`}
91+
style={{width:'100%',height:'100%',objectFit:'cover'}}
92+
/>
93+
))}
94+
/>
95+
</div>
8096
</Box>
8197

8298
<Customize>
@@ -89,6 +105,14 @@ const StackDemo = () => {
89105
}}
90106
/>
91107

108+
<PreviewSwitch
109+
title="Autoplay"
110+
isChecked={autoplay}
111+
onChange={checked=>{
112+
setAutoplay(checked);
113+
}}
114+
/>
115+
92116
<PreviewSlider
93117
title="Sensitivity"
94118
min={100}
@@ -102,29 +126,15 @@ const StackDemo = () => {
102126
/>
103127

104128
<PreviewSlider
105-
title="Card Width"
106-
min={150}
107-
max={300}
108-
step={10}
109-
value={cardWidth}
129+
title="Autoplay Delay"
130+
min={1000}
131+
max={5000}
132+
step={500}
133+
value={autoplayDelay}
110134
onChange={val=>{
111-
setCardWidth(val);
112-
forceRerender();
113-
}}
114-
displayValue={val=>`${val}px`}
115-
/>
116-
117-
<PreviewSlider
118-
title="Card Height"
119-
min={150}
120-
max={300}
121-
step={10}
122-
value={cardHeight}
123-
onChange={val=>{
124-
setCardHeight(val);
125-
forceRerender();
135+
setAutoplayDelay(val);
126136
}}
127-
displayValue={val=>`${val}px`}
137+
displayValue={val=>`${val}ms`}
128138
/>
129139
</Customize>
130140

‎src/tailwind/Components/Stack/Stack.jsx‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -48,8 +48,8 @@ export default function Stack({
4848
cards=[],
4949
animationConfig={stiffness:260,damping:20},
5050
sendToBackOnClick=false,
51-
autoAnimate=false,
52-
autoInterval=3000,
51+
autoplay=false,
52+
autoplayDelay=3000,
5353
mobileClickOnly=false,
5454
mobileBreakpoint=768,
5555
}){
@@ -136,15 +136,15 @@ export default function Stack({
136136
};
137137

138138
useEffect(()=>{
139-
if(autoAnimate&&stack.length>1){
139+
if(autoplay&&stack.length>1){
140140
constinterval=setInterval(()=>{
141141
consttopCardId=stack[stack.length-1].id;
142142
sendToBack(topCardId);
143-
},autoInterval);
143+
},autoplayDelay);
144144

145145
return()=>clearInterval(interval);
146146
}
147-
},[autoAnimate,autoInterval,stack]);
147+
},[autoplay,autoplayDelay,stack]);
148148

149149
return(
150150
<div

‎src/ts-default/Components/Stack/Stack.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ interface StackProps {
5353
sendToBackOnClick?:boolean;
5454
cards?:React.ReactNode[];
5555
animationConfig?:{stiffness:number;damping:number};
56-
autoAnimate?:boolean;
57-
autoInterval?:number;
56+
autoplay?:boolean;
57+
autoplayDelay?:number;
5858
mobileClickOnly?:boolean;
5959
mobileBreakpoint?:number;
6060
}
@@ -65,8 +65,8 @@ export default function Stack({
6565
cards=[],
6666
animationConfig={stiffness:260,damping:20},
6767
sendToBackOnClick=false,
68-
autoAnimate=false,
69-
autoInterval=3000,
68+
autoplay=false,
69+
autoplayDelay=3000,
7070
mobileClickOnly=false,
7171
mobileBreakpoint=768,
7272
}:StackProps){
@@ -153,15 +153,15 @@ export default function Stack({
153153
};
154154

155155
useEffect(()=>{
156-
if(autoAnimate&&stack.length>1){
156+
if(autoplay&&stack.length>1){
157157
constinterval=setInterval(()=>{
158158
consttopCardId=stack[stack.length-1].id;
159159
sendToBack(topCardId);
160-
},autoInterval);
160+
},autoplayDelay);
161161

162162
return()=>clearInterval(interval);
163163
}
164-
},[autoAnimate,autoInterval,stack]);
164+
},[autoplay,autoplayDelay,stack]);
165165

166166
return(
167167
<div

‎src/ts-tailwind/Components/Stack/Stack.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -55,8 +55,8 @@ interface StackProps {
5555
sendToBackOnClick?:boolean;
5656
cards?:React.ReactNode[];
5757
animationConfig?:{stiffness:number;damping:number};
58-
autoAnimate?:boolean;
59-
autoInterval?:number;
58+
autoplay?:boolean;
59+
autoplayDelay?:number;
6060
mobileClickOnly?:boolean;
6161
mobileBreakpoint?:number;
6262
}
@@ -67,8 +67,8 @@ export default function Stack({
6767
cards=[],
6868
animationConfig={stiffness:260,damping:20},
6969
sendToBackOnClick=false,
70-
autoAnimate=false,
71-
autoInterval=3000,
70+
autoplay=false,
71+
autoplayDelay=3000,
7272
mobileClickOnly=false,
7373
mobileBreakpoint=768,
7474
}:StackProps){
@@ -155,15 +155,15 @@ export default function Stack({
155155
};
156156

157157
useEffect(()=>{
158-
if(autoAnimate&&stack.length>1){
158+
if(autoplay&&stack.length>1){
159159
constinterval=setInterval(()=>{
160160
consttopCardId=stack[stack.length-1].id;
161161
sendToBack(topCardId);
162-
},autoInterval);
162+
},autoplayDelay);
163163

164164
return()=>clearInterval(interval);
165165
}
166-
},[autoAnimate,autoInterval,stack]);
166+
},[autoplay,autoplayDelay,stack]);
167167

168168
return(
169169
<div

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp