如何使用NativeScript/CSS在屏幕外定位GridLayout？

如何將GridLayout的起始位置設置爲離屏？當我點擊它時，我會觸發一個可以看到的關鍵幀。這是我正在嘗試，但它不起作用。如何使用NativeScript/CSS在屏幕外定位GridLayout？

這是HTML

<GridLayout columns="*" rows="auto,*" class="test-control" "> 
    <Label class="h12 page-text" text="TEST" row="0 "> 
      </Label> 
    <Label class="h1 page-text " text="TEST" row="1 "> 
      </Label>

這是CSS：

 .test-control { 
    position: relative; 
    vertical-align: bottom; 
    background-color: #0E5240; 
    color: #FF0000; 
    height: auto; 
    bottom: -100%; 
    overflow: hidden; 
    }

我有keyframs和動畫工作。我只需要在屏幕外啓動GridLayout。

來源

2017-02-27 MrTouya

要將視圖置於屏幕外，可以使用translateX和/或translateY屬性。我在很多應用程序中使用它來定製側面菜單，底部表單，表單等。很好用。

來源

2017-03-06 05:44:04

[布拉德，但它似乎離屏佈局不「保持」？]（https://stackoverflow.com/questions/48701445/nativescript-stacklayout-does-not-layout-適當） –

我剛剛寫了一篇文章。檢查一下，看看是否有幫助：https://medium.com/@scottmgerstl/slide-a-view-in-from-off-screen-nativescript-angular-8e305f50217a

這裏是附帶代碼：

snackbar.directive.ts

import { Directive, ElementRef, EventEmitter, Output } from '@angular/core'; 
import { screen, ScreenMetrics } from 'platform'; 
const screenScale: number = screen.mainScreen.scale; 
const offScreenMargin: number = screen.mainScreen.heightDIPs * -1; 
@Directive({ 
    selector: '[snackbar]' 
}) 
export class SnackbarDirective { 
    // Let an implementor know when the view has left the screen 
    @Output() private dismissed: EventEmitter<boolean> = new EventEmitter<boolean>(false); 
    private element: ElementRef; 
    constructor(el: ElementRef) { 
     this.element = el; 
     this.element.nativeElement.marginBottom = offScreenMargin; 
    } 
    public show(): void { 
      this.element.nativeElement.animate({ 
      translate: { x: 0, y: this.getTranslateYHeight() * -1 }, 
      duration: 750 
     }); 
    } 
    public dismiss(): void { 
     this.element.nativeElement.animate({ 
      translate: { x: 0, y: this.getTranslateYHeight() }, 
      duration: 750 
     }) 
     .then(() => this.dismissed.emit(true)); 
    } 
    private getTranslateYHeight(): number { 
     return this.element.nativeElement.getMeasuredHeight()/screenScale; 
    } 
}

implementor.component.html

<GridLayout columns="auto,auto" rows="auto,auto"> 
    <!-- My Component Page Markup --> 
    <Button (tap)="onOpenButtonTap($event)" 
      text="Open" row="0" col="0"></Button> 
    <Button (tap)="onCloseButtonTap($event)" 
      text="Close" row="0" col="1"></Button> 
    <StackLayout snackbar class="slide" col="0" colSpan="2" row="1"> 
    </StackLayout> 
</GridLayout>

implementor.component .ts

import { Component, ViewChild } from '@angular/core'; 
import { SnackbarDirective } from './snackbar.directive'; 
@Component(...) 
export class ImplementorComponent { 
    @ViewChild(SnackbarDirective) private snack: SnackbarDirective; 
    private onOpenButtonTap(): void { 
     this.snack.show(); 
    } 
    private onCloseButtonTap(): void { 
     this.snack.dismiss(); 
    } 
}

這是怎麼回事什麼：使用該指令選擇[小吃吧]您可以附加一個指令（包括部件）的括號符號，以元素

代替嵌套它們的其他視圖內的（在博客中解釋上文提到的）。爲了獲得對指令方法的訪問權限，可以使用角度core @ ViewChild（SnackbarComponent）中的ViewChild裝飾器，通過類型在實現組件中引用它。請注意，如果您想將多個指令添加到相同類型的視圖中，則需要使用@ViewChildren（）裝飾器，然後遍歷以找到所需的。

來源

2017-08-30 00:58:42 scottmgerstl

如何使用NativeScript/CSS在屏幕外定位GridLayout？

回答

相關問題