基于 iztro 实现的react组件,用于生成一张紫微斗数星盘。
react component of iztro used to generate an astrolabe of Zi Wei Dou Shu.
-
展示完整紫微斗数星盘
包含所有
主星
,辅星
,杂耀
,四化
,神煞
,流耀
以及星耀的亮度
。高亮显示重要的星耀,比如桃花星
,解神
,禄存
和天马
。 -
合理的星耀分布
用不同的颜色和字号来将
星耀
,宫名
,宫干
等分区域显示,解盘一目了然,直击重点。 -
清晰的运限指示
在宫位中明显的标示出
大限
、小限
、流年
、流月
、流日
、流时
所在宫位,点击运限指示按钮以后会显示重排后的运限宫名以及运限四化,更加方便的使用叠宫技巧解盘。 -
流耀显示
展示出各个流派都需要的
流耀
,可自行选择自己熟悉的流耀进行解盘。 -
三方四正指示线
在中宫会显示
三方四正
指示线,点击运限时指示线的指向会动态跟随选中的最小那个运限流动,比如同时选择流年
和流月
,指示线会跟随流月
。 -
强大的动态运限
在
中宫
里,除了显示基本信息和三方四正线以外,还加入了可以调整运限的按钮组,可以非常方便的移动各个维度的运限。 -
简单易用的组件
零配置快速集成到你的页面中,对于集成几乎没有学习成本。你可以根据自己的页面风格自行调整样式,或控制各个元素的显示与隐藏(通过覆盖默认样式)。
集成到页面中的界面如下图所示。你也可以直接访问官方的 紫微派 - 紫微斗数在线排盘 查看效果。
![react-iztro](https://private-user-images.githubusercontent.com/6510425/280036667-2817bb0c-89b5-4f33-ac5c-75481ad33209.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjMzNDg4NTYsIm5iZiI6MTcyMzM0ODU1NiwicGF0aCI6Ii82NTEwNDI1LzI4MDAzNjY2Ny0yODE3YmIwYy04OWI1LTRmMzMtYWM1Yy03NTQ4MWFkMzMyMDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxMSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTFUMDM1NTU2WiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MDk3M2VjMzk1MzdkZjZjODJkNTEwNDM3MWE4ZTA5NjkzYmYwMDQzMDZjN2MwYjVkZGIzYjg5OGExZWE1ZTQ2ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.guVv27d1AtRWthMI_U_XgtnnYsc00wMUsMFMqCHxOLE)
如果你觉得该组件对你有用,希望给个⭐️⭐️鼓励一下。
npm install react-iztro -S
当然你也可以使用 yarn
yarn add react-iztro
import {Iztrolabe} from "react-iztro"
function App() {
return (
<div className="App" style={{ width: 1024, margin: '50px auto', boxShadow: '0 0 25px rgba(0,0,0,0.25)'}}>
<Iztrolabe
birthday="2003-10-12"
birthTime={1}
birthdayType="solar"
gender="male"
horoscopeDate={new Date()} // 新增参数,设置运限日期【可选,默认为当前时间】
horoscopeHour={1} // 新增参数,设置流时时辰的索引【可选,默认会获取 horoscopeDate 时间】
/>
</div>
);
}
export default App;
如果你想将代码克隆到本地查看或者修改代码,可以fork本仓库到你自己的仓库里,然后用以下步骤进行
- 克隆代码
git clone https://github.com/SylarLong/iztro-docs.git
- 安装依赖
npm install
或者
yarn
-
启动
npm run storybook
或者
yarn storybook
-
预览
打开浏览器,输入 http://localhost:6006 即可预览。
如果你想对本程序进行贡献,可以 fork
本仓库到你的仓库里进行改进,完成开发或者修复以后提交 pull request
到本仓库。