简介
在前端开发中，我们经常需要在展示 UI 组件的时候加入 Github Icon，以便让用户了解这个组件的开源情况。这时，@personare/react-storybook-decorator-github-corner就是一个很好的选择，它可以在 Storybook 的右侧为组件加上 Github Icon，而且还能通过配置修改 Icon 的颜色、大小等属性。
安装
在使用 @personare/react-storybook-decorator-github-corner 之前，你需要先安装 React 和 Storybook。如果你已经有了这些，那么就可以直接通过 npm 安装该包：
npm install @personare/react-storybook-decorator-github-corner
接着，把 github-corner.js 导入到你的 Storybook 配置文件中：
import { withGithubCorner } from '@personare/react-storybook-decorator-github-corner';
addDecorator(withGithubCorner);配置选项
withGithubCorner 函数有三个可选参数，分别是 color、position 和 size。这些参数可以帮助你控制 Icon 的颜色、位置和尺寸。下面是这些参数的详细说明：
color
color 用于设定 Icon 的颜色，可以是任何 CSS 颜色值。默认值是 #70B7FD。
addDecorator(withGithubCorner({ color: '#000', size: '20px' }));position
position 用于设定 Icon 的位置，可以设定在右上角或右下角。默认值是 right。
addDecorator(withGithubCorner({ position: 'bottomRight' }));size
size 用于设定 Icon 的尺寸，可以是任何 CSS 尺寸值。默认值是 80px。
addDecorator(withGithubCorner({ size: '100px' }));示例代码
下面是一个完整的例子，展示了如何使用 @personare/react-storybook-decorator-github-corner：
-- -------------------- ---- -------
------ ----- ---- --------
------ - --------- - ---- -------------------
------ - ---------------- - ---- -----------------------------------------------------
----- ---------- - -- -- -
----
----------
-----------
---------- - --- ----
-------- --------- ----------- ---- -- ------ - --
-
-----
----- ----- --------- -- --- -------
-----------
--
-----
--------------------
-------- ---------------- ------ ------ --
--------------
------- ------ ---- ---- ------ --- --- ---- ---- --- ---- --- --- --- --------------------------------------- ---- --- -------------------- --- --------- - --- ------ --- - - - ----------- --- --------------- --- --- --- ---- --- ------------
--
------
--
----- -------- - -- -------- -- -- -
---------------------------
--
----- ----------- - -- -- -
--
--------------
--------------- --------------
----------- --
---
--
----- ------- - ------------------------ --------
---------------------------------------
------ ---------- -- ---- --
----- -------- -- ---- --
--------- ------------- -- ---- --
----
---------------------- -- -- ------------ ----总结
@personare/react-storybook-decorator-github-corner 可以为组件加上 Github Icon，方便用户了解该组件的开源情况。它提供了颜色、位置和尺寸等选项，可以进行灵活配置。使用 @personare/react-storybook-decorator-github-corner 可以有效提高开发效率和用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067356890c4f7277583c75