react-github-corners
Add a Github corner to your project page, This GitHub corners for @react component. Visit https://uiwjs.github.io/react-github-corners to preview the example effects.
Preview Example: Github | Gitee
npm install --save @uiw/react-github-corners
# Via Yarn:
yarn add @uiw/react-github-cornersUsage
import GitHubCorners from '@uiw/react-github-corners';
function Demo() {
return (
<GitHubCorners
position="left"
href="https://github.com/uiwjs/react-github-corners"
/>
)
}Props
interface GitHubCornersProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
/**
* The link to your project page.
*/
href?: string;
/**
* The width and height of the corner.
* Default: `80`
*/
size?: number;
/**
* The background color of the corner.
* Default: `#151513`
*/
bgColor?: string;
/**
* The Github logo color of the corner.
* Default: `#fff`
*/
color?: string;
/**
* The position of corner.
* Default: `right`
*/
position?: 'left' | 'right';
/**
* It is positioned relative to the initial containing block established.
* Default: `false`
*/
fixed?: boolean;
/**
* Sets the z-order of a positioned element and its descendants or flex items.
*/
zIndex?: number;
}| Property Name | Type | Default Value | Description |
|---|---|---|---|
| href | String | - | The link to your project page. |
| size | String | 80 |
The width and height of the corner. |
| bgColor | String | #151513 |
The background color of the corner. |
| color | String | #fff |
The Github logo color of the corner. |
| position | String | left/right |
The position of corner. |
| fixed | Boolean | false |
It is positioned relative to the initial containing block established. |
| zIndex | Number | - | Sets the z-order of a positioned element and its descendants or flex items. |
Development
Runs the project in development mode.
# Step 1, run first, listen to the component compile and output the .js file
npm run ts:watch
# Step 2, listen for compilation output type .d.ts file
npm run types:watch
# Step 3, development mode, listen to compile preview website instance
npm run doc:devBuilds the app for production to the build folder.
npm run releasedThe build is minified and the filenames include the hashes. Your app is ready to be deployed!
License
Licensed under the MIT License.