Skip to content

[JA] Mask Input, Tooltip - updates #1728

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 20, 2025
Merged

[JA] Mask Input, Tooltip - updates #1728

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
616c8f0
Updating JA for #1710, #1724 and #1726
randriova Oct 7, 2025
fd0e986
Merge branch 'vnext' into localization-2025-10-07
randriova Oct 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
42 changes: 37 additions & 5 deletions doc/jp/components/inputs/mask-input.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,9 +22,9 @@ _language: ja
```cmd
npm install {PackageWebComponents}
```
<!-- end: WebComponents -->

`MaskInput` を使用する前に、次のように登録する必要があります:
<!-- end: WebComponents -->

```ts
import { defineComponents, IgcMaskInputComponent } from 'igniteui-webcomponents';
Expand Down Expand Up @@ -56,6 +56,23 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
</IgrMaskInput>
```

<!-- Blazor -->
`MaskInput` を使用する前に、次のように登録する必要があります:

```razor
// in Program.cs file

builder.Services.AddIgniteUIBlazor(typeof(IgbMaskInputModule));
```

また、`MaskInput` コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります:

```razor
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
```

<!-- end: Blazor -->

{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。

### マスクのルール
Expand All @@ -78,7 +95,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';

### マスクの適用

マスクの適用は非常に簡単です。必要なことは、入力の `mask` プロパティに事前に決定されたパターンを提供することだけです。
マスクの適用は非常に簡単です。必要なことは、入力の `Mask` プロパティに事前に決定されたパターンを提供することだけです。

以下の例では、内線番号付きの電話番号にマスクを適用します。

Expand All @@ -98,6 +115,13 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
</IgrMaskInput>
```

```razor
<IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999">
<IgbIcon IconName="phone" Collection="material" slot="prefix"></IgbIcon>
<span slot="helper-text">Phone number</span>
</IgbMaskInput>
```

その後、ブラウザーに次のように表示されます:

`sample="/inputs/mask-input/applying-mask", height="150", alt="{Platform} マスク入力マスクの適用の例"`
Expand All @@ -106,7 +130,7 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';

### プロンプト文字

開発者は、マスクの塗りつぶされていない部分に使用されるプロンプト シンボルをカスタマイズできます。これを行うには、`prompt` プロパティに任意の文字を指定するだけです:
開発者は、マスクの塗りつぶされていない部分に使用されるプロンプト シンボルをカスタマイズできます。これを行うには、`Prompt` プロパティに任意の文字を指定するだけです:

```html
<igc-mask-input id="mask-input" mask="(####) 00-00-00 Ext. 9999" prompt="-"></igc-mask-input>
Expand All @@ -116,11 +140,15 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
<IgrMaskInput mask="(####) 00-00-00 Ext. 9999" prompt="-"></IgrMaskInput>
```

```razor
<IgbMaskInput @ref="MaskInputRef" Mask="(####) 00-00-00 Ext. 9999" Prompt="-"></IgbMaskInput>
```

デフォルトでは、`prompt` 文字はアンダースコアです。

### プレースホルダー

開発者は、ネイティブ入力プレースホルダー属性の目的を果たす `placeholder` プロパティを利用することもできます。プレースホルダーに値が指定されていない場合は、マスクの値がそのまま使用されます。
開発者は、ネイティブ入力プレースホルダー属性の目的を果たす `Placeholder` プロパティを利用することもできます。プレースホルダーに値が指定されていない場合は、マスクの値がそのまま使用されます。

```html
<igc-mask-input id="mask-input" mask="00/00/0000" placeholder="dd/MM/yyyy"></igc-mask-input>
Expand All @@ -130,9 +158,13 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
<IgrMaskInput mask="00/00/0000" placeholder="dd/MM/yyyy"></IgrMaskInput>
```

```razor
<IgbMaskInput @ref="MaskInputRef" Mask="00/00/0000" Placeholder="dd/MM/yyyy"></IgbMaskInput>
```

### 値モード

IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために `raw` および `withFormatting` オプションを選択できる `valueMode` プロパティを公開します。デフォルトでは、`valueMode` は *raw* に設定されています。以下の例をご覧ください:
IgcMaskInput は、特定のマスクが適用されたときにフォームにバインドする入力値 (書式設定付きまたは生) を構成するために `raw` および `withFormatting` オプションを選択できる `ValueMode` プロパティを公開します。デフォルトでは、`ValueMode` は *raw* に設定されています。以下の例をご覧ください:

`sample="/inputs/mask-input/value-modes", height="150", alt="{Platform} マスク入力値モードの例"`

Expand Down
88 changes: 73 additions & 15 deletions doc/jp/components/inputs/tooltip.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,11 +52,27 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';

<!-- end: React -->

<!-- React, WebComponents -->
<!-- Blazor -->

これで、{Platform} `Tooltip` の基本構成から始めることができます。
`Tooltip` を使用する前に、次のように登録する必要があります:

```razor
// in Program.cs file
builder.Services.AddIgniteUIBlazor(typeof(IgbTooltipModule));
```

また、`Tooltip` コンポーネントにスタイルを適用するために、追加の CSS ファイルをリンクする必要があります。以下は、**Blazor WebAssembly** プロジェクトの **wwwroot/index.html** ファイルまたは **Blazor Server** プロジェクトの **Pages/_Host.cshtml** ファイルに配置する必要があります:

```razor
<link href="_content/IgniteUI.Blazor/themes/light/bootstrap.css" rel="stylesheet" />
```

<!-- end: React, WebComponents -->
<!-- end: Blazor -->

{ProductName} の完全な概要については、[「作業の開始」](../general-getting-started.md)トピックを参照してください。

これで、{Platform} `Tooltip` の基本構成から始めることができます。

```html
<igc-tooltip anchor="hover-button">
Expand All @@ -74,13 +90,19 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
<IgrButton id="hover-button">Hover me</IgrButton>
```

{ProductName} の完全な概要については、[作業の開始](../general-getting-started.md)トピックを参照してください。
```razor
<IgbTooltip Anchor="hover-button">
Congrats you have hovered the button!
</IgbTooltip>
<IgbButton id="hover-button">Hover me</IgbButton>
```

## 使用方法

### ツールチップ ターゲット

目的の要素にツールチップを添付するには、<!-- WebComponents -->**&lt;igc-tooltip&gt;**<!-- end: WebComponents --><!-- React -->**&lt;IgrTooltip&gt;**<!-- end: React --> 要素の `Anchor` プロパティを使用します。このプロパティは、要素 ID または要素への直接参照のいずれかを受け入れます。ID 参照を使用する場合は、`Anchor` プロパティをターゲット要素の ID に設定するだけです。
目的の要素にツールチップを添付するには、`Tooltip` の `Anchor` プロパティを使用し、それをターゲット要素の ID に設定します。

```html
<igc-button id="target-button">Hover me</igc-button>
Expand All @@ -96,7 +118,16 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
</IgrTooltip>
```

要素インスタンスを直接渡すことでターゲットを指定することもできます。
```razor
<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button">
Congrats you have hovered the button!
</IgbTooltip>
```

<!-- WebComponents, React -->
要素インスタンスを直接渡すことでターゲットを指定することもできます。
<!-- end: WebComponents, React -->

```html
<igc-tooltip id="tooltip">
Expand Down Expand Up @@ -128,7 +159,7 @@ tooltip.anchor = anchor;

### ツールチップのコンテンツ

ツールチップのコンテンツは、<!-- WebComponents -->**&lt;igc-tooltip&gt;**<!-- end: WebComponents --><!-- React -->**&lt;IgrTooltip&gt;**<!-- end: React --> 要素の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。
ツールチップのコンテンツは、`Tooltip` の開始タグと終了タグの間にカスタム コンテンツを配置することによって定義されます。

```html
<igc-tooltip>
Expand All @@ -142,7 +173,15 @@ tooltip.anchor = anchor;
</IgrTooltip>
```

```razor
<IgbTooltip>
Congrats you have hovered the button!
</IgbTooltip>
```

<!-- WebComponents, React -->
あるいは、単純なテキストを設定するには、`Message` プロパティを使用できます。
<!-- end: WebComponents, React -->

```html
<igc-tooltip message="This is my custom content here."></igc-tooltip>
Expand All @@ -152,7 +191,9 @@ tooltip.anchor = anchor;
<IgrTooltip message="This is my custom content here."></IgrTooltip>
```

<!-- WebComponents, React -->
両方の方法 (スロット化されたコンテンツと `Message` プロパティ) を使用する場合、スロット化されたコンテンツが優先され、`Message` 値は無視されます。
<!-- end: WebComponents, React -->

```html
<igc-button id="target-button">Hover me</igc-button>
Expand All @@ -168,7 +209,9 @@ tooltip.anchor = anchor;
</IgrTooltip>
```

この例では、スロット化されたコンテンツ 「I will be shown!」 が `Message` プロパティ値の代わりに表示されます。
<!-- WebComponents, React -->
この例では、スロット化されたコンテンツ「I will be shown!」が `Message` プロパティ値の代わりに表示されます。
<!-- end: WebComponents, React -->

`Tooltip` のコンテンツは単なるテキスト以上のものになります。ツールチップはマークアップ内の通常の要素であるため、必要な要素を追加し、それに応じてスタイルを設定することで、そのコンテンツを強化できます。

Expand All @@ -185,37 +228,52 @@ tooltip.anchor = anchor;
```

```tsx
<IgrTooltip show-delay="600" hide-delay="800">
<IgrTooltip showDelay="600" hideDelay="800">
Her name is Madelyn James.
</IgrTooltip>
```

```razor
<IgbTooltip ShowDelay="600" HideDelay="800">
Her name is Madelyn James.
</IgbTooltip>
```

> [!NOTE]
> Tooltip API メソッド (`Show`、`Hide`、`Toggle`) では、`ShowDelay` プロパティと `HideDelay` プロパティが考慮されないことに注意することが重要です。呼び出されるとすぐに動作します。
### 配置

`Tooltip` は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、`Placement` プロパティを、`top`、`top-start`、`top-end`、`bottom`、`bottom-start`、`bottom-end `、`right`、`right-start`、`right-end`、`left`、`left-start`、`left-end` のいずれかの位置オプションとともに使用するだけです。
`Tooltip` は、ターゲット要素を基準にして簡単に配置することもできます。必要なのは、`Placement` プロパティを、`top`、`top-start`、`top-end`、`bottom`、`bottom-start`、`bottom-end `、`right`、`right-start`、`right-end`、`left`、`left-start`、`left-end` のいずれかの配置オプションとともに使用するだけです。

`Placement` プロパティが設定されていない場合、デフォルト値は `bottom` となり、`Tooltip` はターゲット要素の下に配置されます。

さらに、`Sticky` プロパティを使用して `Tooltip` を固定することができます。これにより、閉じるボタンが追加され、ユーザーが閉じるボタンをクリックするか、`Esc` キーを押して手動で閉じるまで、`Tooltip` が表示されたままになります。この動作はデフォルトのホバー動作をオーバーライドし、ユーザーがターゲット要素上でホバーを停止したときに `Tooltip` が消えないようにします。

`Tooltip` には、`WithArrow` プロパティを介して構成できるオプションの矢印インジケータも含まれています。矢印はツールチップをその anchor 要素に視覚的に接続し、その配置はツールチップの `Placement` に基づいて自動的に調整されます。

```html
<igc-button id="target-button">Hover me</igc-button>
<igc-tooltip anchor="target-button" placement="top-start" sticky>
<igc-tooltip anchor="target-button" placement="top-start" sticky with-arrow>
Congrats you've hovered the button!
</igc-tooltip>
```

```tsx
<IgrButton id="target-button">Hover me</IgrButton>
<IgrTooltip anchor="target-button" placement="top-start" sticky>
<IgrTooltip anchor="target-button" placement="top-start" sticky withArrow={true}>
Congrats you have hovered the button!
</IgrTooltip>
```

次の例では、すべての位置オプションと `Sticky` プロパティの動作のデモを見ることができます。
```razor
<IgbButton id="target-button">Hover me</IgbButton>
<IgbTooltip Anchor="target-button" Placement="PopoverPlacement.TopStart" Sticky="true" DisableArrow="true">
Congrats you have hovered the button!
</IgbTooltip>
```

次の例では、すべてのツールチップの配置オプション、矢印の配置動作、および `Sticky` プロパティの動作のデモを見ることができます。

`sample="/inputs/tooltip/placement", height="220", alt="{Platform} Tooltip 配置の例"`

Expand All @@ -234,12 +292,12 @@ tooltip.anchor = anchor;

### 追加のプロパティ

これまでに説明したプロパティの他に、`Tooltip` コンポーネントには、動作、位置、外観をさらに構成できるさまざまな追加プロパティが用意されています。
これまでに説明したプロパティの他に、`Tooltip` コンポーネントには、動作、配置、外観をさらに構成できるさまざまな追加プロパティが用意されています。

|名前|タイプ|説明|
|--|--|--|
| `Open` | boolean | ツールチップの表示/非表示を決定します。 |
| `WithArrow` | boolean | **true** に設定すると、ツールチップの矢印インジケーターが有効になります。 |
| `WithArrow` | boolean | ツールチップの矢印インジケーターをレンダリングするかどうかを決定します。 |
| `Offset` | number | ツールチップとその `Anchor` 間のピクセル距離を設定します。 |

### メソッド
Expand Down
10 changes: 6 additions & 4 deletions docfx/jp/components/toc.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1562,7 +1562,8 @@
{
"exclude": ["Angular", "React"],
"name": "デバイダー",
"href": "layouts/divider.md"
"href": "layouts/divider.md",
"status": "new"
},
{
"exclude": ["Angular", "Blazor"],
Expand Down Expand Up @@ -1746,9 +1747,10 @@
"status": "new"
},
{
"exclude": ["Angular", "Blazor"],
"exclude": ["Angular"],
"name": "マスク入力",
"href": "inputs/mask-input.md"
"href": "inputs/mask-input.md",
"status": "NEW"
},
{
"exclude": ["Angular"],
Expand Down Expand Up @@ -1796,7 +1798,7 @@
"href": "inputs/ripple.md"
},
{
"exclude": ["Angular", "Blazor"],
"exclude": ["Angular"],
"name": "ツールチップ",
"href": "inputs/tooltip.md",
"status": "new"
Expand Down