Portrait
The Portrait element displays a user or doctor profile image in the Doctor App. This component is used in account-related screens, such as the profile or login details pages. It does not accept input but may trigger user-driven actions like editing or expanding account details.
Properties
| Property | Value | Description |
|---|---|---|
| Type | Portrait | UI component type |
| Group | Visual | Used for non-interactive profile visuals |
| Identifier | N/A | No specific identifier assigned |
| Preview | ✓ | Shows abstract avatar or user image |
| Value | Not user-editable | |
| Mandatory | Not applicable | |
| Error | Not applicable | |
| Min | Not applicable | |
| Max | Not applicable | |
| Read-only | ✓ | Always rendered as non-editable |
| List | Not used in list contexts | |
| Text, Icon | Visual-only | |
| Children | No children allowed | |
| Event | May support click for expand/edit (optional) | |
| Shade | ✓ | Appears with subtle frame/background |
Usage Example
Appears in the Doctor Account profile screen:
<AccountHeader>
<Portrait imageSrc={user.profilePicture} alt="Doctor portrait" />
</AccountHeader>
SDK Integration
This element appears in:
Method: /account/doctor/details
Used when rendering authenticated doctor information. Pulls portrait data from the session.
Example UI Placement
| Level | Reference | Type | Value | Description |
|---|---|---|---|---|
1 | user-icon | Portrait | [Abstract image] | Displays user's portrait |