----------------------------------------------------------------------------- {-# LANGUAGE OverloadedStrings #-} ----------------------------------------------------------------------------- -- | -- Module : Miso.Lynx.Element.View.Property -- Copyright : (C) 2016-2025 David M. Johnson -- License : BSD3-style (see the file LICENSE) -- Maintainer : David M. Johnson <code@dmj.io> -- Stability : experimental -- Portability : non-portable ---------------------------------------------------------------------------- module Miso.Lynx.Element.View.Property ( -- *** Property id_ , name_ , className_ , flatten_ , exposureId_ , exposureScene_ , exposeUIMarginTop_ , exposeUIMarginBottom_ , exposeUIMarginLeft_ , exposeUIMarginRight_ , exposeScreenMarginTop_ , exposeScreenMarginBottom_ , exposeScreenMarginLeft_ , exposeScreenMarginRight_ , exposureArea_ , enableExposureUIMargin_ , accessibilityElement_ , accessibilityLabel_ , accessibilityTrait_ , accessibilityElements_ , accessibilityElementsA11y_ , accessibilityElementsHidden_ , accessibilityExclusiveFocus_ , a11yId_ , iosPlatformAccessibilityId_ , userInteractionEnabled_ , nativeInteractionEnabled_ , blockNativeEvent_ , blockNativeEventAreas_ , consumeSlideEvent_ , enableTouchPseudoPropagation_ , hitSlop_ , ignoreFocus_ , eventThrough_ , iosEnableSimultaneousTouch_ , lynxTimingFlag_ ) where ----------------------------------------------------------------------------- import Miso.Property import Miso.Types ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#id -- -- Used to specify the name of the element, generally for native to operate the corresponding node from the native side through `findViewByName`. -- -- > id_ "test" -- id_ :: MisoString -> Attribute action id_ :: forall action. MisoString -> Attribute action id_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "id" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#name -- -- Used to specify the name of the element, generally for native to operate the corresponding node from the native side through `findViewByName`. -- -- > name_ "test" -- name_ :: MisoString -> Attribute action name_ :: forall action. MisoString -> Attribute action name_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "name" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#classname -- -- Use `className` to set CSS class names, equivalent to 'class_' -- -- > className_ "foo" -- className_ :: MisoString -> Attribute action className_ :: forall action. MisoString -> Attribute action className_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "className_" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#flatten -- -- *Android* only -- -- Only available on Android platform, used to force specific nodes to create -- corresponding Android Views. -- -- > flatten_ True -- flatten_ :: Bool -> Attribute action flatten_ :: forall action. Bool -> Attribute action flatten_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "flatten" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-id -- -- Specify whether the target node needs to listen to [exposure/anti-exposure](https://lynxjs.org/guide/interaction/visibility-detection/exposure-ability.html#monitor-exposure-of-the-entire-page) events. -- -- > exposureId_ "id-goes-here" -- exposureId_ :: MisoString -> Attribute action exposureId_ :: forall action. MisoString -> Attribute action exposureId_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-id" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-scene -- -- Specify the exposure scene of the target node, and use it together with -- 'exposureId_' to uniquely identify the node that needs to monitor exposure. -- -- > exposureScene_ "example-scene" -- exposureScene_ :: MisoString -> Attribute action exposureScene_ :: forall action. MisoString -> Attribute action exposureScene_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-scene" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-ui-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeUIMarginTop_ "10px" -- -- Default Value: "0px" -- exposeUIMarginTop_ :: MisoString -> Attribute action exposeUIMarginTop_ :: forall action. MisoString -> Attribute action exposeUIMarginTop_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-ui-margin-top" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-ui-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeUIMarginBottom_ "10px" -- -- Default Value: "0px" -- exposeUIMarginBottom_ :: MisoString -> Attribute action exposeUIMarginBottom_ :: forall action. MisoString -> Attribute action exposeUIMarginBottom_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-ui-margin-bottom" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-ui-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeUIMarginLeft_ "10px" -- -- Default Value: "0px" -- exposeUIMarginLeft_ :: MisoString -> Attribute action exposeUIMarginLeft_ :: forall action. MisoString -> Attribute action exposeUIMarginLeft_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-ui-margin-left" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-ui-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeUIMarginRight_ "10px" -- -- Default Value: "0px" -- ----------------------------------------------------------------------------- exposeUIMarginRight_ :: MisoString -> Attribute action exposeUIMarginRight_ :: forall action. MisoString -> Attribute action exposeUIMarginRight_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-screen-margin-right" -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-screen-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeUIMarginTop_ "10px" -- -- Default Value: "0px" -- exposeScreenMarginTop_ :: MisoString -> Attribute action exposeScreenMarginTop_ :: forall action. MisoString -> Attribute action exposeScreenMarginTop_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-screen-margin-top" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-screen-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeScreenMarginBottom_ "10px" -- -- Default Value: "0px" -- exposeScreenMarginBottom_ :: MisoString -> Attribute action exposeScreenMarginBottom_ :: forall action. MisoString -> Attribute action exposeScreenMarginBottom_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-screen-margin-bottom" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-screen-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeScreenMarginLeft_ "10px" -- -- Default Value: "0px" -- exposeScreenMarginLeft_ :: MisoString -> Attribute action exposeScreenMarginLeft_ :: forall action. MisoString -> Attribute action exposeScreenMarginLeft_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-screen-margin-left" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-screen-margin- -- -- Specify the boundary scaling value of the target node itself in the exposure -- detection, which affects the viewport intersection judgment of the target node. -- Each node can have its own boundary scaling value. -- -- > exposeScreenMarginRight_ "10px" -- -- Default Value: "0px" -- exposeScreenMarginRight_ :: MisoString -> Attribute action exposeScreenMarginRight_ :: forall action. MisoString -> Attribute action exposeScreenMarginRight_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-screen-margin-right" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#exposure-area -- -- Specify the viewport intersection ratio of the target node that can trigger -- the exposure event. When it is greater than this ratio, the exposure event -- is triggered. When it is less than this ratio, the reverse exposure event -- is triggered. By default, the exposure event is triggered when the target -- node is exposed. -- -- > exposureArea_ (pct 10) -- -- Default Value: "0%" -- exposureArea_ :: MisoString -> Attribute action exposureArea_ :: forall action. MisoString -> Attribute action exposureArea_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "exposure-area" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#enable-exposure-ui-margin -- -- Specify whether the target node supports the [exposure-ui-margin-*](https://lynxjs.org/api/elements/built-in/view.html#exposure-ui-margin-) properties. -- -- Setting it to true will change the behavior of [exposure-screen-margin-*](https://lynxjs.org/api/elements/built-in/view.html#exposure-screen-margin-) and may cause the lazy loading of the scrollable container to fail. -- -- > enableExposureUIMargin_ True -- -- Default Value: 'False' -- enableExposureUIMargin_ :: Bool -> Attribute action enableExposureUIMargin_ :: forall action. Bool -> Attribute action enableExposureUIMargin_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "enable-exposure-ui-margin" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#accessibility-element -- -- Set whether the node supports accessibility. -- -- > accessibilityElement_ True -- accessibilityElement_ :: Bool -> Attribute action accessibilityElement_ :: forall action. Bool -> Attribute action accessibilityElement_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "accessibility-element" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#accessibility-label -- -- Set the content of the node voice broadcast. -- -- If the \<text\> node does not set this attribute, the \<text\> node defaults to the \<text\> content. -- -- > accessibilityLabel_ "some-label" -- accessibilityLabel_ :: MisoString -> Attribute action accessibilityLabel_ :: forall action. MisoString -> Attribute action accessibilityLabel_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "accessibility-label" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#accessibility-trait -- -- Set the type characteristics of the node. The system will have specific -- supplements to the playback content for different types of nodes. -- -- > accessibilityTrait_ "button" -- -- Default Value: "button" -- accessibilityTrait_ :: MisoString -> Attribute action accessibilityTrait_ :: forall action. MisoString -> Attribute action accessibilityTrait_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "accessibility-trait" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#accessibility-elements -- -- Customize the focus order of child nodes. This property is set on the parent node, -- and the focus order of its child nodes will be focused according to the -- order of the child node `id` specified by the `accessibility-elements` property. -- -- > accessibilityElements_ "view-3,view-2,view-5,view-1,view-4" -- accessibilityElements_ :: MisoString -> Attribute action accessibilityElements_ :: forall action. MisoString -> Attribute action accessibilityElements_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "accessibility-elements" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#accessibility-elements-a11y -- -- The same as @accessibilityElements_@, but the corresponding @id_@ is @a11yId_@. -- -- > accessibilityElementsA11y_ "id" -- accessibilityElementsA11y_ :: MisoString -> Attribute action accessibilityElementsA11y_ :: forall action. MisoString -> Attribute action accessibilityElementsA11y_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "accessibility-elements-a11y" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#accessibility-exclusive-hidden -- -- Marks the current node and all its child nodes as non-accessible nodes. -- -- > accessibilityExclusiveHidden_ True -- -- Default Value: 'True' -- accessibilityElementsHidden_ :: Bool -> Attribute action accessibilityElementsHidden_ :: forall action. Bool -> Attribute action accessibilityElementsHidden_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "accessibilityElementsHidden_" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#accessibility-exclusive-focus -- -- This property can be set for any node. In accessibility mode, sequential navigation will only focus on the child nodes under these nodes. -- -- > accessibilityExclusiveFocus_ True -- -- Default Value: 'True' -- accessibilityExclusiveFocus_ :: Bool -> Attribute action accessibilityExclusiveFocus_ :: forall action. Bool -> Attribute action accessibilityExclusiveFocus_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "accessibility-exclusive-focus" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#a11y-id -- -- Different from `id`, it is used to identify barrier-free nodes separately. -- -- > a11yId_ "test" -- a11yId_ :: MisoString -> Attribute action a11yId_ :: forall action. MisoString -> Attribute action a11yId_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "a11y-id" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#ios-platform-accessibility-id -- -- Used to specify the accessibility identifier of a `UIView` in *iOS*. It is -- only used when the platform-level accessibility framework is accessed. -- -- > iosPlatformAccessibilityId_ "view-3" -- iosPlatformAccessibilityId_ :: MisoString -> Attribute action iosPlatformAccessibilityId_ :: forall action. MisoString -> Attribute action iosPlatformAccessibilityId_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "ios-platform-accessibility-id" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#user-interaction-enabled -- -- Specifies whether the target node and its child nodes can respond to Lynx touch events. -- This property does not affect platform-level gestures (such as scrolling of scroll-view). -- -- > userInteractionEnabled_ False -- -- Default Value: 'True' -- userInteractionEnabled_ :: Bool -> Attribute action userInteractionEnabled_ :: forall action. Bool -> Attribute action userInteractionEnabled_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "user-interaction-enabled" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#native-interaction-enabled -- -- -- Specify whether the target node consumes platform-layer touch events, affects -- platform-layer gestures (such as scrolling of scroll-view), does not affect -- Lynx touch events, and can achieve similar platform-layer gesture -- penetration/interception effects. -- -- > nativeInteractionEnabled_ True -- -- Default Value: 'True' for *iOS*, 'False' for *Android* -- nativeInteractionEnabled_ :: Bool -> Attribute action nativeInteractionEnabled_ :: forall action. Bool -> Attribute action nativeInteractionEnabled_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "native-interaction-enabled" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#block-native-event -- -- Specify whether to block platform layer gestures outside Lynx when the -- target node is on the event response chain, which can achieve an effect -- similar to blocking the platform layer side sliding back. -- -- > blockNativeEvent True -- -- Default Value: 'False' -- blockNativeEvent_ :: Bool -> Attribute action blockNativeEvent_ :: forall action. Bool -> Attribute action blockNativeEvent_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "block-native-event" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#block-native-event-areas -- -- Specify whether to block platform layer gestures outside Lynx when the target node is on the [eventAreas response chain](../../../guide/interaction/eventAreas-handling/eventAreas-propagation.mdx#eventAreas-response-chain), which can achieve an effect similar to blocking the platform layer side sliding back. -- -- > blockNativeEventAreas_ [] -- -- Default Value: [] -- blockNativeEventAreas_ :: [Int] -> Attribute action blockNativeEventAreas_ :: forall action. [Int] -> Attribute action blockNativeEventAreas_ = MisoString -> [Int] -> Attribute action forall a action. ToJSON a => MisoString -> a -> Attribute action prop MisoString "block-native-event-areas" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#consume-slide-event -- -- Specify the target node to slide a specific angle on the -- [event response chain](https://lynxjs.org/api/elements/built-in/view.html#consume-slide-event), -- whether the platform layer gesture responds, does not affect the touch event -- of Lynx, and can realize a front-end scrolling container similar to consuming -- the specified direction of sliding. -- -- > consumeSlideEvent_ [] -- -- Default Value: [] -- consumeSlideEvent_ :: [Double] -> Attribute action consumeSlideEvent_ :: forall action. [Double] -> Attribute action consumeSlideEvent_ = MisoString -> [Double] -> Attribute action forall a action. ToJSON a => MisoString -> a -> Attribute action prop MisoString "consume-slide-event" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#event-through -- -- Specifies whether the touch event of the platform layer is distributed to Lynx -- when the touch is on the target node, which can achieve a similar effect of -- only displaying without interaction. This property supports inheritance. -- -- > eventThrough_ True -- -- Default Value: 'False' -- eventThrough_ :: Bool -> Attribute action eventThrough_ :: forall action. Bool -> Attribute action eventThrough_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "event-through" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#enable-touch-pseudo-propagation -- -- Specify whether the target node supports the :active pseudo-class to continue bubbling -- up on the [event response chain](https://lynxjs.org/guide/interaction/event-handling/event-propagation.html#event-response-chain,platform=ios). -- -- > enableTouchPseudoPropagation_ True -- -- Default Value: 'False' -- enableTouchPseudoPropagation_ :: Bool -> Attribute action enableTouchPseudoPropagation_ :: forall action. Bool -> Attribute action enableTouchPseudoPropagation_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "enable-touch-pseudo-propagation" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#hit-slop -- -- Specify the touch event response hotspot of the target node, without -- affecting the platform layer gesture. -- -- > hitSlop_ "0px" -- -- Default Value: "0px" -- hitSlop_ :: MisoString -> Attribute action hitSlop_ :: forall action. MisoString -> Attribute action hitSlop_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "hit-slop" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#ignore-focus -- -- Specify whether to not grab focus when touching the target node. By default, -- the node grabs focus when clicking on it, which can achieve a similar effect -- of not closing the keyboard when clicking other areas. -- -- In addition, it also supports inheritance, that is, the default value of the -- child node is the ignore-focus value of the parent node, and the child node -- can override this value. -- -- > ignoreFocus_ True -- -- Default Value: 'False -- ignoreFocus_ :: MisoString -> Attribute action ignoreFocus_ :: forall action. MisoString -> Attribute action ignoreFocus_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "ignore-focus" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#ios-enable-simultaneous-touch -- -- *iOS* only -- -- > iosEnableSimultaneousTouch_ True -- -- Default Value: 'False' -- iosEnableSimultaneousTouch_ :: Bool -> Attribute action iosEnableSimultaneousTouch_ :: forall action. Bool -> Attribute action iosEnableSimultaneousTouch_ = MisoString -> Bool -> Attribute action forall action. MisoString -> Bool -> Attribute action boolProp MisoString "ios-enable-simultaneous-touch" ----------------------------------------------------------------------------- -- | https://lynxjs.org/api/elements/built-in/view.html#__lynx_timing_flag -- -- Add this flag to the current element to monitor the performance of the -- lynx pipeline it participates in. When flagged, the lynx engine generates -- a PipelineEntry event once the element completes its final painting phase. -- This event can be observed and analyzed by registering a PerformanceObserver(). -- For more detailed usage, see the Marking Lynx Pipeline. -- -- > lynxTimingFlag_ "test" -- lynxTimingFlag_ :: MisoString -> Attribute action lynxTimingFlag_ :: forall action. MisoString -> Attribute action lynxTimingFlag_ = MisoString -> MisoString -> Attribute action forall action. MisoString -> MisoString -> Attribute action textProp MisoString "__lynx_timing_flag" -----------------------------------------------------------------------------