> ## Documentation Index
> Fetch the complete documentation index at: https://help.dingtalk.io/llms.txt
> Use this file to discover all available pages before exploring further.

# ボタン

> ボタンコンポーネントは、ダッシュボード上で特定の操作やフローをトリガーする中心的なインタラクションコントロールです。1 つまたは複数のボタンを設定することで、ユーザーは事前定義したデータ操作、ページ遷移またはシステムコマンドを素早く実行でき、効率的なタスク駆動とフローのガイド...

## 機能概要

ボタンコンポーネントは、ダッシュボードで**特定の操作やフローをトリガーする中心的なインタラクションコントロール**です。1 つまたは複数のボタンを設定することで、ユーザーは事前定義したデータ操作、ページ遷移またはシステムコマンドを素早く実行でき、効率的なタスク駆動とフローのガイドを実現します。

**典型的な活用シーン：**

* **データ操作のトリガー**：ダッシュボードに「レコード更新」「レコード削除」などのボタンを設定し、ワンクリックでデータや業務フローを処理します。
* **ページナビゲーションとドリルダウン**：「ホームへ戻る」「詳細を見る」「商品分析」などのボタンを設定し、ページ間の素早い切り替えとデータドリルダウンを実現します。
* **外部リンクへの遷移**：「公式ドキュメント」「ヘルプセンター」などのボタンを設定し、ユーザーがワンクリックで関連する外部サイトやシステムへ遷移できるようにし、アプリの機能境界をシームレスに拡張します。

## 操作フロー

### **ボタンコンポーネントを追加する**

1. AI テーブルアプリモジュールに入ります。
2. 左側のナビゲーションバーで、コンポーネントを追加する対象ページを選択します。
3. ページ左下の  **+ コンポーネント追加**をクリックし、続けて**ボタン**を選択します。

### **基本設定**

ボタンコンポーネントを追加後、右側パネルの**基本設定**で以下を設定できます。

* **プリセットスタイル**
  * システムには 9 種類のスタイルテンプレート（色、ボーダー、アイコンなどの組み合わせ）が組み込まれており、直接選択して適用するだけで、ボタンの装飾を素早く完了できます。
* **コンテンツ定義**
  * **タイトル**：ボタンに表示される中心テキストです。デフォルト名は「ボタン」で、「詳細を見る」「商品明細」など具体的な機能説明に変更できます。
  * **ボタンアイコン**：アイコンライブラリからアイコンを選択でき、図形でボタンの機能を補助的に表現し、識別性を高めます。
* **インタラクションアクション（実行操作）**

  ユーザーがボタンをクリックした際にトリガーされる具体的な動作を定義する、設定の中核部分です。

  * **リンクを開く**：クリック後、指定された外部ウェブまたは内部リソースのリンクへ遷移します。入力欄に有効な URL（例：`https://example.com`）を入力する必要があります。

  * **ページを開く**：クリック後、現在のアプリ内の別ページへ遷移します。プルダウンリストから対象ページを選択できます。

  * **自動化フローを実行**：クリック後、設定済みの自動化フロー（例：メッセージ送信、レコード更新）をトリガーします。このオプションを選択すると、自動化設定画面に誘導され、具体的な業務フローを作成できます。

### **カスタム設定**

右側パネルの**カスタム設定**エリアでは、ボタンの視覚スタイルを細かく調整し、アプリ全体のデザインに合わせられます。

* **基本スタイル**
  * **ボタンサイズ**：**デフォルト**と**拡大**の 2 つのプリセットサイズ選択肢を提供し、さまざまな視覚要件に対応します。
* **色設定**
  * **ボタン色**：カラーパレットでボタン本体の背景色を設定します。
  * **アイコン色**：ボタン内アイコンの塗りつぶし色を設定します。
  * **アイコン背景**：アイコンが配置されるエリアの背景スタイルを設定します。**背景なし**、**淡色背景**、**反転背景**の 3 種類があり、アイコンの視認性を高めます。
* **ボーダースタイル**
  * **ボーダー色**：プルダウンのカラーパレットでコンポーネントのボーダー色をカスタマイズします。
  * **ボーダーの太さ**：プルダウンリストから `1px`、`2px` などの選択肢を選び、ボーダー幅を細かく制御します。
* **テキストスタイル**
  * このエリアではボタンテキストを装飾でき、**フォント**、**サイズ**、**ウェイト（太字）**、**フォントカラー**、**字間**および<strong>テキストスタイル（イタリック、下線）</strong>を調整でき、テキストを見やすく美しく整えます。

### **コンポーネント管理**

* **操作メニュー**

  コンポーネントを選択した状態で右上のアイコンをクリックすると、操作メニューが展開され、以下の操作が行えます。

  * **設定**：当該コンポーネントの属性設定パネルを素早く開きます。
  * **コピー**：現在のページ内に同一のコンポーネントを複製します。
  * **コピー先**：当該アプリ内の他の指定ページへコンポーネントをコピーします。
  * **削除**：現在のページからコンポーネントを削除します。
* **サイズと位置の調整**

  * **サイズ調整**：コンポーネント右下の角にマウスを重ね、ハンドルをドラッグすると、コンポーネントの幅と高さを自由に調整できます。
  * **位置移動**：コンポーネント上部にマウスを移動するとアイコンが現れ、左クリックを押したままドラッグすると、ページ内でコンポーネントの位置を調整できます。