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 />)
- Support
React.js
to build UI - Support
flex
layout - Support partical
css
style - Support
Material Design Icons
- Support
React Spring
to build animation - Support
ES2020
- Support
canvas
api
-
[path to SDL2]\x86_64-w64-mingw32 => [path to MinGW]\x86_64-w64-mingw32
-
cd ~ curl -sL https://deb.nodesource.com/setup_16.x | sudo bash - sudo apt -y install nodejs node -v
-
sudo apt install gcc make
-
nvm install node node -v
corepack enable
xmake f --backend=sdl2-core # Only for windows/macos
pnpm install
pnpm build:all
pnpm run:examples
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
}
arc
arcTo
beiginPath
bezierCurveTo
createRadialGradient
createLinearGradient
clearRect
clip
closePath
ellipse
fill
fillRect
fillText
font
getImageData
getTransform
lineCap
lineDashOffset
lineJoin
lineWidth
measureText
Path2D
putImageData
quadraticCurveTo
resetTransform
rotate
save
scale
setLineDash
setTransform
strokeRect
strokeText
textAlign
textBaseline
transform
translate
Tencent QQ Group: 765228998
-
QuickJS Javascript Engine. Available at:
-
PlutoVG is a standalone 2D vector graphics library in C. Available at:
-
React: A JavaScript library for building user interfaces. Available at:
-
react-spring: A spring-physics first animation library. Available at:
-
FlexLayout
is anC
implementation ofFlexible Box
layout. Available at: -
single-file public domain (or MIT licensed) libraries for C/C++. Available at:
-
Templated type-safe hashmap implementation in C. Available at:
-
libpqueue
is a generic priority queue (heap) implementation. Available at: