@lynx-example/lynx-ui-scroll-view 0.0.1 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/Basic/CircleLetterCard.tsx +23 -0
- package/Basic/index.css +71 -0
- package/Basic/index.tsx +30 -0
- package/CHANGELOG.md +15 -0
- package/InnerFlex/FlexItemCard.tsx +33 -0
- package/InnerFlex/index.css +105 -0
- package/InnerFlex/index.tsx +39 -0
- package/dist/ScrollViewBasic.lynx.bundle +0 -0
- package/package.json +5 -3
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
// Copyright 2026 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
|
|
5
|
+
import type { ReactNode } from '@lynx-js/react'
|
|
6
|
+
import './index.css'
|
|
7
|
+
|
|
8
|
+
interface CircleLetterCardProps {
|
|
9
|
+
letter: string
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
export const CircleLetterCard = (props: CircleLetterCardProps): ReactNode => {
|
|
13
|
+
const { letter } = props
|
|
14
|
+
return (
|
|
15
|
+
<view className='card'>
|
|
16
|
+
<view className='circle'>
|
|
17
|
+
<text className='letter'>{letter}</text>
|
|
18
|
+
<text className='title'>ScrollView</text>
|
|
19
|
+
<text className='subtitle'>@lynx-js/lynx-ui</text>
|
|
20
|
+
</view>
|
|
21
|
+
</view>
|
|
22
|
+
)
|
|
23
|
+
}
|
package/Basic/index.css
ADDED
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
@import "@lynx-js/luna-styles/index.css";
|
|
2
|
+
|
|
3
|
+
.demo-container {
|
|
4
|
+
background-color: var(--canvas);
|
|
5
|
+
width: 100%;
|
|
6
|
+
height: 100%;
|
|
7
|
+
padding-top: 48px;
|
|
8
|
+
padding-bottom: 24px;
|
|
9
|
+
display: flex;
|
|
10
|
+
align-items: center;
|
|
11
|
+
justify-content: center;
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
.card {
|
|
15
|
+
width: 288px;
|
|
16
|
+
height: 100%;
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
justify-content: center;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.circle {
|
|
23
|
+
width: 216px;
|
|
24
|
+
height: 216px;
|
|
25
|
+
border-radius: 9999px;
|
|
26
|
+
background-color: var(--canvas);
|
|
27
|
+
padding-bottom: 45px;
|
|
28
|
+
display: flex;
|
|
29
|
+
flex-direction: column;
|
|
30
|
+
align-items: center;
|
|
31
|
+
justify-content: end;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
.letter {
|
|
35
|
+
font-size: 96px;
|
|
36
|
+
font-weight: 600;
|
|
37
|
+
line-height: 96px;
|
|
38
|
+
color: var(--primary);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.title {
|
|
42
|
+
font-size: 16px;
|
|
43
|
+
font-weight: 600;
|
|
44
|
+
color: var(--content);
|
|
45
|
+
margin-top: 4px;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
.subtitle {
|
|
49
|
+
font-size: 10px;
|
|
50
|
+
color: var(--content-subtle);
|
|
51
|
+
margin-top: 1px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.scroll-view {
|
|
55
|
+
width: 100%;
|
|
56
|
+
height: 472px;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.scroll-view-content {
|
|
60
|
+
width: max-content;
|
|
61
|
+
height: 100%;
|
|
62
|
+
display: flex;
|
|
63
|
+
flex-direction: row;
|
|
64
|
+
background: linear-gradient(
|
|
65
|
+
90deg,
|
|
66
|
+
var(--gradient-a),
|
|
67
|
+
var(--gradient-b),
|
|
68
|
+
var(--gradient-c),
|
|
69
|
+
var(--gradient-d)
|
|
70
|
+
);
|
|
71
|
+
}
|
package/Basic/index.tsx
ADDED
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
// Copyright 2026 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
|
|
5
|
+
import { root } from '@lynx-js/react'
|
|
6
|
+
|
|
7
|
+
import { ScrollView } from '@lynx-js/lynx-ui'
|
|
8
|
+
|
|
9
|
+
import { CircleLetterCard } from './CircleLetterCard'
|
|
10
|
+
import './index.css'
|
|
11
|
+
|
|
12
|
+
const LETTERS = ['L', 'Y', 'N', 'X', 'U', 'I', 'L', 'Y', 'N', 'X', 'J', 'S']
|
|
13
|
+
|
|
14
|
+
function App() {
|
|
15
|
+
return (
|
|
16
|
+
<view className='demo-container lunaris-dark'>
|
|
17
|
+
<ScrollView scrollOrientation='horizontal' className='scroll-view'>
|
|
18
|
+
<view className='scroll-view-content'>
|
|
19
|
+
{LETTERS.map((letter, i) => (
|
|
20
|
+
<CircleLetterCard letter={letter} key={`circle-${i}`} />
|
|
21
|
+
))}
|
|
22
|
+
</view>
|
|
23
|
+
</ScrollView>
|
|
24
|
+
</view>
|
|
25
|
+
)
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
root.render(<App />)
|
|
29
|
+
|
|
30
|
+
export default App
|
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,20 @@
|
|
|
1
1
|
# @lynx-example/lynx-ui-scroll-view
|
|
2
2
|
|
|
3
|
+
## 0.0.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- Updated dependencies []:
|
|
8
|
+
- @lynx-js/lynx-ui@3.130.1
|
|
9
|
+
|
|
10
|
+
## 0.0.2
|
|
11
|
+
|
|
12
|
+
### Patch Changes
|
|
13
|
+
|
|
14
|
+
- Include variant source files and shared directories in published packages ([#101](https://github.com/lynx-family/lynx-ui/pull/101))
|
|
15
|
+
|
|
16
|
+
- Adjust example styles to improve clarity in screen recordings. ([#102](https://github.com/lynx-family/lynx-ui/pull/102))
|
|
17
|
+
|
|
3
18
|
## 0.0.1
|
|
4
19
|
|
|
5
20
|
### Patch Changes
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
// Copyright 2026 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
|
|
5
|
+
import type { ReactNode } from '@lynx-js/react'
|
|
6
|
+
|
|
7
|
+
import './index.css'
|
|
8
|
+
|
|
9
|
+
interface FlexItemCardProps {
|
|
10
|
+
letter?: string
|
|
11
|
+
variant?: 'fixed' | 'auto'
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
export const FlexItemCard = (props: FlexItemCardProps): ReactNode => {
|
|
15
|
+
const { letter, variant = 'fixed' } = props
|
|
16
|
+
|
|
17
|
+
return (
|
|
18
|
+
<view className={variant === 'auto' ? 'card auto' : 'card'}>
|
|
19
|
+
<view className='card-content'>
|
|
20
|
+
{variant === 'auto'
|
|
21
|
+
? (
|
|
22
|
+
<>
|
|
23
|
+
<text className='auto-title'>Flex Grow: 1</text>
|
|
24
|
+
<text className='auto-subtitle'>Consumes remaining space</text>
|
|
25
|
+
</>
|
|
26
|
+
)
|
|
27
|
+
: <text className='letter'>{letter}</text>}
|
|
28
|
+
<text className='title'>ScrollView</text>
|
|
29
|
+
<text className='subtitle'>@lynx-js/lynx-ui</text>
|
|
30
|
+
</view>
|
|
31
|
+
</view>
|
|
32
|
+
)
|
|
33
|
+
}
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
@import "@lynx-js/luna-styles/index.css";
|
|
2
|
+
|
|
3
|
+
.container {
|
|
4
|
+
width: 100%;
|
|
5
|
+
height: 100%;
|
|
6
|
+
display: flex;
|
|
7
|
+
align-items: center;
|
|
8
|
+
justify-content: center;
|
|
9
|
+
background-color: var(--canvas);
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.scroll-view {
|
|
13
|
+
width: 100%;
|
|
14
|
+
height: 472px;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.scroll-view-content {
|
|
18
|
+
/* Width accommodates 15 fixed cards (180px each) + 1 auto card + gaps (20px × 15) + padding (40px) */
|
|
19
|
+
width: 3300px;
|
|
20
|
+
height: 100%;
|
|
21
|
+
|
|
22
|
+
display: flex;
|
|
23
|
+
flex-direction: row;
|
|
24
|
+
align-items: center;
|
|
25
|
+
gap: 20px;
|
|
26
|
+
|
|
27
|
+
padding: 20px;
|
|
28
|
+
|
|
29
|
+
background: linear-gradient(
|
|
30
|
+
90deg,
|
|
31
|
+
var(--gradient-a),
|
|
32
|
+
var(--gradient-b),
|
|
33
|
+
var(--gradient-c),
|
|
34
|
+
var(--gradient-d)
|
|
35
|
+
);
|
|
36
|
+
}
|
|
37
|
+
|
|
38
|
+
.card {
|
|
39
|
+
height: 100%;
|
|
40
|
+
border-radius: 8px;
|
|
41
|
+
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
align-items: center;
|
|
45
|
+
justify-content: center;
|
|
46
|
+
|
|
47
|
+
background-color: var(--canvas);
|
|
48
|
+
|
|
49
|
+
flex-grow: 0;
|
|
50
|
+
flex-shrink: 0;
|
|
51
|
+
flex-basis: 180px;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.auto {
|
|
55
|
+
flex-grow: 1;
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
min-width: 180px;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.card-content {
|
|
61
|
+
width: 100%;
|
|
62
|
+
height: 216px;
|
|
63
|
+
display: flex;
|
|
64
|
+
flex-direction: column;
|
|
65
|
+
align-items: center;
|
|
66
|
+
justify-content: end;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.letter {
|
|
70
|
+
font-size: 84px;
|
|
71
|
+
font-weight: 600;
|
|
72
|
+
line-height: 84px;
|
|
73
|
+
color: var(--primary);
|
|
74
|
+
margin-bottom: 64px;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
.auto-title {
|
|
78
|
+
font-size: 28px;
|
|
79
|
+
font-weight: 600;
|
|
80
|
+
line-height: 36px;
|
|
81
|
+
text-align: center;
|
|
82
|
+
color: var(--primary);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.auto-subtitle {
|
|
86
|
+
font-size: 16px;
|
|
87
|
+
line-height: 21px;
|
|
88
|
+
color: var(--primary);
|
|
89
|
+
text-align: center;
|
|
90
|
+
margin-top: 8px;
|
|
91
|
+
margin-bottom: 56px;
|
|
92
|
+
max-width: 160px;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
.title {
|
|
96
|
+
font-size: 16px;
|
|
97
|
+
font-weight: 600;
|
|
98
|
+
color: var(--content);
|
|
99
|
+
}
|
|
100
|
+
|
|
101
|
+
.subtitle {
|
|
102
|
+
margin-top: 2px;
|
|
103
|
+
font-size: 10px;
|
|
104
|
+
color: var(--content-subtle);
|
|
105
|
+
}
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
// Copyright 2026 The Lynx Authors. All rights reserved.
|
|
2
|
+
// Licensed under the Apache License Version 2.0 that can be found in the
|
|
3
|
+
// LICENSE file in the root directory of this source tree.
|
|
4
|
+
|
|
5
|
+
import { root } from '@lynx-js/react'
|
|
6
|
+
|
|
7
|
+
import { ScrollView } from '@lynx-js/lynx-ui'
|
|
8
|
+
|
|
9
|
+
import { FlexItemCard } from './FlexItemCard'
|
|
10
|
+
|
|
11
|
+
import './index.css'
|
|
12
|
+
|
|
13
|
+
const LETTERS = 'L Y N X U I R E A C T L Y N X'.split(' ')
|
|
14
|
+
|
|
15
|
+
// This example demonstrates how flex-grow consumes remaining space
|
|
16
|
+
// inside a scrollable content container.
|
|
17
|
+
|
|
18
|
+
function App() {
|
|
19
|
+
return (
|
|
20
|
+
<view className='container lunaris-dark'>
|
|
21
|
+
<ScrollView scrollOrientation='horizontal' className='scroll-view'>
|
|
22
|
+
<view className='scroll-view-content'>
|
|
23
|
+
<FlexItemCard variant='auto' />
|
|
24
|
+
{LETTERS.map((letter, i) => (
|
|
25
|
+
<FlexItemCard
|
|
26
|
+
key={`${letter}-${i}`}
|
|
27
|
+
letter={letter}
|
|
28
|
+
variant='fixed'
|
|
29
|
+
/>
|
|
30
|
+
))}
|
|
31
|
+
</view>
|
|
32
|
+
</ScrollView>
|
|
33
|
+
</view>
|
|
34
|
+
)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
root.render(<App />)
|
|
38
|
+
|
|
39
|
+
export default App
|
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@lynx-example/lynx-ui-scroll-view",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Example app demonstrating ScrollView usage in lynx-ui",
|
|
5
5
|
"homepage": "https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/ScrollView#readme",
|
|
6
6
|
"repository": {
|
|
@@ -17,13 +17,15 @@
|
|
|
17
17
|
"LICENSE",
|
|
18
18
|
"CHANGELOG.md",
|
|
19
19
|
"dist/",
|
|
20
|
-
"
|
|
20
|
+
"**/*.tsx",
|
|
21
|
+
"**/*.ts",
|
|
22
|
+
"**/*.css",
|
|
21
23
|
"lynx.config.mjs"
|
|
22
24
|
],
|
|
23
25
|
"dependencies": {
|
|
24
26
|
"@lynx-js/react": "0.113.0",
|
|
25
27
|
"@lynx-js/luna-styles": "0.1.0",
|
|
26
|
-
"@lynx-js/lynx-ui": "3.130.
|
|
28
|
+
"@lynx-js/lynx-ui": "3.130.1"
|
|
27
29
|
},
|
|
28
30
|
"devDependencies": {
|
|
29
31
|
"@lynx-js/qrcode-rsbuild-plugin": "0.3.3",
|