Separator experimental
기본 separator wrapper입니다. native <hr>에 horizontal/vertical 구분선을 적용합니다.
Preview
계정, 권한, 알림 설정을 한 영역에서 확인해요.
프로필
보안
알림
보안
알림
<script lang="ts">
import { Separator } from '@odbd/svelte'
</script>
<div class="separator-demo">
<section>
<strong>사용자 정보</strong>
<p>계정, 권한, 알림 설정을 한 영역에서 확인해요.</p>
</section>
<Separator />
<div class="separator-demo__split">
<span>프로필</span>
<Separator orientation="vertical" />
<span>보안</span>
<Separator orientation="vertical" />
<span>알림</span>
</div>
</div>
<style>
.separator-demo {
display: grid;
width: fit-content;
max-width: 30rem;
gap: var(--odbd-space-4);
}
.separator-demo section {
display: grid;
gap: var(--odbd-space-1);
}
.separator-demo strong,
.separator-demo p {
margin: 0;
}
.separator-demo p {
color: var(--odbd-color-muted-foreground);
font-size: var(--odbd-font-size-sm);
}
.separator-demo__split {
display: flex;
align-items: center;
gap: var(--odbd-space-3);
color: var(--odbd-color-foreground);
font-size: var(--odbd-font-size-sm);
}
.separator-demo__split :global(.odbd-separator[data-orientation='vertical']) {
align-self: stretch;
min-height: 1.25em;
}
</style>
Import
Svelte와 React가 같은 anatomy 계약을 공유합니다. 선택한 프레임워크는 모든 페이지에서 유지됩니다. 패키지 설치는 Getting Started를 참고하세요.
import { Separator } from '@odbd/svelte' import { Separator } from '@odbd/react/separator'