legokichi / react-cuttlebone

cuttlebone on react

react-cuttlebone

Ikagaka cuttlebone UI Kit with React

example

<Cuttlebone>
  <LayerSet>
    <Layer bottom=0 right=10 width=100 height=200>
      <Doc>
        Layer A
      </Doc>
    </Layer>
    <Layer bottom=0 right=90 width=100 height=200>
      <Doc>
        Layer B
      </Doc>
    </Layer>
  </LayerSet>
</Cuttlebone>

components

<Cuttlebone />

the top level component of react-cuttlebone

<Cuttlebone>
  <LayerSet />
</Cuttlebone>

<LayerSet />

<LayerSet hover=true>
  <Layer />
  ...
</LayerSet>

<Layer />

inline-block or like inline element as have width and height

<Layer top|bottom=0, left|right=0, width=0, height=0>
  <Doc />|<LayerSet>
</Layer>

<Doc />

actually webview

<Doc>
  Naitive Documents
  ...
</Doc>