freelancer-web-app
v0.0.11
Published
Stencil App Starter
Downloads
311
Readme
Freelancer-score web component using Stencil.js
Generate a visually appealing card component showcasing a freelancer's basic bio information with this easy-to-use Stencil.js web component.
Installation
To install the freelancer-score
component in your project, use the following command:
npm install freelancer-score
Usage
Import the freelancer-score
component in your project and use it in your HTML or JSX files.
<!-- In your HTML/JSX file -->
<freelancer-score
bgColor="#345589"
type="minimal"
username="your_freelancer_username"
></freelancer-score>
Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | --------------------------------------------------- | -------- | ----------- |
| bgColor
| bg-color
| Background color of the card | string
| '#345589'
|
| type
| type
| Type of the card layout ('minimal' or custom types) | string
| 'minimal'
or 'card'
|
| username
| username
| Freelancer's username for profile information | string
| undefined
|
Examples
Basic Usage
<!-- Slim and minimal card component -->
<freelancer-score
bgColor="#345589"
type="minimal"
username="john_doe_freelancer"
></freelancer-score>
<!-- Larger card component that flips 180 degrees to show user description. -->
<freelancer-score
bgColor="#7FDBFF"
type="card"
username="jane_smith_freelancer"
></freelancer-score>
Contributing
Contributions are welcome! Feel free to open issues or submit pull requests.
License
This project is licensed under the MIT License - see the LICENSE file for details.
Acknowledgments
Inspired by the need for a simple and customizable freelancer score card component.
- Built with StencilJS by Jack Lyons