Follow the tutorials here to use the HTMLPLUS
library on React-based
projects.
Select your desired component from below and see the available properties, slots, events, styles and methods.
Below is a collection of simple to complex examples.
import React from "react";
import { Divider } from "@htmlplus/react";
const App = () => {
return <>
<Divider size="sm"></Divider>
<br />
<Divider size="md"></Divider>
<br />
<Divider size="lg"></Divider>
</>;
};
export default App;
import React from "react";
import { Divider } from "@htmlplus/react";
const App = () => {
return <>
<Divider type="solid"></Divider>
<br />
<Divider type="dashed"></Divider>
<br />
<Divider type="dotted"></Divider>
</>;
};
export default App;
import React from "react";
import { Divider } from "@htmlplus/react";
const App = () => {
return <>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus, gravida semper libero.
<Divider></Divider>
Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus.
Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum.
<Divider></Divider>
Nam egestas interdum risus et gravida. Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit imperdiet, gravida urna tempus, fringilla nisl.
</>;
};
export default App;
plus-divider {
margin: 1rem 0;
}
import React from "react";
import { Grid, Divider } from "@htmlplus/react";
const App = () => {
return <>
<Grid alignItems="center" justifyContent="evenly">
<Grid.Item xs="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend
ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus,
gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris
aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus.
</Grid.Item>
<Divider vertical></Divider>
<Grid.Item xs="5">
Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida.
Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel
accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit
imperdiet, gravida urna tempus, fringilla nisl.
</Grid.Item>
</Grid>
</>;
};
export default App;
import React from "react";
import { Card, Divider } from "@htmlplus/react";
const App = () => {
return <>
<Card elevation="10">
Item 1
<Divider></Divider>
Item 2
<Divider></Divider>
Item 3
<Divider></Divider>
Item 4
<Divider></Divider>
Item 5
</Card>
</>;
};
export default App;
plus-card {
padding: 0 1rem;
line-height: 3rem;
}
import React from "react";
import { Grid, Divider } from "@htmlplus/react";
const App = () => {
return <>
<Grid alignItems="center" justifyContent="evenly">
<Grid.Item xs="5">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nibh eros, luctus in lacus eu, eleifend
ultricies ipsum. Morbi sit amet diam et erat pulvinar ultricies in vel erat. Vestibulum sit amet posuere lacus,
gravida semper libero. Praesent sed nisi sed lorem posuere consequat. Nunc vehicula fermentum hendrerit. Mauris
aliquam ornare laoreet. Maecenas cursus nec ipsum et tempus.
</Grid.Item>
<Divider vertical></Divider>
<Grid.Item xs="5">
Sed pretium odio bibendum, pharetra nisl sed, scelerisque ipsum. Nam egestas interdum risus et gravida.
Suspendisse aliquam leo ac leo fermentum, ac accumsan purus vestibulum. Integer facilisis tincidunt urna vel
accumsan. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Maecenas et elit
imperdiet, gravida urna tempus, fringilla nisl.
</Grid.Item>
</Grid>
</>;
};
export default App;
plus-divider {
--plus-divider-color: #5F9EE9;
--plus-divider-size: 3px;
margin: 2rem 0;
}