一个用于放置在 appn-page[slot=footer] 的元素。
提供了安全区域的渲染限制
提供了与滚动监听相关的一些能力
Properties
| Name | Attribute | Description | Type | Default |
|---|
| translucent | translucent | | AutoBoolean | 'auto' |
Events
| Name | Description | Type |
|---|
| stuckbottom | 当元素的粘性滚动生效时触发 | Event |
Slots
| Name | Description |
|---|
| (default) | 渲染在底部的内容，通常用来放置 appn-bottom-bar 等工具栏、导航栏等组件 |
一个用于放置在 appn-page[slot=header] 的元素。
提供了安全区域的渲染限制
提供了与滚动监听相关的一些能力
Properties
| Name | Attribute | Description | Type | Default |
|---|
| translucent | translucent | | AutoBoolean | 'auto' |
Events
| Name | Description | Type |
|---|
| stucktop | 当元素的粘性滚动生效时触发 | Event |
Slots
| Name | Description |
|---|
| (default) | 渲染在头部的内容，通常用来放置 appn-top-bar 等工具栏、导航栏等组件 |
<appn-icon>
Static Properties
| Name | Description | Type | Default |
|---|
| define | | | appnIconDefine |
| get | | | appnIconGet |
| whenDefine | | | appnIconWhenDefine |
| safeGet | | | appnIconSafeGet |
Attributes
| Name | Description | Type | Default |
|---|
| name | The name of the icon to display. | string | null | null |
| widget | The widget of the icon to display. | AppnIconWidget | |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| name | name | | string | null | null |
| widget | widget | | AppnIconWidget | 'normal' |
<appn-link>
Attributes
| Name | Description | Type | Default |
|---|
| to | The URL to navigate to. | string | null | null |
| state | The state object to pass to the navigation. | object | null | null |
| type | The type of link. Defaults to 'a'. | AppnLinkType | |
| mode | The mode of navigation. Defaults to 'push'. | AppLinkMode | |
| actionType | The event-name of action to take when clicked. Defaults to 'click'. | AppnLinkActionType | |
| to-key | | string | null | null |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| type | type | | AppnLinkType | 'button' |
| to | to | | string | null | null |
| toKey | to-key | | string | null | null |
| state | state | | object | null | null |
| mode | mode | | AppnLinkMode | 'auto' |
| actionType | actiontype | | AppnLinkActionType | 'click' |
Events
| Name | Description | Type |
|---|
| navigate | | AppnNavigateEvent |
<appn-nav-back-text>
Attributes
| Name | Description | Type | Default |
|---|
| sharedName | | string | null | undefined | |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| sharedName | sharedName | | string | null | undefined | |
| sharedController | sharedcontroller | | FixedSharedController | new FixedSharedController(this) |
<appn-nav-text>
Attributes
| Name | Description | Type | Default |
|---|
| sharedName | | string | null | undefined | |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| sharedName | sharedName | | string | null | undefined | |
| sharedController | sharedcontroller | | FixedSharedController | new FixedSharedController(this) |
<appn-navigation-provider>
Static Properties
| Name | Description | Type | Default |
|---|
| nav | | NavigationBase | navApi |
Attributes
| Name | Description | Type | Default |
|---|
| stack | enable stack view mode | boolean | false |
| stack-direction | The direction of the navigation stack. | AppnNavigationStackDirection | |
| base-uri | | string | |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| baseURI | base-uri | | string | |
| currentEntry | currententry | | NavigationHistoryEntry | null | |
| transition | transition | Represents the currently ongoing navigation or null if none. | NavigationTransition | null | |
| canGoBack | cangoback | Indicates if it's possible to navigate backwards. | boolean | |
| canGoForward | cangoforward | Indicates if it's possible to navigate forwards. | boolean | |
| stack | stack | | boolean | false |
| stackDirection | stackdirection | | AppnNavigationStackDirection | null |
| routersElements | routerselements | | HTMLTemplateElement[] | |
Methods
| Name | Parameters | Description | Return |
|---|
| entries | | Returns a snapshot of the joint session history entries. | NavigationHistoryEntry[] |
| findFirstEntry | | Name | Description | Type |
|---|
| pattern | | Pattern.Pattern<NavigationHistoryEntry> | | fromEntry | | NavigationHistoryEntry | null |
| | |
| findLastEntry | | Name | Description | Type |
|---|
| pattern | | Pattern.Pattern<NavigationHistoryEntry> | | fromEntry | | NavigationHistoryEntry | null |
| | |
| updateCurrentEntry | | Name | Description | Type |
|---|
| options | | NavigationUpdateCurrentEntryOptions |
| Updates the state object of the current NavigationHistoryEntry. | void |
| navigate | | Name | Description | Type |
|---|
| url | | string | | options | | NavigationNavigateOptions |
| Navigates to the specified URL. | NavigationResult |
| reload | | Name | Description | Type |
|---|
| options | | NavigationReloadOptions |
| Reloads the current entry. | NavigationResult |
| traverseTo | | Name | Description | Type |
|---|
| key | | string | | options | | NavigationOptions |
| Navigates to a specific history entry identified by its key. | NavigationResult |
| back | | Name | Description | Type |
|---|
| options | | NavigationOptions |
| Navigates back one entry in the joint session history. | NavigationResult |
| forward | | Name | Description | Type |
|---|
| options | | NavigationOptions |
| Navigates forward one entry in the joint session history. | NavigationResult |
| setCamera | | Name | Description | Type |
|---|
| x | | number | | y | | number | | z | | number |
| | |
Events
| Name | Description | Type |
|---|
| navigate | | NavigateEvent |
| navigatesuccess | | Event |
| navigateerror | | ErrorEvent |
| currententrychange | | NavigationCurrentEntryChangeEvent |
<appn-navigation-history-entry>
Attributes
| Name | Description | Type | Default |
|---|
| pathname | | string | |
| search | | string | |
| hash | | string | |
| templateEle | | HTMLTemplateElement | undefined | undefined |
| presentEntryIndex | | number | -1 |
| sharedName | | string | undefined | null | |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| pathname | pathname | | string | |
| search | search | | string | |
| hash | hash | | string | |
| templateEle | templateEle | | HTMLTemplateElement | undefined | undefined |
| navigationType | navigationtype | | NavigationTypeString | null | null |
| presentEntryIndex | presentEntryIndex | | number | -1 |
| navigationEntry | navigationentry | | NavigationHistoryEntry | null | null |
| sharedName | sharedName | | string | undefined | null | |
| sharedController | sharedcontroller | | StaticSharedController | new StaticSharedController(this) |
| sharedIndex | sharedindex | | | |
<appn-page>
Attributes
| Name | Description | Type | Default |
|---|
| open | The name to say "Hello" to. | boolean | true |
| mode | | 'screen' | 'dialog' | 'tooltip' | 'bottomsheet' | 'topsheet' | 'leftslide' | 'rightslide' | 'screen' |
| pathname | | string | '*' |
| search | | string | '*' |
| hash | | string | '*' |
| swapback | | boolean | true |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| open | open | The name to say "Hello" to. | boolean | true |
| mode | mode | | 'screen' | 'dialog' | 'tooltip' | 'bottomsheet' | 'topsheet' | 'leftslide' | 'rightslide' | 'screen' |
| theme | theme | | AppnTheme | |
| pathname | pathname | | string | '*' |
| search | search | | string | '*' |
| hash | hash | | string | '*' |
| swapback | swapback | | boolean | true |
| navigationEntry | navigationentry | | NavigationHistoryEntry | null | null |
Events
| Name | Description | Type |
|---|
| activated | | AppnPageActivatedEvent |
| swapback | | AppnNavigateEvent |
| navigationEntry | | AppnPageActivatedEvent |
A scroll-view element of the style 'overflow: overlay'.
lightweight components that maximize the use of native capabilities.
Core features:
- Mobile: Zero-overhead native scrolling
- Desktop: Native scrollbars (limited styling)
- CSS Scrollbars specification compliant
Attributes
| Name | Description | Type | Default |
|---|
| scrollbar-size | | 'auto' | 'thin' | 'none' | 'auto' |
| scrollbarColor | | string | '' |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| scrollbarSize | scrollbar-size | | 'auto' | 'thin' | 'none' | 'auto' |
| scrollbarColor | scrollbarColor | | string | '' |
| canOverlayScrollbar | canoverlayscrollbar | | boolean | |
Events
| Name | Description | Type |
|---|
| scrollend | | Event |
| scroll | | Event |
| scrollend | 为不支持原生scrollend事件的浏览器提供垫片 | Event |
Slots
| Name | Description |
|---|
| (default) | Scrollable content container |
| (default) | 滚动内容容器 |
CSS Shadow Parts
| Name | Description |
|---|
| scrollbar | Scrollbar track |
| axis-y | Vertical scrollbar track |
| axis-x | Horizontal scrollbar track |
| content | Content container <i18n lang="zh-cn"> 一个样式为 `overflow: overlay` 的滚动元素 非常轻量的组件，最大化地使用了原生的能力. 核心特性： - 移动端：无额外开销的原生滚动 - 桌面端：原生滚动条（样式定制受限） - 符合 CSS 滚动条标准规范 |
| scrollbar | 滚动条轨道 |
| axis-y | 垂直滚动条轨道 |
| axis-x | 水平滚动条轨道 |
| content | 内容容器 </i18n> |
<appn-shared-contents>
Attributes
| Name | Description | Type | Default |
|---|
| sharedName | | string | |
| sharedOldStyle | | string | |
| sharedNewStyle | | string | |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| sharedName | sharedName | | string | |
| sharedOldStyle | sharedOldStyle | | string | |
| sharedNewStyle | sharedNewStyle | | string | |
| sharedController | sharedcontroller | | FixedSharedController | new FixedSharedController(this) |
<appn-theme-provider>
一个用于提供主题的插槽
开发者通过可以在此基础上进行一些定制
Static Properties
| Name | Description | Type | Default |
|---|
| registerTheme | | | registerAppnTheme |
| findTheme | | | findAppnTheme |
| allThemes | | | |
Attributes
| Name | Description | Type | Default |
|---|
| theme | 在通过 registerTheme 接口注册theme后，可以使用 theme 属性来查询对应的 theme
可以同时书写多项：theme="ios dark" | Appn.MaybeThemeClass | 'unstyled' |
| color-scheme | 颜色偏好
会在查询 theme 的时候，自动添加 dark/light 查询条件 | 'dark' | 'light' | 'auto' | 'auto' |
| accessible | 是否启用视觉可访问性的增强，会在查询theme的时候，自动添加 accessible 查询条件 | boolean | false |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| theme | theme | 在通过 registerTheme 接口注册theme后，可以使用 theme 属性来查询对应的 theme
可以同时书写多项：theme="ios dark" | Appn.MaybeThemeClass | 'unstyled' |
| colorScheme | color-scheme | 颜色偏好
会在查询 theme 的时候，自动添加 dark/light 查询条件 | 'dark' | 'light' | 'auto' | 'auto' |
| isDark | isdark | | boolean | |
| accessible | accessible | 是否启用视觉可访问性的增强，会在查询theme的时候，自动添加 accessible 查询条件 | boolean | false |
| themeContext | themecontext | | | |
<appn-top-bar>
顶部工具栏组件，参考了 material3-top-app-bar 的标准。
Events
| Name | Description | Type |
|---|
| count-changed | Indicates when the count changes | Event |
Slots
| Name | Description |
|---|
| (default) | This element has a slot |
CSS Shadow Parts
| Name | Description |
|---|
| button | The button |
<appn-nav-back>
<appn-nav-title>
Attributes
| Name | Description | Type | Default |
|---|
| lines | The number of times the button has been clicked. | number | 1 |
| pageTitle | The name to say "Hello" to. | string | '' |
| sharedName | | string | null | undefined | |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| lines | lines | The number of times the button has been clicked. | number | 1 |
| pageTitle | pageTitle | The name to say "Hello" to. | string | '' |
| sharedName | sharedName | | string | null | undefined | |
| sharedController | sharedcontroller | | FixedSharedController | new FixedSharedController(this) |
<appn-view>
一个用于放置在 appn-page[slot=<default>] 的元素。
提供了安全区域的渲染限制
Events
| Name | Description | Type |
|---|
| stuckbottom | 当元素的粘性滚动生效时触发 | Event |
Slots
| Name | Description |
|---|
| (default) | 渲染在底部的内容，通常用来放置 appn-bottom-bar 等工具栏、导航栏等组件 |
<css-color-mix>
Static Properties
| Name | Description | Type | Default |
|---|
| shadowRootOptions | | object | { ...LitElement.shadowRootOptions, mode: 'closed' as const, } |
| calcColorMix | | | calc_color_mix |
| calcColorMixNative | | | calc_color_mix_native |
| loadCalcColorMixShim | | | loadCalcColorMixShim |
Attributes
| Name | Description | Type | Default |
|---|
| var | | ColorSpace | '--color-mix' |
| in | | string | 'srgb' |
| c1 | | Property.Color | '#000' |
| c2 | | Property.Color | '#000' |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| var | var | | ColorSpace | '--color-mix' |
| in | in | | string | 'srgb' |
| c1 | c1 | | Property.Color | '#000' |
| p1 | p1 | | number | null | null |
| c2 | c2 | | Property.Color | '#000' |
| p2 | p2 | | number | null | null |
<css-starting-style>
Static Properties
| Name | Description | Type | Default |
|---|
| isSupports | | | |
| shadowRootOptions | | object | { ...LitElement.shadowRootOptions, mode: 'closed' as const, } |
Attributes
| Name | Description | Type | Default |
|---|
| selector | | string | '' |
| slotted | | string | null | null |
| host | | boolean | false |
| layer | | string | '' |
| cssText | | string | '' |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| mode | mode | | CssStartingStyleMode | 'auto' |
| selector | selector | | string | '' |
| slotted | slotted | | string | null | null |
| host | host | | boolean | false |
| layer | layer | | string | '' |
| cssText | cssText | | string | '' |
<my-element>
An example element.
Attributes
| Name | Description | Type | Default |
|---|
| name | The name to say "Hello" to. | string | 'World' |
| count | The number of times the button has been clicked. | number | 0 |
Properties
| Name | Attribute | Description | Type | Default |
|---|
| name | name | The name to say "Hello" to. | string | 'World' |
| count | count | The number of times the button has been clicked. | number | 0 |
Methods
| Name | Parameters | Description | Return |
|---|
| sayHello | | Name | Description | Type |
|---|
| name | The name to say "Hello" to | string |
| Formats a greeting | string |
Events
| Name | Description | Type |
|---|
| count-changed | Indicates when the count changes | CustomEvent |
Slots
| Name | Description |
|---|
| (default) | This element has a slot |
CSS Shadow Parts
| Name | Description |
|---|
| button | The button |