miso-lynx
Copyright(C) 2016-2025 David M. Johnson
LicenseBSD3-style (see the file LICENSE)
MaintainerDavid M. Johnson <code@dmj.io>
Stabilityexperimental
Portabilitynon-portable
Safe HaskellNone
LanguageHaskell2010

Miso.Lynx.Element.View.Property

Contents

Description

 
Synopsis

Property

id_ :: MisoString -> Attribute action Source #

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"

name_ :: MisoString -> Attribute action Source #

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"

className_ :: MisoString -> Attribute action Source #

https://lynxjs.org/api/elements/built-in/view.html#classname

Use className to set CSS class names, equivalent to class_

className_ "foo"

flatten_ :: Bool -> Attribute action Source #

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

exposureId_ :: MisoString -> Attribute action Source #

https://lynxjs.org/api/elements/built-in/view.html#exposure-id

Specify whether the target node needs to listen to exposure/anti-exposure events.

exposureId_ "id-goes-here"

exposureScene_ :: MisoString -> Attribute action Source #

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"

exposeUIMarginTop_ :: MisoString -> Attribute action Source #

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"

exposeUIMarginBottom_ :: MisoString -> Attribute action Source #

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"

exposeUIMarginLeft_ :: MisoString -> Attribute action Source #

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"

exposeUIMarginRight_ :: MisoString -> Attribute action Source #

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"

exposeScreenMarginTop_ :: MisoString -> Attribute action Source #

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"

exposeScreenMarginBottom_ :: MisoString -> Attribute action Source #

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"

exposeScreenMarginLeft_ :: MisoString -> Attribute action Source #

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"

exposeScreenMarginRight_ :: MisoString -> Attribute action Source #

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"

exposureArea_ :: MisoString -> Attribute action Source #

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%"

enableExposureUIMargin_ :: Bool -> Attribute action Source #

https://lynxjs.org/api/elements/built-in/view.html#enable-exposure-ui-margin

Specify whether the target node supports the exposure-ui-margin-* properties.

Setting it to true will change the behavior of exposure-screen-margin-* and may cause the lazy loading of the scrollable container to fail.

enableExposureUIMargin_ True

Default Value: False

accessibilityElement_ :: Bool -> Attribute action Source #

https://lynxjs.org/api/elements/built-in/view.html#accessibility-element

Set whether the node supports accessibility.

accessibilityElement_ True

accessibilityLabel_ :: MisoString -> Attribute action Source #

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"

accessibilityTrait_ :: MisoString -> Attribute action Source #

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"

accessibilityElements_ :: MisoString -> Attribute action Source #

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"

accessibilityElementsA11y_ :: MisoString -> Attribute action Source #

https://lynxjs.org/api/elements/built-in/view.html#accessibility-elements-a11y

The same as accessibilityElements_, but the corresponding id_ is a11yId_.

accessibilityElementsA11y_ "id"

accessibilityElementsHidden_ :: Bool -> Attribute action Source #

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

accessibilityExclusiveFocus_ :: Bool -> Attribute action Source #

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

a11yId_ :: MisoString -> Attribute action Source #

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"

iosPlatformAccessibilityId_ :: MisoString -> Attribute action Source #

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"

userInteractionEnabled_ :: Bool -> Attribute action Source #

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

nativeInteractionEnabled_ :: Bool -> Attribute action Source #

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*

blockNativeEvent_ :: Bool -> Attribute action Source #

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

blockNativeEventAreas_ :: [Int] -> Attribute action Source #

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, which can achieve an effect similar to blocking the platform layer side sliding back.

blockNativeEventAreas_ []

Default Value: []

consumeSlideEvent_ :: [Double] -> Attribute action Source #

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, 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: []

enableTouchPseudoPropagation_ :: Bool -> Attribute action Source #

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.

enableTouchPseudoPropagation_ True

Default Value: False

hitSlop_ :: MisoString -> Attribute action Source #

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"

ignoreFocus_ :: MisoString -> Attribute action Source #

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

eventThrough_ :: Bool -> Attribute action Source #

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

lynxTimingFlag_ :: MisoString -> Attribute action Source #

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"