Skip to content

Appointment-card and Article-card design for HMOS.

License

Notifications You must be signed in to change notification settings

Applib-HarmonyOS/card_model

Repository files navigation

Card Model Library-HarmonyOS

Library developed using JavaScript for HarmonyOS

Watch the video to view how the appointment-card and article-card would be.

CardLibrary.Recording.Video.mp4

Installation

Use the below code to import the Card Component in your entrty/src/main/js/default/pages/index/index.html file

<element name="Card" src="../../../../../../node_modules/CardComponent/Card/index.hml"></element>

Usage

<div class="container">
// for Appointment-Card
    <Card type="appointment-card" name="Sai Sumedh" sub_title="Dental" image="https://lh3.googleusercontent.com/ogw/ADea4I5L0IsuKGGz3Ne1DGm44fm2W3x2zq9vS9kiMlDP3A=s32-c-mo"></Card>
// for Article-Card    
    <Card type="article" name="The developer guide" sub_title="5 days ago" desc="This is a sample article. Please use this library to get awesome article components." likes="300" views="967" btncolor="gray" image="https://static4.depositphotos.com/1004590/372/i/600/depositphotos_3729494-stock-photo-new-paper-article.jpg"></Card>
</div>

Appointment Card

Article Card

Card

It has a prop named type it denotes which type of card should be displayed in the app.

Using different Type of Card with Props

Props for Appointment Card

Parameter Default Description
name null It denotes the name of the doctor for which we have scheduled the appointment
sub_title null Sub_title specifies the a text with doctor's specialization
image null It will be an image of the doctor

Props for Article Card

Parameter Default Description
name null value which specifies name of the article
sub_title null value that specifies the sub_title of a particular article
image null image of an article
desc null description of the article
likes null count of likes for the article
views null count of article views
btncolor null the text we specify here will display the background-color of the Read-More button

Licensed under the Apache License