@ cantinc/ ui (英语)

摘要

CANT inc. (英语). 用户 基于 净值。 。 。 .

这是您可以使用的 UI 组件库 @innet/dom (英语) 应用.

使用量

启动应用程序

在终端控制台创建下一个命令的新项目 :

npx innetjs init my-app -t fe

变动 my-app 如果你想把它叫做另一种方式

进入我的应用并运行:

npm start

转到 当地主机 : 300 在浏览器中,您可以看到默认应用程序.

安装

停止服务器并安装 @cantinc/ui

npm i @cantinc/ui

然后重新开始.

在文档中,您可以找到组件的示例,可以复制任意示例并输入 src/index.tsx 您的工程文件( e)清除 src 文件夹前) (中文(简体) ).

样式

图书馆的很大一部分组件有一个 class 道具 (英语).

提供 class 作为字符串添加一个.

import innet from 'innet'
import dom from '@innet/dom'

import { Button } from '@cantinc/ui'

innet(
  <Button class='test'>
    Click me
  </Button>,
  dom,
)

或提供类取相.

关键是某个组件或不同状态的元素.

import innet from 'innet'
import dom from '@innet/dom'

import { Checkbox } from '@cantinc/ui'

innet(
  <Checkbox
    class={{
      root: 'test-root',
      disabled: 'test-disabled',
      icon: 'test-icon',
    }}
  />,
  dom,
)

值可以是数组,字符串,也可以是返回它们的函数.

这里有更多信息 html 类。 。 。 .

import innet from 'innet'
import dom from '@innet/dom'
import { State } from 'watch-state'

import { Button } from '@cantinc/ui'

const state = new State('foo')

innet(
  <>
    <Button
      onclick={() => { state.value = 'bar' }}
      class={{
        root: [
          'test1-root',
          'test2-root',
          ['test3-root'],
          () => `${state.value}-root`,
        ],
        content: () => ['test-content', `${state.value}-content`],
      }}>
      Click me
    </Button>
    <Button class={() => state.value} />
  </>,
  dom,
)

你用得着 style 添加内线样式的道具.

import innet from 'innet'
import dom from '@innet/dom'
import { State } from 'watch-state'

import { Button } from '@cantinc/ui'

const color = new State('red')

const handleClick = () => {
  color.value = 'blue'
}

innet(
  <>
    <Button
      style={{
        background: () => color.value,
      }}
      onclick={handleClick}>
      Click me
    </Button>
  </>,
  dom,
)

问题

如果您发现错误或有建议,请在 GitHub 图像。 。 。 .