enhance(mobile): add root page component

This commit is contained in:
charlie
2025-07-10 15:34:17 +08:00
parent e1db8e958d
commit 1828fbbdbc
3 changed files with 66 additions and 53 deletions

View File

@@ -100,6 +100,15 @@
(def parallax-page-topbar-dismiss-trigger (silkhq-wrap "ParallaxPage.TopBarDismissTrigger"))
(def parallax-page-topbar-dismiss-trigger-portal (silkhq-wrap "ParallaxPage.TopBarDismissTriggerPortal"))
(def parallax-page-stack (silkhq-wrap "ParallaxPageStack.Root"))
(def parallax-page-stack-scenery-outlet (silkhq-wrap "ParallaxPageStack.SceneryOutlet"))
;; stack topbar components
(def parallax-page-stack-island (silkhq-wrap "ParallaxPageStack.IslandRoot"))
(def parallax-page-stack-island-content (silkhq-wrap "ParallaxPageStack.IslandContent"))
(def parallax-page-stack-topbar-dismiss-trigger-container (silkhq-wrap "ParallaxPageStack.TopBarDismissTriggerContainer"))
(def parallax-page-stack-topbar-title-outlet (silkhq-wrap "ParallaxPageStack.TopBarTitleOutlet"))
(def parallax-page-stack-topbar-title-container (silkhq-wrap "ParallaxPageStack.TopBarTitleContainer"))
(def card-sheet (silkhq-wrap "CardSheet.Root"))
(def card-sheet-portal (silkhq-wrap "CardSheet.Portal"))
(def card-sheet-handle (silkhq-wrap "CardSheet.Handle"))

View File

@@ -4,7 +4,7 @@ import { BottomSheet } from './BottomSheet'
import { SheetWithDepth, SheetWithDepthStack } from './SheetWithDepth'
import { SheetWithDetent } from './SheetWithDetent'
import { SheetWithStacking, SheetWithStackingStack } from './SheetWithStacking'
import { ParallaxPage } from './ParallaxPage'
import { ParallaxPage, ParallaxPageStack } from './ParallaxPage'
import { Toast } from './Toast'
import { Card } from './Card'
@@ -16,7 +16,8 @@ const silkhq = {
Sheet, Fixed, Scroll, BottomSheet,
SheetWithDepth, SheetWithDepthStack,
SheetWithStacking, SheetWithDetent,
SheetWithStackingStack, ParallaxPage,
SheetWithStackingStack,
ParallaxPage, ParallaxPageStack,
Toast, CardSheet: Card,
}

View File

@@ -47,59 +47,62 @@
[]
(silkhq/depth-sheet-stack {:as-child true}
(silkhq/depth-sheet-scenery-outlets
(silkhq/scroll {:as-child true}
(silkhq/scroll-view
{:safeArea "none"
:pageScroll true
:nativePageScrollReplacement true}
(silkhq/scroll-content {:class "app-silk-index-scroll-content"}
[:div.app-silk-index-container
[:h2.text-xl.font-semibold.pt-4 "Silk sheets demos"]
;; as root page
(silkhq/parallax-page-stack {:as-child true}
(silkhq/parallax-page-stack-scenery-outlet {:as-child true}
(silkhq/scroll {:as-child true}
(silkhq/scroll-view
{:safeArea "none"
:pageScroll true
:nativePageScrollReplacement true}
(silkhq/scroll-content {:class "app-silk-index-scroll-content"}
[:div.app-silk-index-container
[:h2.text-xl.font-semibold.pt-4 "Silk sheets demos"]
;; Bottom Sheet case
(silkhq/bottom-sheet
(silkhq/bottom-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "0. Static Bottom Sheet"))
(silkhq/bottom-sheet-portal
(silkhq/bottom-sheet-view
(silkhq/bottom-sheet-backdrop)
(silkhq/bottom-sheet-content
{:class "flex flex-col items-center p-2"}
(silkhq/bottom-sheet-handle)
[:div.py-60.flex
[:h1.my-4.text-2xl "hello silkhq"]]))))
;; Bottom Sheet case
(silkhq/bottom-sheet
(silkhq/bottom-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "0. Static Bottom Sheet"))
(silkhq/bottom-sheet-portal
(silkhq/bottom-sheet-view
(silkhq/bottom-sheet-backdrop)
(silkhq/bottom-sheet-content
{:class "flex flex-col items-center p-2"}
(silkhq/bottom-sheet-handle)
[:div.py-60.flex
[:h1.my-4.text-2xl "hello silkhq"]]))))
;; Detent Sheet case
(silkhq/detent-sheet
(silkhq/detent-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "1. Detent Bottom Sheet"))
(silkhq/detent-sheet-portal
(silkhq/detent-sheet-view
(silkhq/detent-sheet-backdrop)
(silkhq/detent-sheet-content
{:class "flex flex-col items-center p-2"}
(silkhq/detent-sheet-handle)
[:div.py-60.flex
[:h1.my-4.text-2xl "hello silkhq"]]))))
;; Detent Sheet case
(silkhq/detent-sheet
(silkhq/detent-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "1. Detent Bottom Sheet"))
(silkhq/detent-sheet-portal
(silkhq/detent-sheet-view
(silkhq/detent-sheet-backdrop)
(silkhq/detent-sheet-content
{:class "flex flex-col items-center p-2"}
(silkhq/detent-sheet-handle)
[:div.py-60.flex
[:h1.my-4.text-2xl "hello silkhq"]]))))
;; Depth Sheet case
(silkhq/depth-sheet
(silkhq/depth-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "2. Depth Bottom Sheet"))
(silkhq/depth-sheet-portal
(depth-view-example {:nested? false})))
;; Depth Sheet case
(silkhq/depth-sheet
(silkhq/depth-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "2. Depth Bottom Sheet"))
(silkhq/depth-sheet-portal
(depth-view-example {:nested? false})))
;; Stacking depth sheet case
(silkhq/stacking-sheet-stack
{:as-child true}
(silkhq/stacking-sheet
(silkhq/stacking-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "3. Stacking Bottom Sheet"))
;; Stacking depth sheet case
(silkhq/stacking-sheet-stack
{:as-child true}
(silkhq/stacking-sheet
(silkhq/stacking-sheet-trigger
{:class "w-full"}
(shui/button {:variant :secondary :class "w-full"} "3. Stacking Bottom Sheet"))
(silkhq/stacking-sheet-portal
(stacking-view-example {:nested? false}))))
]))))))
(silkhq/stacking-sheet-portal
(stacking-view-example {:nested? false}))))
]))))))))