MEUI

A modern embedded UI library giving your extraordinary development experience

现代嵌入式用户界面库,非凡的开发体验

build status

MEUI is a modern ui library for embedded platform based on quickjs and React.js

Example

import { createRoot } from "@meui-js/preact"
import { useState } from "preact/compat"
import { animated, useSpring } from "@meui-js/spring"
function App() {
 const styles = useSpring({
 loop: true,
 from: { rotateZ: 0 },
 to: { rotateZ: 360 },
 })
 const [text, setText] = useState("Hello MEUI!")
 return (
 <animated.View
 style={{
 width: 120,
 height: 120,
 backgroundColor: "#46e891",
 borderRadius: 16,
 textAlign: "center",
 ...styles,
 }}
 onClick={() => {
 setText("Hello MEUI!\nHello React!")
 }}
 >
 {text}
 </animated.View>
 )
}
createRoot(300, 300).render(<App />)

Browser Demo

Features

Getting Started

Install Xmake

Windows

Ubuntu/WSLg

Mac OS

Build & Run MEUI

corepack enable
xmake f --backend=sdl2-core # Only for windows/macos
pnpm add -g pnpm # install the latest pnpm
pnpm install
pnpm build:all
pnpm run:examples

pnpm build:examples src/2048/index.tsx
pnpm run:examples

API References

CSS Style

export interface MeuiStyle {
 borderRadius?: [number, number, number, number] | number
 borderColor?: string
 backgroundColor?: Property.BackgroundColor
 fontColor?: Property.Color
 text?: string
 fontSize?: number
 fontFamily?: string
 textAlign?:
 | "center-left"
 | "center-right"
 | "center"
 | "top-left"
 | "top-right"
 | "top-center"
 | "bottom-left"
 | "bottom-right"
 | "bottom-center"
 backgroundImage?: string
 contentImage?: string
 transform?: string
 transformOrigin?:
 | [number, number]
 | ["left" | "center" | "right", "top" | "center" | "bottom"]
 flexWrap?: "nowrap" | "wrap" | "wrap-reverse"
 flexDirection?: "row" | "column" | "row-reverse" | "column-reverse"
 alignItems?: "stretch" | "flex-start" | "center" | "flex-end" | "baseline"
 alignSelf?:
 | "auto"
 | "stretch"
 | "flex-start"
 | "center"
 | "flex-end"
 | "baseline"
 alignContent?:
 | "stretch"
 | "flex-start"
 | "center"
 | "flex-end"
 | "space-between"
 | "space-around"
 justifyContent?:
 | "flex-start"
 | "center"
 | "flex-end"
 | "space-between"
 | "space-around"
 margin?: [number, number, number, number] | number
 border?: [number, number, number, number] | number
 padding?: [number, number, number, number] | number
 overflow?: "visible" | "hidden" | "scroll" | "auto"
 flexBasis?: number
 flexGrow?: number
 flexShrink?: number
 width?: Length
 height?: Length
 minWidth?: Length
 minHeight?: Length
 maxWidth?: Length
 maxHeight?: Length
 marginLeft?: Length
 marginTop?: Length
 marginBottom?: Length
 marginRight?: Length
 marginStart?: Length
 marginEnd?: Length
 paddingLeft?: Length
 paddingTop?: Length
 paddingBottom?: Length
 paddingRight?: Length
 paddingStart?: Length
 paddingEnd?: Length
 borderLeft?: number
 borderTop?: number
 borderBottom?: number
 borderRight?: number
 borderStart?: number
 borderEnd?: number
 borderTopLeftRadius?: number
 borderTopRightRadius?: number
 borderBottomRightRadius?: number
 borderBottomLeftRadius?: number
 left?: Length
 right?: Length
 top?: Length
 bottom?: Length
 zIndex?: number
 FOCUS?: MeuiStyle
 ACTIVE?: MeuiStyle
 HOVER?: MeuiStyle
 SELECT?: MeuiStyle
 DISABLE?: MeuiStyle
 CHECK?: MeuiStyle
}

Canvas API

Discussion Group

References