Divider
Table of Contents
Vertical#
Hint: The component has not an implicit vertical height unless we set a container which provides it or define the
height on the component itself.
prev next Open in Stackblitz<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<div class="flex h-[100px]">
<p-divider direction="vertical"></p-divider>
</div>
<script>
</script>
</body>
</html>
Responsive#
You can change the divider's direction by using different major breakpoints xs
, s
, m
, l
, xl
.
prev next Open in Stackblitz<!doctype html>
<html lang="en" class="auto">
<head>
<title></title>
</head>
<body class="bg-base">
<div class="lg:flex lg:h-[150px]">
<p-divider direction="{'base': 'horizontal', 'l': 'vertical'}"></p-divider>
</div>
<script>
</script>
</body>
</html>