@wayz/chart-react v0.0.4

@wayz/chart-react

npm install @wayz/chart-react  

Header

Header1

1. 定义

type THeader1Props = {
  className?: string
  style?: CSSProperties
  title?: string
  dur?: number
  border?: number
  borderColor?: string
  bottomWidth?: number
  splitRatio?: number // 0-1
  backgroundColor?: string | string[]
  children?: any
}

2. 示例

import { Header1, THeader1Props  } from "@wayz/chart-react"

const Demo = ()=>{
  let args: THeader1Props  = {
    title: "这是标题",
    style: {
      height: 50,
    },
  }

  return <Header1 {..args}></Header1>
}

const Demo2 = ()=>{
  let args: THeader1Props  = {
    style: {
      color: "green",
      fontSize: 50,
      height: 60,
    },
    className: "haha",
    dur: 5,
    borderColor: "rgba(0, 255, 206, 1)",
    border: 2,
    bottomWidth: 500,
    splitRatio: 0.5,
    backgroundColor: [
      "rgba(0, 91, 156, 0.2)",
      "rgba(6, 21, 29, 1)",
      "rgba(0, 79, 149, 0.4)",
    ],
  }

  return <Header1 {..args}><div>inner</div></Header1>
}

Border

Border1

1. 定义

type TBorder1Props = {
  className?: string
  style?: CSSProperties
  borderColor?: string
  borderWidth?: number
  backgroundColor?: string | string[] // 为数组时，渐变效果
  cornerColor?: string
  cornerWidth?: number
  cornerSpace?: number
}

2. 示例

import { Border1, TBorder1Props } from "@wayz/chart-react"

const Demo = ()=>{
  let args: TBorder1Props  = {
     style: {
      height: 200,
    },
  }

  return <Border1 {..args}><div>content</div></Border1>
}


const Demo2 = ()=>{
  let args: TBorder1Props  = {
    style: {
      color: "red",
      fontSize: 50,
      height: 200,
    },
    className: "haha",
    cornerColor: "green",
    cornerWidth: 15,
    borderWidth: 0,
    borderColor: "red",
    backgroundColor: "green"
  }

  return <Border1 {..args}><div>content</div></Border1>
}

Geometry

Hexagon1

1. 定义

type TBorder1Props = {
  className?: string
  style?: CSSProperties
  borderColor?: string
  borderWidth?: number
  backgroundColor?: string | string[]
  glowing?: boolean // 发光效果
  breach?: boolean // 缺口效果
}

2. 示例

import { Hexagon1, THexagon1Props } from "@wayz/chart-react"

const Demo = ()=>{
  let args: THexagon1Props  = {
     style: {
      height: 50,
    },
  }

  return <Hexagon1 {..args}><div>content</div></Hexagon1>
}


const Demo2 = ()=>{
  let args: THexagon1Prop  = {
    style: {
    height: 50,
  },
  breach: true,
  glowing: true,
  }

  return <Hexagon1 {..args}><div>content</div></Hexagon1>
}

const Demo3 = ()=>{
  let args: THexagon1Prop  = {
    style: {
      color: "green",
      fontSize: 20,
      height: 60,
    },
    className: "haha",
    borderColor: "rgba(0, 255, 206, 1)",
    borderWidth: 2,
    glowing: true,
    backgroundColor: [
      "rgba(0, 91, 156, 0.2)",
      "rgba(6, 21, 29, 1)",
      "rgba(0, 79, 149, 0.4)",
    ],
  }

  return <Hexagon1 {..args}><div>content</div></Hexagon1>
}