English | 中文
mdui for react.
This package use @lit/react(npm) to convert the web components of mdui to react component.
First is to import css styles after install.
@import "@studylessshape/mdui-react/mdui.css";If the mdui had been installed, can also import by:
@import "mdui/mdui.css";Then use components:
import {
Layout,
LayoutMain,
NavigationBar,
NavigationBarItem,
TopAppBar,
TopAppBarTitle,
Slot,
} from "@studylessshape/mdui-react";
export function App() {
return (
<Layout>
<TopAppBar variant="center-aligned">
<TopAppBarTitle>App Title</TopAppBarTitle>
</TopAppBar>
<LayoutMain>App Content</LayoutMain>
<NavigationBar
onChange={(event) => {
console.log(event.target.value);
}}
>
<NavigationBarItem value="/" icon="home">
Home
</NavigationBarItem>
<NavigationBarItem value="/about" icon="info">
About
</NavigationBarItem>
</NavigationBar>
</Layout>
);
}Some events are encapsulated in the following form:
import { NavigationBar as _MduiNavigationBar } from "mdui/components/navigation-bar.js";
export interface NavigationBarEvent extends Event {
target: _MduiNavigationBar & EventTarget;
}Then you can access the value by event.target.value in event handler;
The events of other components are also consistent.
Import icons can read the doc Icon#usage-material-icons
Also can use the material-icons(npm).
If use material-icons, need import css after install:
@import "material-icons/iconfont/material-icons.css";- locales
- functions
- Node (>=16)
- Package manager:
pnpm
Create a react component from web component is simple used @lit/react
import { createComponent } from "@lit/react";
import React from "react";
import { Layout as _MduiLayout } from "mdui/components/layout.js";
export { Layout as LayoutType } from "mdui/components/layout.js";
export const Layout = createComponent({
react: React,
tagName: "mdui-layout",
elementClas
```s: _MduiLayout,
});I offen export the raw type because I thought it can help to ref.
import { LayoutType, Layout } from "@studylessshape/mdui-ract";
export function App() {
const layoutRef = useRef<LayoutType>(null);
return <Layout ref={layoutRef}></Layout>;
}If there are some special events in the component, can deil with this way:
import { createComponent, type EventName } from "@lit/react";
import { NavigationBar as _MduiNavigationBar } from "mdui/components/navigation-bar.js";
import React from "react";
export interface NavigationBarEvent extends Event {
target: _MduiNavigationBar & EventTarget;
}
export const NavigationBar = createComponent({
react: React,
tagName: "mdui-navigation-bar",
elementClass: _MduiNavigationBar,
events: {
onChange: "change" as EventName<NavigationBarEvent>,
onShow: "show" as EventName<NavigationBarEvent>,
onShown: "shown" as EventName<NavigationBarEvent>,
onHide: "hide" as EventName<NavigationBarEvent>,
onHidden: "hidden" as EventName<NavigationBarEvent>,
},
});Specified the target type can help users to handle the event.