# UnorderedListNode

Danh sách dọc (`ul`) — container cho các `ListItemNode`. Không render bullet mặc định, layout dùng flexbox column.

## Resolved name

`UnorderedList`

## Configurable props

### `sx` props

```ts
sx?: {
  // layout
  width?: number | string
  rowGap?: number        // khoảng cách giữa các items
  alignItems?: 'flex-start' | 'flex-end' | 'center'  // căn ngang các items

  // spacing
  paddingTop?: number
  paddingRight?: number
  paddingBottom?: number
  paddingLeft?: number
  marginTop?: number
  marginRight?: number
  marginBottom?: number
  marginLeft?: number

  // border
  borderStyle?: string
  borderColor?: string
  borderTopWidth?: number
  borderRightWidth?: number
  borderBottomWidth?: number
  borderLeftWidth?: number
  borderTopLeftRadius?: number | string
  borderTopRightRadius?: number | string
  borderBottomRightRadius?: number | string
  borderBottomLeftRadius?: number | string

  // responsive overrides
  sm?: { /* same keys above */ }
  md?: { /* same keys above */ }
  lg?: { /* same keys above */ }
}
```

## Usage

```tsx
import { UnorderedListNode, ListItemNode, TextNode, IconNode } from '@janbox/storefront-builder';

// Danh sách các text items
<UnorderedListNode sx={{ rowGap: 8 }}>
  <ListItemNode>
    <TextNode>Item 1</TextNode>
  </ListItemNode>
  <ListItemNode>
    <TextNode>Item 2</TextNode>
  </ListItemNode>
</UnorderedListNode>

// Icon + text, căn giữa dọc
<UnorderedListNode sx={{ rowGap: 12, width: '100%' }}>
  <ListItemNode>
    <FlexboxNode sx={{ flexDirection: 'row', alignItems: 'center', columnGap: 8 }}>
      <FlexItemNode><IconNode source="..." size={16} /></FlexItemNode>
      <FlexItemNode sx={{ flexGrow: 1 }}><TextNode>Feature description</TextNode></FlexItemNode>
    </FlexboxNode>
  </ListItemNode>
</UnorderedListNode>
```

## Rules

- **Canvas**: no — không trực tiếp nhận drop.
- **Children**: `ListItemNode` — thêm qua inspector.

## Related nodes

- [`ListItemNode`](../list-item/README.md) — mỗi item trong list