@mta162/stencil-review-form
v1.0.2
Published
A customizable review form component built with Stencil.js.
Downloads
1
Readme
Stencil Review Form Component
A customizable review form component built with Stencil.js. The component allows users to add a review with a rating, author name, and comment. It emits events for submission and cancellation of the form.
Features
- Star rating selection
- Author and comment input fields with validation
- Emits events on form submission and cancellation
- Customizable styles using CSS variables
Installation
To install the component, run:
npm install @mta162/stencil-review-formUsage
Basic Usage
To use the component in your project, add the following line to your HTML:
<stencil-review-form formTitle="Your Form Title"></stencil-review-form>Handling Events
Listen to the submitReview and cancelReview events to handle form submissions and cancellations:
<stencil-review-form
onSubmitReview="handleReviewSubmit($event)"
onCancelReview="handleReviewCancel()"
></stencil-review-form>
<script>
function handleReviewSubmit(event) {
console.log('Review submitted:', event.detail);
}
function handleReviewCancel() {
console.log('Review cancelled');
}
</script>Customizing Styles
You can customize the appearance of the component using the following CSS variables:
--primary-color: Primary text color--secondary-color: Secondary text color--success-color: Success color--danger-color: Danger color--background-color: Background color--submit-button-color: Submit button text color--submit-button-background-color: Submit button background color--submit-button-border-color: Submit button border color--cancel-button-color: Cancel button text color--cancel-button-background-color: Cancel button background color--cancel-button-border-color: Cancel button border color--button-border-radius: Button border radius
Example:
review-form {
--primary-color: #FFFFFF;
--secondary-color: #B2B2B2;
--success-color: #1ED760;
--danger-color: #E91429;
--background-color: #121212;
--submit-button-color: #121212;
--submit-button-background-color: #FFFFFF;
--submit-button-border-color: #FFFFFF;
--cancel-button-color: #FFFFFF;
--cancel-button-background-color: #121212;
--cancel-button-border-color: #FFFFFF;
--button-border-radius: 9999px;
}Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Review Form Example</title>
<script type="module" src="./node_modules/@your-username/review-form/dist/review-form/review-form.esm.js"></script>
<style>
review-form {
--button-color: #007bff;
--button-cancel-color: #dc3545;
--border-radius: 5px;
--background-color: #f8f9fa;
--font-color: #212529;
--border-color-success: #28a745;
--border-color-danger: #dc3545;
}
</style>
</head>
<body>
<review-form
title="Add a Review"
onSubmitReview="handleReviewSubmit(event)"
onCancelReview="handleReviewCancel()"
></review-form>
<script>
function handleReviewSubmit(event) {
console.log('Review submitted:', event.detail);
}
function handleReviewCancel() {
console.log('Review cancelled');
}
</script>
</body>
</html>