はじめに
NativeScript(NativeScript-Vue) で履歴をクリアしつつページ遷移する方法。
TL;DR
clearHistory: trueを設定するthis.$navigateTo(Page, { clearHistory: true });
- Manual Routing - NativeScript-Vue には記載がないため、本家 NatvieScript のドキュメントもあわせて見るように意識すると良い
はじめに
Vue.js で矢印キーや Enter キーによるキーボード操作が可能なコンテキストメニュー(右クリックメニュー)を表示する方法。
調査/検証 したところ rawilk/vue-context を使うのが一番楽だったので、基本的には vue-context の使い方についてのまとめ。
TL;DR
- rawilk/vue-context だとキーボード操作にデフォルトで対応
- ネストは
li.v-context__subとul.v-contextを使う←,→キーによる階層の移動が可能
- スタイルは
.v-context li,.v-context li a:hover,.v-context li a:focusあたりで変更
はじめに
Vue.js で入力フォーム フォーカス中に Enter キーで Submit させる方法について整理した。
ほぼ参考サイトの通り。
TL;DR
- 単純に
@keyup.enterを使うと、日本語変換での確定 Enter も対象になる @keypress.enterだと、日本語変換での確定 Enter は発火しない- 組み合わせてフラグ管理することで実現
はじめに
Vue.js でキーボード操作で要素間を移動させる方法について整理した。
イメージとしてはツリービューみたいなやつとかを、↑ ↓ → ← キーで移動するような感じ。
TL;DR
tabindexを移動させたい要素に設定@keyup.up.exact,@keyup.down.exactでイベントハンドラを設定- ハンドラ内で次要素の
tabindexを算出してfocus
はじめに
特殊な要件だが、Tippy Instance を生成せずに隠す方法を調べた。
TL;DR
- Tippy with Click Trigger, … Issue #437
- 対象ツールチップは
_tippyにインスタンスを保持しているのでそれを利用 - ツールチップを非表示にしたいタイミングで、
hide()を実行
はじめに
NativeScript(NativeScript-Vue) で ボトムタブバーによるナビゲーションを行う方法。
TL;DR
- ボトムタブバーによるナビゲーションを行う方法を整理
TabViewで実装する- もしくは
BottomNavigationで実装可能
はじめに
NativeScript でアクションバーのカスタマイズについて整理した
TL;DR
NavigationButtonで Android 向けに戻るボタンを配置可能ActionItemでシェアボタンや削除ボタンを追加可能visibilityで戻るボタンやシェアボタンの表示制御が可能
はじめに
NativeScript で アプリ内のファイル、フォトライブラリの 画像/動画、カメラで撮影した画像/動画 をアップロード(multipart/form-data)する方法。
TL;DR
- axios + form-data でのアップロードは不可
- ファイルアップロード無しの単純な API Request なら axios でも可能
- nativescript-background-http でアップロード
- iOS で フォトライブラリやカメラを使う場合、一度アプリ内にファイルを保存する必要がある
はじめに
NativeScript で フォトライブラリの 画像や動画 を 参照/選択 する方法。
TL;DR
- プラグイン: NativeScript/nativescript-imagepicker
create()で ImagePicker を生成authorize()で権限要求、present()で選択画面表示、コールバックで選択画像の処理
はじめに
NativeScript で カメラを使って写真を撮影する方法。
TL;DR
- プラグイン: NativeScript/nativescript-camera
requestPermissions()で カメラ/フォトライブラリ の利用権限要求takePicture()で カメラ起動〜撮影
