Lorem ipsum dolor sit, amet consectetur adipisicing elit. At a eaque fugiat sint sapiente. Id, hic ex, blanditiis totam animi amet delectus temporibus quae fugiat magnam, quos eaque dolorum a? Lorem ipsum dolor, sit amet consectetur adipisicing elit. Possimus labore unde minus temporibus beatae commodi et nesciunt iure in dignissimos suscipit, alias ab voluptatem facilis tempora numquam. Veritatis, dolorum suscipit! Lorem ipsum dolor sit, amet consectetur adipisicing elit. Explicabo fugiat molestias iusto, ipsum distinctio officia ad id ratione esse ducimus architecto deleniti illum reiciendis rerum, at blanditiis molestiae. Cupiditate, nobis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Ab, magni. Aliquid inventore quaerat nemo architecto harum earum quas porro repudiandae explicabo repellat repellendus magni, corporis omnis laborum, velit dicta blanditiis. Lorem ipsum dolor sit, amet consectetur adipisicing elit. Debitis, eveniet quas. Accusamus facere veritatis expedita delectus, asperiores numquam placeat necessitatibus assumenda, nesciunt in dolorem sit provident repellendus, voluptatem earum! Consequatur. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aut earum asperiores aliquam magnam est delectus veritatis numquam sint porro tenetur dolores nobis, deleniti voluptas quaerat, quia voluptatum soluta autem perspiciatis? Lorem ipsum dolor sit amet consectetur adipisicing elit. Facilis possimus eaque aliquam maxime? Quidem enim, sed itaque at veritatis nihil officia esse qui provident ipsa adipisci necessitatibus officiis distinctio laborum!
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
);
}
```
content 1
}
{value === "2" && content 2
}
{value === "3" && content 3
}
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{props.children}
);
};
```
{children}
);
};
```
{props.children}
);
};
```
아래 컨텐츠
{children}
);
};
```
{children}
);
};
```
graphemes.length: {graphemes.length}
value.length: {value.length}
graphemes: {JSON.stringify(graphemes)}
value: {value}
graphemes.length: {graphemes.length}
value.length: {value.length}
graphemes: {JSON.stringify(graphemes)}
value: {value}
`을 렌더링합니다. **`
`은 의미를 가진(semantic) 구분선이며, 스크린 리더 역시 해당 요소를 "수평(수직) 분할선"으로 읽습니다.** Divider가 의미를 가지지 않은 장식적 요소라면, `as` prop을 활용해 `
` 등으로 렌더링하여 스크린 리더가 해당 요소를 읽지 않도록 해야 합니다.
반대로, Divider를 `` 등 `
`이 아닌 요소로 렌더링해야 하는 상황에서, 스크린 리더가 해당 요소를 읽어야 한다면, `role="separator"`를 명시적으로 지정해야 합니다. ## Examples ### Orientation
```tsx
import { Box, Divider, HStack, VStack } from "@seed-design/react";
export default function DividerOrientation() {
return (
);
}
```
file: components/error-state.mdx
# Error State
사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.
***
title: Error State
description: 사용자에게 오류 혹은 조회 결과가 없음을 알리는 컴포넌트입니다.
------------------------------------------------
```tsx
import { VStack } from "@seed-design/react";
import { ErrorState } from "seed-design/ui/error-state";
export default function ErrorStatePreview() {
return (
);
}
```
## Installation
npm
pnpm
yarn
bun
```bash
npx @seed-design/cli@latest add ui:error-state
```
```bash
pnpm dlx @seed-design/cli@latest add ui:error-state
```
```bash
yarn dlx @seed-design/cli@latest add ui:error-state
```
```bash
bun x @seed-design/cli@latest add ui:error-state
```
```tsx
import { VStack } from "@seed-design/react";
import { ErrorState } from "seed-design/ui/error-state";
export default function ErrorStateBasement() {
return (
);
}
```
file: components/field-button.mdx
# Field Button
Text Field와 유사한 외관을 가지는 버튼 컴포넌트입니다.
***
title: Field Button
description: Text Field와 유사한 외관을 가지는 버튼 컴포넌트입니다.
------------------------------------------------
```tsx
import { FieldButton } from "seed-design/ui/field-button";
export default function FieldButtonPreview() {
return (
window.alert("버튼 클릭됨"),
"aria-label": "알림 표시",
}}
/>
);
}
```
## Installation
npm
pnpm
yarn
bun
```bash
npx @seed-design/cli@latest add ui:field-button
```
```bash
pnpm dlx @seed-design/cli@latest add ui:field-button
```
```bash
yarn dlx @seed-design/cli@latest add ui:field-button
```
```bash
bun x @seed-design/cli@latest add ui:field-button
```
| undefined",
"default": undefined,
"required": false
},
disabled: {
"type": "boolean | undefined",
"default": "false",
"required": false
},
invalid: {
"type": "boolean | undefined",
"default": "false",
"required": false
},
name: {
"type": "string | undefined",
"default": undefined,
"required": false
},
values: {
"type": "string[] | undefined",
"default": undefined,
"required": false
},
onValuesChange: {
"type": "((values: string[]) => void) | undefined",
"default": undefined,
"required": false
},
asChild: {
"type": "boolean | undefined",
"default": "false",
"required": false,
description: "Whether the element should be rendered as a child of a slot."
}
}}
/>
### `FieldButtonValue`
`이 아닌 요소로 렌더링해야 하는 상황에서, 스크린 리더가 해당 요소를 읽어야 한다면, `role="separator"`를 명시적으로 지정해야 합니다. ## Examples ### Orientation