@lynx-example/lynx-ui-scroll-view 0.0.6 → 0.0.8

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.
Files changed (10) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/ZIndex/index.css +78 -0
  3. package/ZIndex/index.tsx +51 -0
  4. package/dist/ScrollViewBasic.lynx.bundle +0 -0
  5. package/dist/ScrollViewHorizontal.lynx.bundle +0 -0
  6. package/dist/ScrollViewHorizontalRTL.lynx.bundle +0 -0
  7. package/dist/ScrollViewInnerFlex.lynx.bundle +0 -0
  8. package/dist/ScrollViewZIndex.lynx.bundle +0 -0
  9. package/lynx.config.mjs +1 -0
  10. package/package.json +3 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @lynx-example/lynx-ui-scroll-view
2
2
 
3
+ ## 0.0.8
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies []:
8
+ - @lynx-js/lynx-ui@3.133.1
9
+ - @lynx-js/luna-styles@0.2.0
10
+
11
+ ## 0.0.7
12
+
13
+ ### Patch Changes
14
+
15
+ - Fix non-luna CSS vars. ([#180](https://github.com/lynx-family/lynx-ui/pull/180))
16
+
17
+ - Updated dependencies []:
18
+ - @lynx-js/lynx-ui@3.133.0
19
+
3
20
  ## 0.0.6
4
21
 
5
22
  ### Patch Changes
package/ZIndex/index.css ADDED
@@ -0,0 +1,78 @@
1
+ @import "@lynx-js/luna-styles/index.css";
2
+
3
+ .demo-container {
4
+ width: 100%;
5
+ height: 100%;
6
+ padding-top: 48px;
7
+ padding-bottom: 24px;
8
+ background-color: var(--canvas-ambient);
9
+ }
10
+
11
+ .scroll-view {
12
+ width: 100%;
13
+ height: 520px;
14
+ }
15
+
16
+ .scroll-view-content {
17
+ width: 100%;
18
+ height: 920px;
19
+ padding-left: 16px;
20
+ padding-right: 16px;
21
+ padding-bottom: 32px;
22
+ box-sizing: border-box;
23
+ }
24
+
25
+ .layer-card {
26
+ position: relative;
27
+ width: 100%;
28
+ height: 196px;
29
+ margin-top: -28px;
30
+ padding-top: 56px;
31
+ padding-left: 20px;
32
+ padding-right: 20px;
33
+ border-radius: 20px;
34
+ background-color: var(--canvas);
35
+ border-width: 1px;
36
+ border-color: var(--line);
37
+ }
38
+
39
+ .layer-card:first-child {
40
+ margin-top: 0;
41
+ }
42
+
43
+ .layer-card--raised {
44
+ z-index: 2;
45
+ }
46
+
47
+ .layer-card__badge {
48
+ position: absolute;
49
+ top: -18px;
50
+ right: 20px;
51
+ z-index: 1;
52
+ padding: 10px 14px;
53
+ border-radius: 999px;
54
+ background-color: var(--neutral);
55
+ }
56
+
57
+ .layer-card__badge--raised {
58
+ z-index: 3;
59
+ background-color: var(--primary);
60
+ }
61
+
62
+ .layer-card__badge-text {
63
+ font-size: 12px;
64
+ font-weight: 600;
65
+ color: var(--neutral-content);
66
+ }
67
+
68
+ .layer-card__title {
69
+ font-size: 22px;
70
+ font-weight: 600;
71
+ color: var(--content);
72
+ }
73
+
74
+ .layer-card__subtitle {
75
+ margin-top: 10px;
76
+ font-size: 14px;
77
+ color: var(--content-subtle);
78
+ }
package/ZIndex/index.tsx ADDED
@@ -0,0 +1,51 @@
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 './index.css'
10
+
11
+ const CARDS = [
12
+ { key: 'card-1', title: 'Base Layer', badge: 'z-index: 1' },
13
+ { key: 'card-2', title: 'Raised Layer', badge: 'z-index: 3' },
14
+ { key: 'card-3', title: 'Normal Layer', badge: 'z-index: 1' },
15
+ { key: 'card-4', title: 'Content Layer', badge: 'z-index: 1' },
16
+ ]
17
+
18
+ function App() {
19
+ return (
20
+ <view className='demo-container lunaris-dark'>
21
+ <ScrollView className='scroll-view'>
22
+ <view className='scroll-view-content'>
23
+ {CARDS.map((card, index) => (
24
+ <view
25
+ className={`layer-card ${
26
+ index === 1 ? 'layer-card--raised' : ''
27
+ }`}
28
+ key={card.key}
29
+ >
30
+ <view
31
+ className={`layer-card__badge ${
32
+ index === 1 ? 'layer-card__badge--raised' : ''
33
+ }`}
34
+ >
35
+ <text className='layer-card__badge-text'>{card.badge}</text>
36
+ </view>
37
+ <text className='layer-card__title'>{card.title}</text>
38
+ <text className='layer-card__subtitle'>
39
+ Scroll the list and check the overlapping badge.
40
+ </text>
41
+ </view>
42
+ ))}
43
+ </view>
44
+ </ScrollView>
45
+ </view>
46
+ )
47
+ }
48
+
49
+ root.render(<App />)
50
+
51
+ export default App
package/dist/ScrollViewBasic.lynx.bundle CHANGED
Binary file
package/lynx.config.mjs CHANGED
@@ -9,6 +9,7 @@ const defaultConfig = exampleConfig({
9
9
  ScrollViewHorizontal: './Horizontal/index.tsx',
10
10
  ScrollViewHorizontalRTL: './HorizontalRTL/index.tsx',
11
11
  ScrollViewInnerFlex: './InnerFlex/index.tsx',
12
+ ScrollViewZIndex: './ZIndex/index.tsx',
12
13
  }, { needWeb: false })
13
14
 
14
15
  export default defaultConfig
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lynx-example/lynx-ui-scroll-view",
3
- "version": "0.0.6",
3
+ "version": "0.0.8",
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": {
@@ -24,8 +24,8 @@
24
24
  ],
25
25
  "dependencies": {
26
26
  "@lynx-js/react": "0.114.0",
27
- "@lynx-js/lynx-ui": "3.132.0",
28
- "@lynx-js/luna-styles": "0.1.0"
27
+ "@lynx-js/luna-styles": "0.2.0",
28
+ "@lynx-js/lynx-ui": "3.133.1"
29
29
  },
30
30
  "devDependencies": {
31
31
  "@lynx-js/qrcode-rsbuild-plugin": "0.4.6",