@lynx-example/lynx-ui-swiper 0.0.1 → 0.0.3

package/Basic/index.tsx

@@ -0,0 +1,109 @@
+// 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, useRef, useState } from '@lynx-js/react'
+
+import { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import { Button } from '../Common/Button'
+import { Card } from '../Common/Card'
+import { Indicator } from '../Common/Indicator'
+
+import './styles.css'
+
+const itemArr: number[] = [1, 2, 3, 4, 5]
+
+const itemWidths = [250, 350, 400]
+const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+
+const INITIAL_INDEX = 2
+
+function SwiperEntry(): JSX.Element {
+  const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(1)
+  const [currentIndex, setCurrentIndex] = useState<number>(INITIAL_INDEX)
+  const swiperRef = useRef<SwiperRef>(null)
+
+  return (
+    <view className='demo-container lunaris-dark'>
+      <view className='top-area' />
+      <view className='content-area'>
+        <Swiper
+          ref={swiperRef}
+          data={itemArr}
+          itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+          containerWidth={lynx.__globalProps.screenWidth - 32
+            || SystemInfo.pixelWidth / SystemInfo.pixelRatio - 32}
+          duration={500}
+          initialIndex={INITIAL_INDEX}
+          onChange={setCurrentIndex}
+          mode='normal'
+          modeConfig={{
+            align: alignArr[alignIndex],
+            spaceBetween: 16,
+          }}
+          autoPlay={false}
+          style={{
+            overflow: 'visible',
+          }}
+        >
+          {({ index, realIndex }) => (
+            <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+              <Card
+                index={realIndex}
+                style={{
+                  height: '250px',
+                }}
+              />
+            </SwiperItem>
+          )}
+        </Swiper>
+        <Indicator
+          current={currentIndex}
+          count={itemArr.length}
+        />
+      </view>
+      <view className='operation'>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipePrev()
+          }}
+          className='expand'
+          text='SwipePrev'
+        />
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipeNext()
+          }}
+          className='expand'
+          type='primary'
+          text='SwipeNext'
+        />
+      </view>
+      <view className='sub-operation'>
+        <Button
+          onClick={() => {
+            setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={'Change Item Width'}
+          subText={`ItemWidth: ${itemWidths[itemWidthsIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setAlignIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={'Change Align Type'}
+          subText={`AlignType: ${alignArr[alignIndex]}`}
+        >
+        </Button>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/Basic/styles.css

@@ -0,0 +1,49 @@
+@import "@lynx-js/luna-styles/index.css";
+
+.demo-container {
+  background-color: var(--canvas);
+  display: flex;
+  width: 100%;
+  height: 100%;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.expand {
+  flex: 1;
+}
+
+.top-area {
+  height: 54px;
+  width: 100%;
+}
+
+.content-area {
+  display: flex;
+  background: linear-gradient(
+    0deg,
+    var(--gradient-a),
+    var(--gradient-b),
+  );
+  padding-top: 96px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 24px;
+  padding-bottom: 12px;
+}
+
+.operation {
+  display: flex;
+  flex-direction: row;
+  gap: 16px;
+  padding: 32px 16px;
+}
+
+.sub-operation {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 8px;
+  padding: 0 16px 72px 16px;
+}

package/BasicDynamic/index.tsx

@@ -0,0 +1,130 @@
+// 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, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+import { Button } from '../Common/Button'
+
+const DEFAULT_COLORS_ARR: string[] = [
+  'red',
+  'green',
+  'yellow',
+  'purple',
+  'lightgreen',
+  'lightyellow',
+  'lightblue',
+  'gray',
+]
+
+const itemWidths = [250, 350, 400]
+const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+
+function SwiperEntry(): JSX.Element {
+  const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(0)
+  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const swiperRef = useRef<SwiperRef>(null)
+  const [colorsArr, setColorsArr] = useState<string[]>([])
+
+  useEffect(() => {
+    setTimeout(() => {
+      setColorsArr(DEFAULT_COLORS_ARR.slice(0, 4))
+    }, 1000)
+  }, [])
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        onChange={setCurrentIndex}
+        mode='normal'
+        loop={true}
+        autoPlay={true}
+        modeConfig={{
+          align: alignArr[alignIndex] ?? 'start',
+        }}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+      <view class='operation'>
+        <view class='block'>
+          <text>Current Index: {currentIndex}</text>
+        </view>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipePrev()
+          }}
+          text='SwipePrev'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipeNext()
+          }}
+          text='SwipeNext'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setAlignIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`alignType: ${alignArr[alignIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setColorsArr(prev => DEFAULT_COLORS_ARR.slice(0, prev.length + 1))
+          }}
+          text={`Add List Length, current: ${colorsArr.length}`}
+        >
+        </Button>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/BasicDynamic/styles.css

@@ -0,0 +1,47 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.block {
+  display: flex;
+  width: 100%;
+  margin: 10px;
+}

package/BasicUpdateSize/index.tsx

@@ -0,0 +1,131 @@
+// 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, useEffect, useRef, useState } from '@lynx-js/react'
+
+import { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+import type { SwiperRef } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+import { Button } from '../Common/Button'
+
+const DEFAULT_COLORS_ARR: string[] = [
+  'red',
+  'green',
+  'yellow',
+  'purple',
+  'lightgreen',
+  'lightyellow',
+  'lightblue',
+  'gray',
+]
+
+const itemWidths = [250, 350, 400]
+const alignArr: ['start', 'center', 'end'] = ['start', 'center', 'end']
+
+function SwiperEntry(): JSX.Element {
+  const [itemWidthsIndex, setItemWidthsIndex] = useState<number>(0)
+  const [alignIndex, setAlignIndex] = useState<number>(0)
+  const [currentIndex, setCurrentIndex] = useState<number>(0)
+  const swiperRef = useRef<SwiperRef>(null)
+  const [colorsArr, setColorsArr] = useState<string[]>([])
+
+  useEffect(() => {
+    setTimeout(() => {
+      setColorsArr(DEFAULT_COLORS_ARR.slice(0, 4))
+    }, 1000)
+  }, [])
+
+  return (
+    <view id='container'>
+      <Swiper
+        ref={swiperRef}
+        data={colorsArr}
+        itemWidth={itemWidths[itemWidthsIndex] ?? 0}
+        containerWidth={itemWidths[itemWidthsIndex] ?? 0}
+        itemHeight={200}
+        duration={500}
+        initialIndex={0}
+        onChange={setCurrentIndex}
+        mode='normal'
+        loop={true}
+        autoPlay={false}
+        modeConfig={{
+          align: alignArr[alignIndex] ?? 'start',
+        }}
+      >
+        {({ item, index, realIndex }) => (
+          <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+            <view
+              class='block-view'
+              style={{
+                width: '100%',
+                height: '100%',
+                backgroundColor: item,
+                display: 'flex',
+                justifyContent: 'center',
+                alignItems: 'center',
+              }}
+            >
+              <view
+                style={{
+                  backgroundColor: 'white',
+                  width: '4px',
+                  height: '4px',
+                }}
+              >
+              </view>
+            </view>
+            <text class='image-text'>Number.{index}</text>
+          </SwiperItem>
+        )}
+      </Swiper>
+      <view class='operation'>
+        <view class='block'>
+          <text>Current Index: {currentIndex}</text>
+        </view>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipePrev()
+          }}
+          text='SwipePrev'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            swiperRef.current?.swipeNext()
+          }}
+          text='SwipeNext'
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setItemWidthsIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`itemWidth: ${itemWidths[itemWidthsIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setAlignIndex(prev => (prev + 1) % itemWidths.length)
+          }}
+          text={`alignType: ${alignArr[alignIndex]}`}
+        >
+        </Button>
+        <Button
+          onClick={() => {
+            setColorsArr(prev => DEFAULT_COLORS_ARR.slice(0, prev.length + 1))
+          }}
+          text={`Add List Length, current: ${colorsArr.length}`}
+        >
+        </Button>
+      </view>
+    </view>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/BasicUpdateSize/styles.css

@@ -0,0 +1,47 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.block {
+  display: flex;
+  width: 100%;
+  margin: 10px;
+}

package/Bounces/index.tsx

@@ -0,0 +1,73 @@
+// 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 { Swiper, SwiperItem } from '@lynx-js/lynx-ui'
+
+import './styles.css'
+
+const colorsArr: string[] = ['red', 'green', 'yellow', 'purple']
+
+function SwiperEntry() {
+  return (
+    <Swiper
+      data={colorsArr}
+      itemWidth={250}
+      loop={false}
+      duration={500}
+      initialIndex={0}
+      mode='normal'
+      modeConfig={{
+        align: 'start',
+      }}
+      bounceConfig={{
+        enable: true,
+        startBounceItemWidth: 0,
+        endBounceItemWidth: 100,
+        endBounceItem: (
+          <view style='display: linear; linear-orientation: vertical; height: 100%; width: 30px; border: 1px solid #000;'>
+            <text style='color: #000'>Show More</text>
+          </view>
+        ),
+        onEndBounceItemBounce: ({ type }) => {
+          console.log('onBounce result', type)
+        },
+      }}
+      onChange={(index) => {
+        console.log('onChange', index)
+      }}
+    >
+      {({ item, index, realIndex }) => (
+        <SwiperItem index={index} key={realIndex} realIndex={realIndex}>
+          <view
+            class='block-view'
+            style={{
+              width: '100%',
+              height: '100%',
+              backgroundColor: item,
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+            }}
+          >
+            <view
+              style={{
+                backgroundColor: 'white',
+                width: '4px',
+                height: '4px',
+              }}
+            >
+            </view>
+          </view>
+          <text class='image-text'>Number.{index}</text>
+        </SwiperItem>
+      )}
+    </Swiper>
+  )
+}
+
+root.render(<SwiperEntry />)
+
+export default SwiperEntry

package/Bounces/styles.css

@@ -0,0 +1,41 @@
+.image {
+  width: 100%;
+  height: 100%;
+}
+
+.image-text {
+  position: absolute;
+}
+
+.container {
+  width: 100%;
+  height: 100%;
+}
+
+.title-container {
+  margin-top: 10px;
+  margin-bottom: 5px;
+}
+
+.title-text {
+  font-size: 16px;
+}
+
+.button {
+  border: 1px solid;
+  border-radius: 4px;
+  width: 150px;
+  background-color: red;
+  margin: 4px 8px;
+  padding: 4px 8px;
+}
+
+.button-text {
+  color: white;
+}
+
+.operation {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @lynx-example/lynx-ui-swiper
 
+## 0.0.3
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @lynx-js/lynx-ui@3.130.1
+
+## 0.0.2
+
+### Patch Changes
+
+- Include variant source files and shared directories in published packages ([#101](https://github.com/lynx-family/lynx-ui/pull/101))
+
+- Adjust example styles to improve clarity in screen recordings. ([#102](https://github.com/lynx-family/lynx-ui/pull/102))
+
 ## 0.0.1
 
 ### Patch Changes

package/Common/Button/index.tsx

@@ -0,0 +1,48 @@
+// 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 { Button as ButtonPrimitives } from '@lynx-js/lynx-ui'
+import { clsx } from 'clsx'
+
+import './styles.css'
+
+export function Button({
+  type,
+  text,
+  subText,
+  onClick,
+  className,
+}: {
+  className?: string
+  type?: 'primary' | 'secondary' | 'tertiary'
+  text?: string
+  subText?: string
+  onClick?: () => void
+}) {
+  return (
+    <ButtonPrimitives
+      onClick={onClick}
+      className={clsx('button', className, type)}
+    >
+      {({ active = false }) => (
+        <view
+          className={clsx('button-inner', { 'button--active': active })}
+        >
+          <text
+            className={clsx('text', { 'text--active': active })}
+          >
+            {text}
+          </text>
+          {subText && (
+            <text
+              className={clsx('sub-text', { 'subText--active': active })}
+            >
+              {subText}
+            </text>
+          )}
+        </view>
+      )}
+    </ButtonPrimitives>
+  )
+}