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.
mini-size
property.void
void
void
void
Below is a collection of simple to complex examples.
import React from "react";
import { Grid, Drawer, Card } from "@htmlplus/react";
const App = () => {
return <>
<Grid>
<Grid.Item xs="auto">
<Drawer animation="fade" size="200px" connector="drawer-default">
<Card>
Drawer Content
</Card>
</Drawer>
</Grid.Item>
<Grid.Item xs="grow">
<Card>
<Drawer.Toggler connector="drawer-default">
Toggle
</Drawer.Toggler>
</Card>
</Grid.Item>
</Grid>
</>;
};
export default App;
plus-card {
--plus-card-background-color: #E0E0E0;
padding: 10rem 0;
text-align: center;
}
plus-drawer plus-card {
--plus-card-background-color: #AACAFF;
margin-right: 0.5rem;
}