Screenshot
Description
The Screenshot component is a flexible tool for showcasing images or videos within different device frames, such as browsers, mobile devices, or tablets. It allows for customization of the frame type, theme, and orientation, making it ideal for presenting user interfaces, websites, or app designs in a visually appealing context.
Installation
bash
sabaccui add screenshot
Usage
Here are examples of how to use the Screenshot component in different configurations:
- Browser screenshot with a dark theme:
Preview
- Mobile screenshot with a light theme in portrait orientation:
Preview
- Tablet screenshot with a transparent theme in landscape orientation:
Preview
Schema
| Field | Type | Description | Default Value |
|---|---|---|---|
url | text | The URL associated with the screenshot (optional, translatable) | - |
image | asset | The image or video to display (required, translatable, filetypes: images, videos) | - |
type | option | The device frame type (required, options: Browser, Mobile, Tablet) | browser |
theme | option | The color theme of the frame (required, options: Dark, Light, Transparent) | dark |
glow | number | Adds a glow effect to the teaser. Specify the strength value. | None |
orientation | option | The orientation of the device frame (required, options: Landscape, Portrait) | - |
Notes
- The component uses dynamic imports to load the appropriate frame component based on the selected type.
- Image dimensions are automatically adjusted based on the selected device type.
- The component supports internationalization with translatable fields for URL and image.
- The URL field is optional and therefore the UI will adjust accordingly if no URL is provided.
Best Practices:
- Choose high-quality images that match the resolution of the selected device type for the best visual result.
- Consider using the transparent theme when you want to seamlessly integrate the screenshot into different background designs.
- Ensure that the orientation selected matches the actual orientation of your screenshot image for a realistic presentation.
- Use the URL field to provide a clickable link to the actual website or app being showcased, enhancing interactivity.