アプリケーションのシナリオに応じて、RadSideDrawerを画面上の特定の場所に表示するように構成できます。 これにより、遷移時のアニメーションの適用方法も変わります。 場所の設定は、drawerLocationプロパティを SideDrawerLocation列挙型の値に設定することで実行できます。
ドロワーの場所を変更するには、4つの可能な値のいずれかをdrawerLocationプロパティに設定します。 4つの場所オプションはSideDrawerLocation列挙型によって定義されます。 drawerLocationプロパティの設定は、プログラムとXMLの両方で実行できます。
public onTopLocationTap(args) {
this.setDrawerLocation(drawerModule.SideDrawerLocation.Top);
this.openDrawer();
}
private setDrawerLocation(location: drawerModule.SideDrawerLocation) {
let sideDrawer: drawerModule.RadSideDrawer = <drawerModule.RadSideDrawer>(Frame.topmost().getViewById("sideDrawer"));
if (!sideDrawer) {
return;
}
if (sideDrawer.android) {
if (location === drawerModule.SideDrawerLocation.Top || location === drawerModule.SideDrawerLocation.Bottom) {
sideDrawer.android.setDrawerCloseThreshold(20);
} else {
sideDrawer.android.setDrawerCloseThreshold(280);
}
}
sideDrawer.drawerLocation = location;
}<nsDrawer:RadSideDrawer id="sideDrawer" drawerLocation="Left" drawerContentSize="280">
<nsDrawer:RadSideDrawer.drawerContent>
</nsDrawer:RadSideDrawer.drawerContent>
<nsDrawer:RadSideDrawer.mainContent>
<GridLayout rows="auto, *">
<Label text="{{drawerPositionText}}" textWrap="true" class="drawerContentText"/>
<ScrollView row="1">
<StackLayout>
<Button text="Left" tap="{{ onLeftLocationTap }}" class="drawerContentButton"/>
<Button text="Top" tap="{{ onTopLocationTap }}" class="drawerContentButton"/>
<Button text="Right" tap="{{ onRightLocationTap }}" class="drawerContentButton"/>
<Button text="Bottom" tap="{{ onBottomLocationTap }}" class="drawerContentButton"/>
</StackLayout>
</ScrollView>
</GridLayout>
</nsDrawer:RadSideDrawer.mainContent>
</nsDrawer:RadSideDrawer>このシナリオの実際を見たいですか？ GitHubでSDKサンプルリポジトリを確認してください。NativeScript UIを使用した、これと他の多くの実用的な例があります。