Skip to content

Commit 411579d

Browse files
imagine10255imagine10255
committed
Add Mask story file, update filter mask styles, and extend GridThemeProvider usage.
1 parent 9c7c4a2 commit 411579d

File tree

3 files changed

+315
-7
lines changed

3 files changed

+315
-7
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,10 @@ import '@acrool/react-grid/dist/index.css';
7676

7777
const gridTheme: IGridSetting = {
7878
spacer: '1rem',
79+
// spacer: {
80+
// xs: '1rem',
81+
// lg: '40px',
82+
// },
7983
gridColumns: 12,
8084
gridBreakpoints: {
8185
xs: 0,

‎example/src/components/Utilities/Mask/Mask.stories.tsx‎

Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
import {Col, Container, Flex, GridThemeProvider, Row} from '@acrool/react-grid';
2+
import type {Meta, StoryObj} from '@storybook/react';
3+
import React from 'react';
4+
5+
const meta = {
6+
title: 'Utilities/Mask',
7+
parameters: {},
8+
argTypes: {},
9+
args: {},
10+
decorators: (Story) => (
11+
<GridThemeProvider>
12+
<Story />
13+
</GridThemeProvider>
14+
),
15+
} satisfies Meta<typeof Flex>;
16+
17+
export default meta;
18+
type Story = StoryObj<typeof meta>;
19+
20+
// 測試用的圖片 URL
21+
const testImageUrl = 'https://picsum.photos/400/300';
22+
23+
// 各種 filter-mask 方向
24+
const maskDirections = ['t', 'r', 'b', 'l', 'x', 'y'];
25+
26+
export const FilterMaskDirections: Story = {
27+
args: {},
28+
render: function Render(args: any) {
29+
return (
30+
<Container {...args}>
31+
<Flex column className="gap-4">
32+
<h2 className="text-center">Filter Mask 方向測試</h2>
33+
34+
{maskDirections.map(direction => {
35+
const className = `filter-mask-${direction}`;
36+
37+
return (
38+
<div key={direction} className="mb-4">
39+
<h3 className="mb-2">filter-mask-{direction}</h3>
40+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
41+
<img
42+
src={testImageUrl}
43+
alt={`Test image with ${className}`}
44+
className={`w-100 ${className}`}
45+
style={{height: '200px', objectFit: 'cover'}}
46+
/>
47+
</div>
48+
</div>
49+
);
50+
})}
51+
</Flex>
52+
</Container>
53+
);
54+
},
55+
};
56+
57+
export const FilterMaskWithContent: Story = {
58+
args: {},
59+
render: function Render(args: any) {
60+
return (
61+
<Container {...args}>
62+
<Flex column className="gap-4">
63+
<h2 className="text-center">Filter Mask 內容測試</h2>
64+
65+
<Row className="gap-4">
66+
{maskDirections.map(direction => {
67+
const className = `filter-mask-${direction}`;
68+
69+
return (
70+
<Col key={direction} col={6} md={4}>
71+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
72+
<img
73+
src={testImageUrl}
74+
alt={`Test image with ${className}`}
75+
className={`w-100 ${className}`}
76+
style={{height: '150px', objectFit: 'cover'}}
77+
/>
78+
<div className="absolute-center text-center text-white">
79+
<h4>Mask {direction.toUpperCase()}</h4>
80+
<p className="text-sm">filter-mask-{direction}</p>
81+
</div>
82+
</div>
83+
</Col>
84+
);
85+
})}
86+
</Row>
87+
</Flex>
88+
</Container>
89+
);
90+
},
91+
};
92+
93+
export const FilterMaskBottom80: Story = {
94+
args: {},
95+
render: function Render(args: any) {
96+
return (
97+
<Container {...args}>
98+
<Flex column className="gap-4">
99+
<h2 className="text-center">Filter Mask Bottom 80% 測試</h2>
100+
101+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
102+
<img
103+
src={testImageUrl}
104+
alt="Test image with filter-mask-b-80"
105+
className="w-100 filter-mask-b-80"
106+
style={{height: '300px', objectFit: 'cover'}}
107+
/>
108+
<div className="absolute-center text-center text-white">
109+
<h3>filter-mask-b-80</h3>
110+
<p>底部 80% 遮罩效果</p>
111+
</div>
112+
</div>
113+
</Flex>
114+
</Container>
115+
);
116+
},
117+
};
118+
119+
export const FilterMaskComparison: Story = {
120+
args: {},
121+
render: function Render(args: any) {
122+
return (
123+
<Container {...args}>
124+
<Flex column className="gap-4">
125+
<h2 className="text-center">Filter Mask 對比測試</h2>
126+
127+
<Row className="gap-4">
128+
<Col col={6}>
129+
<h3 className="text-center mb-2">原始圖片</h3>
130+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
131+
<img
132+
src={testImageUrl}
133+
alt="Original test image"
134+
className="w-100"
135+
style={{height: '250px', objectFit: 'cover'}}
136+
/>
137+
</div>
138+
</Col>
139+
140+
<Col col={6}>
141+
<h3 className="text-center mb-2">遮罩效果</h3>
142+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
143+
<img
144+
src={testImageUrl}
145+
alt="Test image with filter-mask-t"
146+
className="w-100 filter-mask-t"
147+
style={{height: '250px', objectFit: 'cover'}}
148+
/>
149+
<div className="absolute-center text-center text-white">
150+
<h4>filter-mask-t</h4>
151+
<p className="text-sm">頂部遮罩</p>
152+
</div>
153+
</div>
154+
</Col>
155+
</Row>
156+
157+
<Row className="gap-4 mt-4">
158+
<Col col={4}>
159+
<h4 className="text-center mb-2">左側遮罩</h4>
160+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
161+
<img
162+
src={testImageUrl}
163+
alt="Test image with filter-mask-l"
164+
className="w-100 filter-mask-l"
165+
style={{height: '200px', objectFit: 'cover'}}
166+
/>
167+
</div>
168+
</Col>
169+
170+
<Col col={4}>
171+
<h4 className="text-center mb-2">右側遮罩</h4>
172+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
173+
<img
174+
src={testImageUrl}
175+
alt="Test image with filter-mask-r"
176+
className="w-100 filter-mask-r"
177+
style={{height: '200px', objectFit: 'cover'}}
178+
/>
179+
</div>
180+
</Col>
181+
182+
<Col col={4}>
183+
<h4 className="text-center mb-2">底部遮罩</h4>
184+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
185+
<img
186+
src={testImageUrl}
187+
alt="Test image with filter-mask-b"
188+
className="w-100 filter-mask-b"
189+
style={{height: '200px', objectFit: 'cover'}}
190+
/>
191+
</div>
192+
</Col>
193+
</Row>
194+
</Flex>
195+
</Container>
196+
);
197+
},
198+
};
199+
200+
export const FilterMaskInteractive: Story = {
201+
args: {},
202+
render: function Render(args: any) {
203+
return (
204+
<Container {...args}>
205+
<Flex column className="gap-4">
206+
<h2 className="text-center">Filter Mask 互動測試</h2>
207+
208+
<Row className="gap-4">
209+
<Col col={12} md={6}>
210+
<h3 className="text-center mb-2">水平遮罩 (X軸)</h3>
211+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
212+
<img
213+
src={testImageUrl}
214+
alt="Test image with filter-mask-x"
215+
className="w-100 filter-mask-x"
216+
style={{height: '250px', objectFit: 'cover'}}
217+
/>
218+
<div className="absolute-center text-center text-white">
219+
<h4>filter-mask-x</h4>
220+
<p className="text-sm">左右兩側遮罩</p>
221+
</div>
222+
</div>
223+
</Col>
224+
225+
<Col col={12} md={6}>
226+
<h3 className="text-center mb-2">垂直遮罩 (Y軸)</h3>
227+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
228+
<img
229+
src={testImageUrl}
230+
alt="Test image with filter-mask-y"
231+
className="w-100 filter-mask-y"
232+
style={{height: '250px', objectFit: 'cover'}}
233+
/>
234+
<div className="absolute-center text-center text-white">
235+
<h4>filter-mask-y</h4>
236+
<p className="text-sm">上下兩側遮罩</p>
237+
</div>
238+
</div>
239+
</Col>
240+
</Row>
241+
242+
<Row className="gap-4 mt-4">
243+
<Col col={12}>
244+
<h3 className="text-center mb-2">特殊遮罩效果</h3>
245+
<div className="relative overflow-hidden rounded" style={{backgroundColor: '#f8f9fa'}}>
246+
<img
247+
src={testImageUrl}
248+
alt="Test image with filter-mask-b-80"
249+
className="w-100 filter-mask-b-80"
250+
style={{height: '300px', objectFit: 'cover'}}
251+
/>
252+
<div className="absolute-center text-center text-white">
253+
<h4>filter-mask-b-80</h4>
254+
<p className="text-sm">底部 80% 漸變遮罩</p>
255+
<p className="text-sm">從底部開始漸變到透明</p>
256+
</div>
257+
</div>
258+
</Col>
259+
</Row>
260+
</Flex>
261+
</Container>
262+
);
263+
},
264+
};
265+

‎src/styles.scss‎

Lines changed: 46 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ $grid-gutters: (
3535
) !default;
3636

3737

38-
// 定义方向
38+
// 定義方向
3939
$directions: (
4040
'': '',
4141
't': 'top',
@@ -67,7 +67,7 @@ $directions: (
6767
}
6868
}
6969

70-
// 基础样式
70+
// 基礎樣式
7171
.img-fluid {
7272
max-width: 100% !important;
7373
height: auto !important;
@@ -78,7 +78,7 @@ $directions: (
7878
object-fit: cover !important;
7979
}
8080

81-
// 边框样式
81+
// 邊框樣式
8282
@each $direction, $value in $directions {
8383
@if $direction == '' {
8484
.border {
@@ -188,14 +188,53 @@ $directions: (
188188
filter: brightness(0) invert(1) !important;
189189
}
190190

191-
.filter-mask-b {
192-
mask-image: linear-gradient(to bottom, white, white, transparent) !important;
191+
.filter-mask-b-80 {mask-image: linear-gradient(to bottom, white 0%, white 80%, transparent 100%) !important;}
192+
193+
194+
// 遮罩樣式
195+
@each $direction, $value in $directions {
196+
@if $direction != '' {
197+
@if meta.type-of($value) == 'list' {
198+
@if $direction == 'x' {
199+
.filter-mask-#{$direction} {
200+
mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent) !important;
201+
}
202+
} @else if $direction == 'y' {
203+
.filter-mask-#{$direction} {
204+
mask-image: linear-gradient(to bottom, transparent, white 20%, white 80%, transparent) !important;
205+
}
206+
}
207+
} @else {
208+
.filter-mask-#{$direction} {
209+
mask-image: linear-gradient(to #{$value}, white, white, transparent) !important;
210+
}
211+
}
212+
}
193213
}
194214

195-
.filter-mask-b-80 {
196-
mask-image: linear-gradient(to bottom, white 0%, white 80%, transparent 100%) !important;
215+
// 遮罩樣式 80
216+
@each $direction, $value in $directions {
217+
@if $direction != '' {
218+
@if meta.type-of($value) == 'list' {
219+
@if $direction == 'x' {
220+
.filter-mask-#{$direction}-80 {
221+
mask-image: linear-gradient(to right, transparent, white 20%, white 80%, transparent) !important;
222+
}
223+
} @else if $direction == 'y' {
224+
.filter-mask-#{$direction}-80 {
225+
mask-image: linear-gradient(to bottom, transparent, white 20%, white 80%, transparent) !important;
226+
}
227+
}
228+
} @else {
229+
.filter-mask-#{$direction}-80 {
230+
mask-image: linear-gradient(to #{$value}, white 0%, white 80%, transparent) !important;
231+
}
232+
}
233+
}
197234
}
198235

236+
237+
199238
// 字体大小
200239
@for $i from 1 through 6 {
201240
.fs-#{$i} {

0 commit comments

Comments
 (0)