jimengio / jasmin-ui

Highly customized UI

Jasmin UI

Demo http://fe.jimu.io/jasmin-ui

Usage

yarn add @jimengio/jasmin-ui

Or

npm install @jimengio/jasmin-ui

注：项目入口文件要引入 css 文件

import "@jimengio/jasmin-ui/lib/assets/antd/antd.min.css"

安装开发依赖

yarn install

启动项目

yarn dev

编译

yarn release

Colored Tabs

Compared to tabs:

• DOM structure too simple, not many properties.
• No animations.
• Allow customizing styles, especially when used in dark background.

import {ColoredTabs, IColoredTab } from "@jimengio/jasmin-ui";

let tabs: IColoredTab[] = [
  { value: "factory", title: "工厂" },
  { value: "material", title: "物料" },
  { value: "analysis", title: "分析结果" },
  { value: "process", title: "制程" },
];

<ColoredTabs value={tab} tabs={tabs} onChange={setTab} />

<ColoredTabs
  value={tab}
  tabs={tabs}
  onChange={setTab}
  tabClassName={styleTab}
  activeTabClassName={styleActiveTab}
  highlightClassName={styleTabHighlight}
/>

Grouped Checkbox

import { GroupedCheckbox, IGroupedCheckboxItem } from "@jimengio/jasmin-ui";

let checkedKeys: string[] = []
let items: IGroupedCheckboxItem[] = [
  {
    key: "quality",
    title: "查看"
  },
];

<GroupedCheckbox
  items={items}
  title={"所有"}
  checkedKeys={checkedKeys}
  onGroupChange={(checked, selectedKeys) => { }}
  onItemChange={(checked: boolean, key: string) => { }}
/>