Skip to content
Highly customized UI
Branch: master
Clone or download
Latest commit de2f7d9 Jun 10, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
example add scroll buttons to tabs when width is not enough; alpha release Jun 6, 2019
scripts issue-3 add table example Mar 25, 2019
src add scroll buttons to tabs when width is not enough; alpha release Jun 6, 2019
.gitattributes reduce logs May 23, 2019
.gitignore adjust file path Apr 12, 2019
.npmignore adding document to colored-tabs; alpha release May 23, 2019
.prettierignore add ant-components Mar 13, 2019
.prettierrc prettier code Mar 24, 2019
README.md refine change handlers of grouped-checkbox; alpha release May 28, 2019
package.json release 0.1.5 Jun 10, 2019
template.ejs init project Feb 24, 2019
tsconfig.base.json add antd css Apr 15, 2019
tsconfig.json adjust file path Apr 12, 2019
tsconfig.release.json adjust dependency package Apr 15, 2019
webpack.config.js add scroll buttons to tabs when width is not enough; alpha release Jun 6, 2019
webpack.release.js
yarn.lock add scroll buttons to tabs when width is not enough; alpha release Jun 6, 2019

README.md

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) => { }}
/>
You can’t perform that action at this time.