@blotch/angular-lynx (英语)
角成像器,用于 林克丝. 写入 Angular 组件,通过 Lynx 引擎向原生iOS,Android和Web渲染.
快速启动
npm create angular-lynx my-app
或者在已有的角工程中添加:
ng add @blotch/angular-lynx
然后像任何Angular应用程序一样工作: ng serve, (中文(简体) ), ng build, (中文(简体) ), ng test,以及 ng generate component,它使组件与 Lynx 元素. ng update @blotch/angular-lynx 一起更新每个 AngularLynx 软件包.
特征
- 有信号的独立部件,
@if编号 :@for编号 :@switch编和管 - 为浏览器编写的模板: 常见的 HTML 标记渲染为它们所代表的 Lynx 元素(
<div>作为<view>, (中文(简体) ),<p>作为<text>, (中文(简体) ),<img>作为<image>),DOM事件 Lynx也发送,例如:(click)财务报告和审定财务报表(input)运行 - 无区变化探测——信号为主反应模型
- 全角路由器,为 Lynx 提供模拟导航,包括
routerLink财务报告和审定财务报表routerLinkActive关于任何元素 - 手势——自来水、锅、长压、放出、捏出、有成分的旋转
document:, (中文(简体) ),window:财务报告和审定财务报表body:听众在屏幕上听到触摸(指向、触摸和触摸)click和窗口resize,与window.innerWidth财务报告和审定财务报表innerHeight屏幕大小- 动画——CSS的过渡、关键框架和方案
animate()API 密码 - 内容投射、门户、,
@defer和懒惰的路线 IntersectionObserver关于Lynx元素,来自Lynx的曝光事件,用于为浏览器写入代码<canvas>3D的WebGL2: 三.j和角-三,带有指针事件,ResizeObserver和图像加载, 在应用程序中ng build --platform ios|android和网络预览- Tailwind CSS 4, 建筑为 Lynx 重写其 CSS( 或 Tailwind CSS 3, 使用
@lynx-js/tailwind-preset(中文(简体) )
文档
完整文档和指南 (原始内容存档于2017-10-21). angulallynx.js.org。 。 。 .
路线
provideRouter() 从 @blotch/angular-lynx 设置有内幕历史的Angular路由器. 其他一切来自 @angular/router就像网络上一样, routerLink 财务报告和审定财务报表 routerLinkActive 包括:
import { Component } from '@angular/core';
import { RouterLink, RouterLinkActive, RouterOutlet } from '@angular/router';
import { LYNX_ELEMENTS } from '@blotch/angular-lynx';
@Component({
selector: 'app-root',
imports: [LYNX_ELEMENTS, RouterOutlet, RouterLink, RouterLinkActive],
template: `
<view routerLink="/settings" routerLinkActive="active">
<text>Settings</text>
</view>
<router-outlet />
`,
})
export class App {}
- 对元件的自拍导航: 渲染器发送 Lynx 的
tap改为click听众,就像Lynx的Web所做的RouterLink监听click。 。 。 . - 当连接的路线是活跃的,
routerLinkActive增加其类和LYNX_ELEMENTS添加selected对元素的accessibility-traits,保持自己的(LynxRouterLinkActive) (中文(简体) ). 在组件的主机上, 列表LynxRouterLinkActive内hostDirectives旁边RouterLinkActive。 。 。 . - 事件处理器可以直接导航,使用
Router.navigate()或者说Location.back()。 。 。 .
动画 API
有三种动画方法可供使用,均在Lynx引擎上本土运行.
CSS 过渡
应用 transition 在您的样式表。 Lynx 内插属性自动改变 .
.box {
background-color: #6200ee;
transition: background-color 0.5s ease-in-out;
}
.box-active {
background-color: #03dac6;
}
<view class="box" [class.box-active]="isActive()" (bindtap)="toggle()">
<text>Tap me</text>
</view>
CSS 关键框架动画
定义 @keyframes 在样式表中,并通过类切换应用.
@keyframes rotate {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
.spinning {
animation: rotate 2s linear infinite;
}
<view class="box" [class.spinning]="spin()">
<text>Rotating</text>
</view>
JavaScript 动画 API
使用 element.animate() 用于方案控制的本土要素参考。 给林克斯打电话 __ElementAnimate 车盖下的PAPI.
import { Component, viewChild, type ElementRef } from '@angular/core';
import { type LynxAnimation } from '@blotch/angular-lynx';
@Component({
selector: 'app-example',
template: `
<view #box class="box" (bindtap)="runAnimation()">
<text>Tap to animate</text>
</view>
`,
})
export class ExampleComponent {
boxRef = viewChild<ElementRef>('box');
#animation: LynxAnimation | null = null;
runAnimation(): void {
const el = this.boxRef();
if (!el) return;
// Cancel previous animation before starting a new one.
this.#animation?.cancel();
this.#animation = el.nativeElement.animate(
[
{ transform: 'scale(1)', opacity: 1 },
{ transform: 'scale(1.3)', opacity: 0.7 },
{ transform: 'scale(1)', opacity: 1 },
],
{
duration: 600,
easing: 'ease-in-out',
},
);
}
}
animate() API 密码
element.nativeElement.animate(
keyframes: Record<string, string | number>[],
options?: number | LynxAnimationOptions,
): LynxAnimation
参数:
| 参数 | 类型 | 说明 |
|---|---|---|
keyframes | Record<string, string | number>[] | 密钥框架对象阵列 。 每个对象将 CSS 属性名称映射到值 . |
options | number | LynxAnimationOptions | 持续时间为ms(短手)或完整选项对象. |
LynxAnimationOptions数字 :
| 选项 | 类型 | 说明 |
|---|---|---|
duration | number | string | 动画持续时间以毫秒计. |
delay | number | string | 动画开始前的延迟 . |
iterations 编号 : iterationCount | number | string | 重复次数。 使用 Infinity 为无限. |
easing 编号 : timingFunction | string | 简化函数( E)linear, (中文(简体) ), ease-in, (中文(简体) ), ease-out, (中文(简体) ), ease-in-out, (中文(简体) ), cubic-bezier(...)) (中文(简体) ). |
fill 编号 : fillMode | string | 动画之后风格如何持续( Namenone, (中文(简体) ), forwards, (中文(简体) ), backwards, (中文(简体) ), both) (中文(简体) ). |
direction | string | 播放方向( N)normal, (中文(简体) ), reverse, (中文(简体) ), alternate, (中文(简体) ), alternate-reverse) (中文(简体) ). |
name | string | 可选动画名称( 如果省略则自动生成) . |
回返情况: LynxAnimation 使用控制方法:
| 方法 | 说明 |
|---|---|
play() | 恢复暂停的动画. |
pause() | 暂停动画. |
cancel() | 取消并清理动画. |
动画事件
Lynx在元素上放出标准动画事件. 使用绑定前缀事件名在模板中聆听 :
<view
class="animated-box"
(bindanimationend)="onAnimationEnd($event)"
(bindtransitionend)="onTransitionEnd($event)"
>
<text>Animated</text>
</view>
可用事件 : animationstart, (中文(简体) ), animationend, (中文(简体) ), animationcancel, (中文(简体) ), animationiteration, (中文(简体) ), transitionstart, (中文(简体) ), transitionend, (中文(简体) ), transitioncancel。 。 。 .
重要说明
- 这个
animate()API为 仅主线。在背景线条上调用它会丢出一个错误. - 打电话
animate()直接从事件处理器;不需要setTimeout。 。 。 .