@lynx-example/lynx-ui-scroll-view 0.0.15 → 0.0.17

package/ScrollBy/index.tsx

@@ -4,6 +4,8 @@
 
 import { root } from '@lynx-js/react'
 
+import { Button } from '@lynx-js/lynx-ui'
+
 import './index.css'
 
 const ITEMS = Array.from({ length: 24 }, (_, index) => index + 1)
@@ -19,24 +21,28 @@ function App() {
   return (
     <view className='demo-container lunaris-dark'>
       <view className='toolbar'>
-        <view
+        <Button
           className='button'
-          main-thread:bindtap={() => {
-            'main thread'
-            scrollByOffset(-160)
+          buttonProps={{
+            'main-thread:bindtap': () => {
+              'main thread'
+              scrollByOffset(-160)
+            },
           }}
         >
           <text className='button-text'>Scroll Up</text>
-        </view>
-        <view
+        </Button>
+        <Button
           className='button button--primary'
-          main-thread:bindtap={() => {
-            'main thread'
-            scrollByOffset(160)
+          buttonProps={{
+            'main-thread:bindtap': () => {
+              'main thread'
+              scrollByOffset(160)
+            },
           }}
         >
           <text className='button-text'>Scroll Down</text>
-        </view>
+        </Button>
       </view>
 
       <scroll-view

package/ZIndex/data.ts

@@ -0,0 +1,47 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+export interface LayerCardData {
+  key: string
+  title: string
+  subtitle: string
+  badge: string
+  surfaceClassName:
+    | 'layer-card--canvas'
+    | 'layer-card--paper'
+    | 'layer-card--paper-clear'
+  raised?: boolean
+}
+
+export const CARDS: LayerCardData[] = [
+  {
+    key: 'card-1',
+    title: 'Canvas Surface',
+    subtitle: 'The first content layer above the canvas-ambient viewport.',
+    badge: 'canvas · z-index: 1',
+    surfaceClassName: 'layer-card--canvas',
+  },
+  {
+    key: 'card-2',
+    title: 'Raised Paper Surface',
+    subtitle: 'The raised badge overlaps neighboring cards while scrolling.',
+    badge: 'paper · z-index: 3',
+    surfaceClassName: 'layer-card--paper',
+    raised: true,
+  },
+  {
+    key: 'card-3',
+    title: 'Paper Surface',
+    subtitle: 'Standard content card sitting under the raised layer.',
+    badge: 'paper · z-index: 1',
+    surfaceClassName: 'layer-card--paper',
+  },
+  {
+    key: 'card-4',
+    title: 'Paper Clear Surface',
+    subtitle: 'A lighter surface variant to compare stacked elevation.',
+    badge: 'paper-clear · z-index: 1',
+    surfaceClassName: 'layer-card--paper-clear',
+  },
+]

package/ZIndex/index.css

@@ -1,24 +1,38 @@
 @import "@lynx-js/luna-styles/index.css";
 
 .demo-container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
   width: 100%;
   height: 100%;
-  padding-top: 48px;
-  padding-bottom: 24px;
-  background-color: var(--canvas-ambient);
+  padding: 48px 16px 24px;
+  box-sizing: border-box;
+}
+
+.luna-gradient-rose {
+  background: linear-gradient(
+    0deg,
+    var(--gradient-a),
+    var(--gradient-b)
+  );
 }
 
 .scroll-view {
   width: 100%;
-  height: 520px;
+  height: 560px;
+  padding: 12px;
+  border-radius: 24px;
+  background-color: var(--canvas-ambient);
+  box-sizing: border-box;
 }
 
 .scroll-view-content {
   width: 100%;
   height: 920px;
-  padding-left: 16px;
-  padding-right: 16px;
-  padding-bottom: 32px;
+  padding-left: 4px;
+  padding-right: 4px;
+  padding-bottom: 20px;
   box-sizing: border-box;
 }
 
@@ -31,7 +45,6 @@
   padding-left: 20px;
   padding-right: 20px;
   border-radius: 20px;
-  background-color: var(--canvas);
   border-width: 1px;
   border-color: var(--line);
 }
@@ -44,6 +57,18 @@
   z-index: 2;
 }
 
+.layer-card--canvas {
+  background-color: var(--canvas);
+}
+
+.layer-card--paper {
+  background-color: var(--paper);
+}
+
+.layer-card--paper-clear {
+  background-color: var(--paper-clear);
+}
+
 .layer-card__badge {
   position: absolute;
   top: -18px;
@@ -56,15 +81,20 @@
 
 .layer-card__badge--raised {
   z-index: 3;
-  background-color: var(--primary);
+  background-color: var(--gradient-b);
 }
 
 .layer-card__badge-text {
   font-size: 12px;
   font-weight: 600;
+  line-height: 16px;
   color: var(--neutral-content);
 }
 
+.layer-card__badge--raised .layer-card__badge-text {
+  color: var(--gradient-content);
+}
+
 .layer-card__title {
   font-size: 22px;
   font-weight: 600;

package/ZIndex/index.tsx

@@ -5,38 +5,36 @@
 import { root } from '@lynx-js/react'
 
 import { ScrollView } from '@lynx-js/lynx-ui'
+import { clsx } from 'clsx'
 
+import { CARDS } from './data'
 import './index.css'
 
-const CARDS = [
-  { key: 'card-1', title: 'Base Layer', badge: 'z-index: 1' },
-  { key: 'card-2', title: 'Raised Layer', badge: 'z-index: 3' },
-  { key: 'card-3', title: 'Normal Layer', badge: 'z-index: 1' },
-  { key: 'card-4', title: 'Content Layer', badge: 'z-index: 1' },
-]
-
 function App() {
   return (
-    <view className='demo-container lunaris-dark'>
+    <view className='demo-container lunaris-dark luna-gradient-rose'>
       <ScrollView className='scroll-view'>
         <view className='scroll-view-content'>
-          {CARDS.map((card, index) => (
+          {CARDS.map((card) => (
             <view
-              className={`layer-card ${
-                index === 1 ? 'layer-card--raised' : ''
-              }`}
+              className={clsx(
+                'layer-card',
+                card.surfaceClassName,
+                card.raised && 'layer-card--raised',
+              )}
               key={card.key}
             >
               <view
-                className={`layer-card__badge ${
-                  index === 1 ? 'layer-card__badge--raised' : ''
-                }`}
+                className={clsx(
+                  'layer-card__badge',
+                  card.raised && 'layer-card__badge--raised',
+                )}
               >
                 <text className='layer-card__badge-text'>{card.badge}</text>
               </view>
               <text className='layer-card__title'>{card.title}</text>
               <text className='layer-card__subtitle'>
-                Scroll the list and check the overlapping badge.
+                {card.subtitle}
               </text>
             </view>
           ))}

package/lynx.config.mjs

@@ -6,9 +6,10 @@ import { exampleConfig } from '../../../tools/configs/exampleConfig.mjs'
 
 const defaultConfig = exampleConfig({
   ScrollViewBasic: './Basic/index.tsx',
-  ScrollViewHorizontal: './Horizontal/index.tsx',
-  ScrollViewHorizontalRTL: './HorizontalRTL/index.tsx',
+  ScrollViewBounces: './Bounces/index.tsx',
+  ScrollViewBouncesRTL: './BouncesRTL/index.tsx',
   ScrollViewInnerFlex: './InnerFlex/index.tsx',
+  ScrollViewNativeUseBounces: './NativeUseBounces/index.tsx',
   ScrollViewScrollBy: './ScrollBy/index.tsx',
   ScrollViewZIndex: './ZIndex/index.tsx',
 }, { needWeb: false })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lynx-example/lynx-ui-scroll-view",
-  "version": "0.0.15",
+  "version": "0.0.17",
   "description": "Example app demonstrating ScrollView usage in lynx-ui",
   "homepage": "https://github.com/lynx-family/lynx-ui/tree/main/apps/examples/ScrollView#readme",
   "repository": {
@@ -24,8 +24,9 @@
   ],
   "dependencies": {
     "@lynx-js/react": "0.123.1",
-    "@lynx-js/luna-styles": "0.2.1",
-    "@lynx-js/lynx-ui": "3.135.4"
+    "clsx": "^2.1.1",
+    "@lynx-js/luna-styles": "0.2.2",
+    "@lynx-js/lynx-ui": "3.137.0"
   },
   "devDependencies": {
     "@lynx-js/qrcode-rsbuild-plugin": "0.6.0",

package/shared/BounceTag/index.css

@@ -0,0 +1,37 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.bounce-tag {
+  padding: 0px 32px;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  direction: inherit;
+}
+
+.bounce-tag__surface {
+  min-width: 56px;
+  padding: 16px 16px;
+  border-radius: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.bounce-tag__surface--upper {
+  background-color: var(--gradient-a);
+}
+
+.bounce-tag__surface--lower {
+  background-color: var(--gradient-d);
+}
+
+.bounce-tag__text-line {
+  font-size: 13px;
+  font-weight: 600;
+  line-height: 16px;
+  text-align: center;
+  color: var(--gradient-content);
+}

package/shared/BounceTag/index.tsx

@@ -0,0 +1,27 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import './index.css'
+
+interface BounceTagProps {
+  label: string
+  variant: 'upper' | 'lower'
+}
+
+export function BounceTag(props: BounceTagProps) {
+  const { label, variant } = props
+  const lines = label.split(' ')
+
+  return (
+    <view className='bounce-tag'>
+      <view className={`bounce-tag__surface bounce-tag__surface--${variant}`}>
+        {lines.map((line, index) => (
+          <text className='bounce-tag__text-line' key={`${line}-${index}`}>
+            {line}
+          </text>
+        ))}
+      </view>
+    </view>
+  )
+}

package/shared/CircleCard/index.css

@@ -0,0 +1,7 @@
+@import "@lynx-js/luna-styles/index.css";
+
+@import "../base.css";
+
+.subtitle--ltr {
+  direction: ltr;
+}

package/shared/CircleCard/index.tsx

@@ -0,0 +1,35 @@
+// Copyright 2026 The Lynx Authors. All rights reserved.
+// Licensed under the Apache License Version 2.0 that can be found in the
+// LICENSE file in the root directory of this source tree.
+
+import './index.css'
+
+import { clsx } from 'clsx'
+
+interface CircleCardProps {
+  letter: string
+  title: string
+  subtitle: string
+  subtitleDirection?: 'inherit' | 'ltr'
+}
+
+export function CircleCard(props: CircleCardProps) {
+  const { letter, title, subtitle, subtitleDirection = 'inherit' } = props
+
+  return (
+    <view className='card'>
+      <view className='circle'>
+        <text className='letter'>{letter}</text>
+        <text className='title'>{title}</text>
+        <text
+          className={clsx(
+            'subtitle',
+            subtitleDirection === 'ltr' && 'subtitle--ltr',
+          )}
+        >
+          {subtitle}
+        </text>
+      </view>
+    </view>
+  )
+}

package/{HorizontalRTL/index.css → shared/base.css}

@@ -1,43 +1,20 @@
 @import "@lynx-js/luna-styles/index.css";
 
 .demo-container {
+  background-color: var(--canvas);
   width: 100%;
   height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: var(--canvas);
-}
-
-.rtl-scope {
-  direction: rtl;
+  box-sizing: border-box;
 }
 
 .scroll-view {
   width: 100%;
-  height: 472px;
   direction: inherit;
 }
 
-.scroll-view-content {
-  width: max-content;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 24px;
-  padding-right: 24px;
-  gap: 20px;
-  direction: inherit;
-  background: linear-gradient(
-    90deg,
-    var(--gradient-a),
-    var(--gradient-b),
-    var(--gradient-c),
-    var(--gradient-d)
-  );
-}
-
 .card {
   width: 288px;
   height: 100%;
@@ -80,32 +57,3 @@
   color: var(--content-subtle);
   margin-top: 1px;
 }
-
-.bounce-slot {
-  width: 96px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  direction: inherit;
-}
-
-.bounce-slot__text {
-  min-width: 56px;
-  padding: 16px 12px;
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  background-color: var(--primary);
-}
-
-.bounce-slot__line {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-  text-align: center;
-  color: var(--gradient-content);
-}

package/Basic/CircleLetterCard.tsx

@@ -1,23 +0,0 @@
-// Copyright 2026 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
-import type { ReactNode } from '@lynx-js/react'
-import './index.css'
-
-interface CircleLetterCardProps {
-  letter: string
-}
-
-export const CircleLetterCard = (props: CircleLetterCardProps): ReactNode => {
-  const { letter } = props
-  return (
-    <view className='card'>
-      <view className='circle'>
-        <text className='letter'>{letter}</text>
-        <text className='title'>ScrollView</text>
-        <text className='subtitle'>@lynx-js/lynx-ui</text>
-      </view>
-    </view>
-  )
-}

package/Horizontal/index.css

@@ -1,110 +0,0 @@
-@import "@lynx-js/luna-styles/index.css";
-
-.demo-container {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  background-color: var(--canvas);
-}
-
-.scroll-view {
-  width: 100%;
-  height: 472px;
-}
-
-.scroll-view-content {
-  width: max-content;
-  height: 100%;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 24px;
-  padding-right: 24px;
-  gap: 20px;
-  background: linear-gradient(
-    90deg,
-    var(--gradient-a),
-    var(--gradient-b),
-    var(--gradient-c),
-    var(--gradient-d)
-  );
-}
-
-.card {
-  width: 288px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-}
-
-.circle {
-  width: 216px;
-  height: 216px;
-  border-radius: 9999px;
-  background-color: var(--canvas);
-  padding-bottom: 45px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: end;
-}
-
-.letter {
-  font-size: 96px;
-  font-weight: 600;
-  line-height: 96px;
-  color: var(--primary);
-}
-
-.title {
-  font-size: 16px;
-  font-weight: 600;
-  color: var(--content);
-  margin-top: 4px;
-}
-
-.subtitle {
-  font-size: 10px;
-  color: var(--content-subtle);
-  margin-top: 1px;
-}
-
-.bounce-slot {
-  width: 96px;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.bounce-slot__text {
-  min-width: 56px;
-  padding: 16px 12px;
-  border-radius: 20px;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: 4px;
-  background-color: var(--primary);
-}
-
-.bounce-slot__text--upper {
-  background-color: var(--primary);
-}
-
-.bounce-slot__text--lower {
-  background-color: var(--primary-2);
-}
-
-.bounce-slot__line {
-  font-size: 13px;
-  font-weight: 600;
-  line-height: 16px;
-  text-align: center;
-  color: var(--gradient-content);
-}

package/Horizontal/index.tsx

@@ -1,75 +0,0 @@
-// Copyright 2026 The Lynx Authors. All rights reserved.
-// Licensed under the Apache License Version 2.0 that can be found in the
-// LICENSE file in the root directory of this source tree.
-
-import { root } from '@lynx-js/react'
-
-import { ScrollView } from '@lynx-js/lynx-ui'
-
-import './index.css'
-
-const LETTERS = [
-  'L',
-  'Y',
-  'N',
-  'X',
-  'L',
-  'T',
-  'R',
-  'B',
-  'O',
-  'U',
-  'N',
-  'C',
-  'E',
-]
-
-function BounceTag(props: { label: string, variant: 'upper' | 'lower' }) {
-  const { label, variant } = props
-  const lines = label.split(' ')
-
-  return (
-    <view className='bounce-slot'>
-      <view className={`bounce-slot__text bounce-slot__text--${variant}`}>
-        {lines.map((line, index) => (
-          <text className='bounce-slot__line' key={`${line}-${index}`}>
-            {line}
-          </text>
-        ))}
-      </view>
-    </view>
-  )
-}
-
-function App() {
-  return (
-    <view className='demo-container lunaris-dark'>
-      <ScrollView
-        scrollOrientation='horizontal'
-        className='scroll-view'
-        bounceableOptions={{
-          enableBounces: true,
-          alwaysBouncing: true,
-          upperBounceItem: <BounceTag label='Start Bounce' variant='upper' />,
-          lowerBounceItem: <BounceTag label='End Bounce' variant='lower' />,
-        }}
-      >
-        <view className='scroll-view-content'>
-          {LETTERS.map((letter, index) => (
-            <view className='card' key={`${letter}-${index}`}>
-              <view className='circle'>
-                <text className='letter'>{letter}</text>
-                <text className='title'>ScrollView Horizontal</text>
-                <text className='subtitle'>direction: ltr + useBounce</text>
-              </view>
-            </view>
-          ))}
-        </view>
-      </ScrollView>
-    </view>
-  )
-}
-
-root.render(<App />)
-
-export default App