react vaadin components

警告該項目被棄用以支持Vaadin/React-Components

從@hilla/react-components導入的React包裝器（至少至少）支持服務器端渲染，但仍可以在Next.js項目中使用它們作為SSR禁用的動態導入：

 import dynamic from "next/dynamic" ;

export const Button = dynamic <
  import ( "@hilla/react-components/Button.js" ) . ButtonProps
> ( ( ) => import ( "@hilla/react-components/Button.js" ) . then ( ( mod ) => mod . Button ) , {
  ssr : false ,
} ) ;

在應用程序中啟用Lumo主題：

 if ( typeof window !== "undefined" ) {
  ( async ( ) => {
    const allImports = await import (
      "@vaadin/vaadin-lumo-styles/all-imports.js"
    ) ;

    const style = document . createElement ( "style" ) ;
    Object . values ( allImports ) . forEach ( ( css ) => {
      style . append ( document . createTextNode ( css . toString ( ) ) ) ;
    } ) ;
    document . head . append ( style ) ;
  } ) ( ) ;
}

反應vaadin成分

vaadin成分是一組vaadin成分的反應兼容包裝器。

包裝器是服務器端可渲染的，可以與Next.js和Gatsby等框架一起使用。

現場演示（演示來源）

快速開始

安裝組件集

npm i react-vaadin-components

安裝後，導入並在您的React應用中使用組件

 import 'react-vaadin-components/dist/css/core.css'

...

import {
  TextField ,
  Button ,
  Notification
} from 'react-vaadin-components' ;

...

const [ name , setName ] = useState ( "" ) ;

...
< TextField
  label = "Name"
  clearButtonVisible
  onValueChanged = { e => setName ( e . detail . value ) } >
</ TextField >

< Button
  theme = "primary"
  disabled = { ! name }
  onClick = { e => Notification . show ( `Hello ${ name } ` ) } >
  Say Hello
< / Button>