tym-modals
は,angular
の簡易なダイアログやコンテキストメニュー表示用のラッパーです。
動作イメージ (Demo screen)
[https://shinichi-tym.github.io/tym-ng-ws-demo/index.html#tym-modals]
次のコマンド実行します。
npm install tym-modals
- 簡易メッセージダイアログ
- 簡易コンテキストメニュー
- ネストダイアログ/コンテキストメニュー
- please wait...
- 機能を利用できるようにします。
:
import { TymModalModule } from "tym-modals";
:
@NgModule({
declarations: [ .. ],
imports: [ TymModalModule ],
:
- 使い方:
:
<ngx-tym-modals></ngx-tym-modals>
:
※ 画面のどこかに1つ定義します。
:
import { TymModalService } from "tym-modals";
:
constructor(private modal: TymModalService) { }
:
// コンポーネント(<Component>)を表示します。
let component_ref = this.modal.open(<Component>, provider);
// 生成したコンポーネントにアクセスできます。
let component = (component_ref.instance as <Component>);
// コンポーネントを非表示(破棄)にします。
// ※ close() は 最後に open() されたコンポーネントを閉じます。
this.modal.close(); または component_ref.destroy();
:
(または)
:
// コンポーネント(<Component>)を表示します。(promise inteface)
let component_ref = await this.modal.open(
<Component>,
provider,
true, // true:モーダル, false:モーダレス
(component_ref) => {
// 生成したコンポーネントにアクセスできます。
let component = (component_ref.instance as <Component>);
});
:
(または)
:
// コンポーネント(<Component>)を表示します。(promise inteface)
let promise = this.modal.open(..【省略】.., ()=>{});
promise.then(
(component_ref) => {
// 生成したコンポーネントにアクセスできます。
let component = (component_ref.instance as <Component>);
}
)
:
簡易なメッセージダイアログを表示します。
- 使い方1:
// 必要なコンポーネントを定義します。
import { TymDialogComponent } from "tym-modals";
:
constructor(private modal: TymModalService) {
// ボタンのIDと名称を定義します。
// ※ 必ずしも constructor で定義する必要はありません。
TymDialogComponent.BUTTONS = [
['ok', 'OK'], ['cancel', 'キャンセル']
];
}
:
open() {
// ボタンのIDとアクション関数を定義します。
const buttons = {
'ok': (compo: TymDialogComponent) => {
const compoRef = this.modal.getComponentRef(compo);
:
compoRef.destory();
// this.modal.close();
},
'cancel': (compo: TymDialogComponent) => {
const compoRef = this.modal.getComponentRef(compo);
:
compoRef.destory();
// this.modal.close();
}
}
// 表示内容をプロバイダーとして定義します。
const provider = TymDialogComponent.provider(
'メッセージのタイトル',
['メッセージ1', 'メッセージ2'],
buttons
);
// 簡易メッセージダイアログを表示します。
this.modal.open(TymDialogComponent, provider);
}
:
- 表示イメージ
- 使い方2:
// 必要なコンポーネントを定義します。
import { TymDialogComponent } from "tym-modals";
import { SafeHtml, DomSanitizer } from "@angular/platform-browser";
:
constructor(
private modal: TymModalService,
private sanitizer: DomSanitizer) { }
trustHtmls(vals: any[]): SafeHtml[] {
let safeHtml: SafeHtml[] = [];
vals.forEach((v) => safeHtml.push(
this.sanitizer.bypassSecurityTrustHtml(v)));
return safeHtml;
}
:
open() {
const safeHtml: SafeHtml[] = this.trustHtmls(
['<b>太字</b>', '<span style="color:red">赤字</span>']);
const provider = TymDialogComponent.provider(
'', // タイトルなし
safeHtml as string[]
// ボタンなし
);
// モーダレスで表示します。(true:モーダル, false:モーダレス)
let component_ref = this.modal.open(
TymDialogComponent, provider, false);
let component = (component_ref.instance as <TymDialogComponent>);
// component.vals.title = 'title'; // タイトルを変更できます。
// component.vals.messages = ['msg1', 'msg2']; // メッセージを変更できます。
}
:
- 表示イメージ2
- 使い方3:
ngx-tym-dialog footer button[name='cancel'] {
background-color: #f00 !important;
&:hover { background-color: #f60 !important; }
&:active { background-color: #f40 !important; }
}
ngx-tym-dialog footer button[name='ok'] {
background-color: #00f !important;
&:hover { background-color: #06f !important; }
&:active { background-color: #04f !important; }
}
※ スタイルシートはグローバルに設定します。
- 表示イメージ3
- 使い方4:
async open() {
:
let componentRef = await this.modal.open(
TymDialogComponent, provider, false, ()=>{});
let component = componentRef.instance as TymDialogComponent;
if (component.actionId == 'ok') { }
if (component.actionId == 'cancel' || component.actionId == '') { }
~ or ~
this.modal.open(TymDialogComponent, provider, false,
(componentRef) => {
const component = componentRef.instance as TymDialogComponent;
// タイトルを変更できます。
// component.vals.title = 'title';
// メッセージを変更できます。
// component.vals.messages = ['msg1', 'msg2'];
})
.then(
(componentRef) => {
let component = componentRef.instance as TymDialogComponent;
if (component.actionId == 'ok') { }
if (component.actionId == 'cancel' || component.actionId == '') { }
}
)
簡易コンテキストメニューを表示します。
- 使い方1:
// 必要なコンポーネントを定義します。
import { TymMenuComponent } from "tym-modals";
:
constructor(private modal: TymModalService) {
// 全てのメニュー項目を事前に定義しておきます。
// * {<group-id>: {
// * '': <group-name>,
// * <id>: <name>,
// * ...}...}
// ※ 必ずしも constructor で定義する必要はありません。
TymMenuComponent.MENU_DEFS = {
'file': {
'': 'ファイル',
'copy': 'コピー',
'remove': '削除',
:
},
'folder': {
'': 'フォルダー',
'copy': 'コピー',
'remove': '削除',
:
}, ...
};
}
:
open(event: MouseEvent) {
:
// 表示するメニュー項目を定義します。
// * [[[<group-id>, {false:show separator, true:show sub menu}],
// * [<id>, {false:disable, true:enable}], ...], ...]
const menu: MenuItems = [
[['file', true],
['copy', true], ['remove', false]],
[['folder', false],
['copy', true], ['remove', false]],
];
// アイテム選択時の関数を定義します。
const item_action = (gid: string, id: string) => {
:
}
// 表示内容をプロバイダーとして定義します。
const provider = TymMenuComponent.provider(
menu,
item_action,
event.clientX, event.clientY // 表示位置を指定します。
);
this.modal.open(TymMenuComponent, provider, false);
:
return false;
}
:
- 表示イメージ
- 使い方2:
:
this.modal.open(TymMenuComponent, provider, false, ()=>{})
.then(
(componentRef)=>{
const component = componentRef.instance as TymMenuComponent;
console.log(component.groupId, component.itemId);
}
);
:
- 使い方3: メニュー項目にアイコンを表示
// アイコン用のクラス名を指定します。
// 全てのメニュー項目を事前に定義しておきます。
// * {<group-id>: {
// * '': [<group-name>, <icon-class-name's>],
// * <id>: [<name>, <icon-class-name's>],
// * ...}...}
TymMenuComponent.MENU_DEFS = {
'file': {
// Font Awesome 5 Free利用の場合の例
'': ['ファイル', 'far fa-file'],
:
},
'folder': {
:
// 不要な場合は省略可
'edit': '編集',
// 独自画像などを指定する場合の例
'remove': ['削除', 'menu remove']
}, ...
};
// 独自画像用のcssの例
.menu::before {
--sz: 16px;
display: inline-block;
width: var(--sz);
height: var(--sz);
background-image: url(~/tym-menu-icon.png);
background-size: calc(var(--sz) * 8) var(--sz);
position: relative;
top: 2px;
font: var(--sz) monospace;
content: ' ';
white-space: pre-wrap;
}
.copy::before {
background-position-x: calc(var(--sz) * -0);
}
.paste::before {
background-position-x: calc(var(--sz) * -1);
}
.move::before {
background-position-x: calc(var(--sz) * -2);
}
.remove::before {
background-position-x: calc(var(--sz) * -3);
}
iconイメージ ([16px] x [16px * n])
- 表示イメージ
- 使い方4: メニュー項目にアイコングループを表示
// 表示するアイコングループを指定します。
// * [[<group-id>, <id>], ...]
const icons: IconItems = [
['file', 'copy'], ['file','remove']
];
:
// 表示内容をプロバイダーとして定義します。
const provider = TymMenuComponent.provider(
menu,
item_action,
event.clientX, event.clientY,
icons // アイコングループを指定します。
);
this.modal.open(TymMenuComponent, provider, false);
- 表示イメージ
- 使い方5: メニュー項目のサイズを変更する
ngx-tym-menu {
// アイコンサイズを20pxで表示する
--bs-sz: 20px !important;
// フォントファミリーを変更する場合に指定する
font-family: "Meiryo UI", "MS PGothic", sans-serif !important;
}
// 独自画像用のcssの例
.menu::before {
// アイコンサイズを20pxで表示する
--sz: 20px;
:
※ スタイルシートはグローバルに設定します。
または
this.modal.open(TymDialogComponent, provider, false,
(componentRef) => {
const element = componentRef.location.nativeElement as HTMLElement;
element.style.setProperty('--bs-sz', '20px');
});
- 表示イメージ
ダイアログ/コンテキストメニューを連続して表示できます。
- 使い方:
:
// 表示内容をプロバイダーとして定義します。
const provider1 = TymDialogComponent.provider(
'メッセージのタイトル .. 長い長い長い長い',
['メッセージ1', 'メッセージ2', 'メッセージ3', 'メッセージ4'],
ok_button, cancel_button
);
this.modal.open(TymDialogComponent, provider1);
// 表示内容をプロバイダーとして定義します。
const provider2 = TymDialogComponent.provider(
'メッセージのタイトル',
['メッセージ1', 'メッセージ2'],
ok_button, cancel_button
);
// 簡易メッセージダイアログを表示します。
this.modal.open(TymDialogComponent, provider2);
:
- 表示イメージ
* supports angular 16, 17 and 18.
The components in tym-ng-ws are released under the MIT license. Read license.
Copyrights belong to shinichi tayama (shinichi.tym).