110 lines
2.1 KiB
Markdown
110 lines
2.1 KiB
Markdown
# Separator
|
|
|
|
Visually or semantically separates content.
|
|
|
|
## Import
|
|
|
|
```
|
|
Copyts
|
|
import { Separator } from "@kobalte/core/separator";
|
|
// or
|
|
import { Root } from "@kobalte/core/separator";
|
|
// or (deprecated)
|
|
import { Separator } from "@kobalte/core";
|
|
```
|
|
|
|
```
|
|
Copyts
|
|
import { Separator } from "@kobalte/core/separator";
|
|
// or
|
|
import { Root } from "@kobalte/core/separator";
|
|
// or (deprecated)
|
|
import { Separator } from "@kobalte/core";
|
|
```
|
|
|
|
## Features
|
|
|
|
- Native HTML `<hr>` element support.
|
|
- Custom element type support via the [WAI ARIA Separator](https://w3c.github.io/aria/#separator) role.
|
|
- Support for horizontal and vertical orientation.
|
|
|
|
## Anatomy
|
|
|
|
The separator consists of:
|
|
|
|
- **Separator:** The root container for a separator.
|
|
|
|
```
|
|
Copytsx
|
|
<Separator />
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
<Separator />
|
|
```
|
|
|
|
## Example
|
|
|
|
Content above
|
|
|
|
* * *
|
|
|
|
Content below
|
|
|
|
index.tsxstyle.css
|
|
|
|
```
|
|
Copytsx
|
|
import { Separator } from "@kobalte/core/separator";
|
|
import "./style.css";
|
|
|
|
function App() {
|
|
return (
|
|
<div>
|
|
<span>Content above</span>
|
|
<Separator class="separator" />
|
|
<span>Content below</span>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
```
|
|
Copytsx
|
|
import { Separator } from "@kobalte/core/separator";
|
|
import "./style.css";
|
|
|
|
function App() {
|
|
return (
|
|
<div>
|
|
<span>Content above</span>
|
|
<Separator class="separator" />
|
|
<span>Content below</span>
|
|
</div>
|
|
);
|
|
}
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Separator
|
|
|
|
`Separator` is equivalent to the `Root` import from `@kobalte/core/separator` (and deprecated `Separator.Root`).
|
|
|
|
| Prop | Description |
|
|
| --- | --- |
|
|
| orientation | `'horizontal' | 'vertical'`<br> The orientation of the separator. |
|
|
|
|
| Data attribute | Description |
|
|
| --- | --- |
|
|
| data-orientation='horizontal' | Present when the separator has horizontal orientation. |
|
|
| data-orientation='vertical' | Present when the separator has vertical orientation. |
|
|
|
|
## Rendered elements
|
|
|
|
| Component | Default rendered element |
|
|
| --- | --- |
|
|
| `Separator` | `hr` |
|
|
|
|
Previous[←Select](https://kobalte.dev/docs/core/components/select)Next[Skeleton→](https://kobalte.dev/docs/core/components/skeleton) |