# 项目 · JGuang UI

> 用于列表、设置项和内容行的组合容器。

- 页面: https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item
- 改编自: shadcn/ui 文档 (MIT) @ bc0705384b51252af26dcc65425b216bf5eb063c
- 说明：正文保留英文原文。

> 示例 `item-demo`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


The `Item` component is a straightforward flex container that can house nearly any type of content. Use it to display a title, description, and actions. Group it with the `ItemGroup` component to create a list of items.

## Installation


  

**Command**


  

**Manual**


```text
Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.
```


### Copy and paste the following code into your project.


[View complete source: components/ui/item.tsx](/r/jguang-ui/radix/item.json)


### Update the import paths to match your project setup.


## Usage

```tsx showLineNumbers
import {
  Item,
  ItemActions,
  ItemContent,
  ItemDescription,
  ItemMedia,
  ItemTitle,
} from "@/components/ui/item"
```

```tsx showLineNumbers
<Item>
  <ItemMedia variant="icon">
    <Icon />
  </ItemMedia>
  <ItemContent>
    <ItemTitle>Title</ItemTitle>
    <ItemDescription>Description</ItemDescription>
  </ItemContent>
  <ItemActions>
    <Button>Action</Button>
  </ItemActions>
</Item>
```

## Composition

Use the following composition to build an `Item`:

```text
ItemGroup
└── Item
    ├── ItemHeader
    ├── ItemMedia
    ├── ItemContent
    │   ├── ItemTitle
    │   └── ItemDescription
    ├── ItemActions
    └── ItemFooter
```

## Item vs Field

Use `Field` if you need to display a form input such as a checkbox, input, radio, or select.

If you only need to display content such as a title, description, and actions, use `Item`.

## Variant

Use the `variant` prop to change the visual style of the item.


> 示例 `item-variant`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## Size

Use the `size` prop to change the size of the item. Available sizes are `default`, `sm`, and `xs`.


> 示例 `item-size`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## Icon

Use `ItemMedia` with `variant="icon"` to display an icon.


> 示例 `item-icon`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## Avatar

You can use `ItemMedia` with `variant="avatar"` to display an avatar.


> 示例 `item-avatar`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## Image

Use `ItemMedia` with `variant="image"` to display an image.


> 示例 `item-image`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## Group

Use `ItemGroup` to group related items together.


> 示例 `item-group`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## Header

Use `ItemHeader` to add a header above the item content.


> 示例 `item-header`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## Link

Use the `asChild` prop to render the item as a link. The hover and focus states will be applied to the anchor element.


> 示例 `item-link`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


```tsx showLineNumbers
<Item asChild>
  <a href="/dashboard">
    <ItemMedia variant="icon">
      <HomeIcon />
    </ItemMedia>
    <ItemContent>
      <ItemTitle>Dashboard</ItemTitle>
      <ItemDescription>Overview of your account and activity.</ItemDescription>
    </ItemContent>
  </a>
</Item>
```

## Dropdown


> 示例 `item-dropdown`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## RTL

To enable RTL support in JGuang UI, see the [RTL configuration guide](/systems/jguang-ui/docs/rtl).


> 示例 `item-rtl`: 交互预览见 https://jiguang132.com/zh/systems/jguang-ui/docs/components/radix/item


## API Reference

### Item

The main component for displaying content with media, title, description, and actions.

| Prop      | Type                                | Default     |
| --------- | ----------------------------------- | ----------- |
| `variant` | `"default" \| "outline" \| "muted"` | `"default"` |
| `size`    | `"default" \| "sm" \| "xs"`         | `"default"` |
| `asChild` | `boolean`                           | `false`     |

### ItemGroup

A container that groups related items together with consistent styling.

```tsx
<ItemGroup>
  <Item />
  <Item />
</ItemGroup>
```

### ItemSeparator

A separator between items in a group.

```tsx
<ItemGroup>
  <Item />
  <ItemSeparator />
  <Item />
</ItemGroup>
```

### ItemMedia

Use `ItemMedia` to display media content such as icons, images, or avatars.

| Prop      | Type                             | Default     |
| --------- | -------------------------------- | ----------- |
| `variant` | `"default" \| "icon" \| "image"` | `"default"` |

```tsx
<ItemMedia variant="icon">
  <Icon />
</ItemMedia>
```

```tsx
<ItemMedia variant="image">
  <img src="..." alt="..." />
</ItemMedia>
```

### ItemContent

Wraps the title and description of the item.

```tsx
<ItemContent>
  <ItemTitle>Title</ItemTitle>
  <ItemDescription>Description</ItemDescription>
</ItemContent>
```

### ItemTitle

Displays the title of the item.

```tsx
<ItemTitle>Item Title</ItemTitle>
```

### ItemDescription

Displays the description of the item.

```tsx
<ItemDescription>Item description</ItemDescription>
```

### ItemActions

Container for action buttons or other interactive elements.

```tsx
<ItemActions>
  <Button>Action</Button>
</ItemActions>
```

### ItemHeader

Displays a header above the item content.

```tsx
<Item>
  <ItemHeader>Header</ItemHeader>
  <ItemContent>...</ItemContent>
</Item>
```

### ItemFooter

Displays a footer below the item content.

```tsx
<Item>
  <ItemContent>...</ItemContent>
  <ItemFooter>Footer</ItemFooter>
</Item>
```

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt