> ## Documentation Index
> Fetch the complete documentation index at: https://coconut-grid.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# Visualforce コンポーネント

Visualforce コンポーネントを使用して、Visualforce ページに Coconut Grid を埋め込みます。

## コンポーネント

以下の Visualforce コンポーネントが利用可能です。

| コンポーネント名          | コンポーネント API 名 | 属性                        |
| ----------------- | ------------- | ------------------------- |
| Coconut Grid      | `CG_App`      |                           |
| Coconut Grid Item | `CG_Item`     | `itemId`、`tabId`、`height` |

## Coconut Grid

Coconut Grid コンポーネントを使用して、Visualforce ページに Coconut Grid のフル画面を埋め込みます。

```xml theme={null}
<CoconutGrid:CG_App />
```

## Coconut Grid Item

Coconut Grid Item コンポーネントを使用して、Visualforce ページに特定のアイテムを埋め込みます。

* `itemId` – アイテムレコード ID を指定
* `tabId` – タブレコード ID を指定
* `height` – コンポーネントの高さを px または CSS 単位で指定

```xml theme={null}
<CoconutGrid:CG_Item itemId="{!CoconutGrid__CG_Item__c.Id}" height="100%" />
```

```xml theme={null}
<CoconutGrid:CG_Item itemId="{!CoconutGrid__CG_Tab__c.CoconutGrid__CG_Item__c}" tabId="{!CoconutGrid__CG_Tab__c.Id}" height="600px" />
```