# oh-card - Card
The oh-card component provides the basic structure for all other card widgets.
It is providing a default implementation for both title and footer, and requires the content to be defined in the content slot.
Optionally, header and footer can be overwritten by providing the header and footer slots (see Slots).
oh-card also provides full control over its style as well as header, content and footer style (see Style).
# Configuration
# Card
# Action
# actionUrl Action URL TEXT url
URL to navigate to or to send HTTP request to
# actionUrlSameWindow Open in same tab/window BOOLEAN
Open the URL in the same tab/window instead of a new one. This will exit the app.
# actionHttpBody HTTP Body TEXT
Body to send with the request
# actionItem Action Item TEXT item
Item to perform the action on
# actionCommand Action Command TEXT
Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different
# actionCommandAlt Action Toggle Command TEXT
Command to send to the Item when "Toggle Item" is selected as the action, and the Item's state is equal to the command above
# actionOptions Command Options TEXT
Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use value=label format to provide a label different than the option.
# actionRule Scene, Script or Rule TEXT rule
Scene, Script or Rule to run
# actionRuleContext Context TEXT script
Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }.
# actionPage Page TEXT page
Page to navigate to
# actionModal Modal Page or Widget TEXT pagewidget
Page or widget to display in the modal
# actionModalConfig Modal component configuration TEXT props
Configuration (prop values) for the target modal page or widget
# actionPhotos Images to show TEXT
Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML, e.g.- item: ImageItem1
caption: Camera[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view.
# actionPhotoBrowserConfig Photo browser configuration TEXT
Configuration for the photo browser.
Edit in YAML or provide a JSON object, e.g.{ "exposition": false, "type": "popup", "theme": "dark" }
See photo browser parameters (not all are supported).
# actionGroupPopupItem Group Popup Item TEXT item
Group Item whose members to show in a popup
# actionAnalyzerItems Item(s) to Analyze* TEXT item
Start analyzing with the specified (set of) Item(s)
# actionAnalyzerChartType Chart Type TEXT
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
Options:
# actionAnalyzerCoordSystem Initial Coordinate System TEXT
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
Options:
# actionConfirmation Action Confirmation TEXT
Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object { type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" }
# actionFeedback Action Feedback TEXT
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the supported parameters
# actionVariable Variable TEXT
The variable name to set
# actionVariableValue Variable Value TEXT
The value to set the variable to
# actionVariableKey Variable Key TEXT
Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing.
# Tap Hold
# taphold_actionUrl Action URL TEXT url
URL to navigate to or to send HTTP request to
# taphold_actionUrlSameWindow Open in same tab/window BOOLEAN
Open the URL in the same tab/window instead of a new one. This will exit the app.
# taphold_actionHttpBody HTTP Body TEXT
Body to send with the request
# taphold_actionItem Action Item TEXT item
Item to perform the action on
# taphold_actionCommand Action Command TEXT
Command to send to the Item. If "Toogle Item" is selected as the action, only send the command when the state is different
# taphold_actionCommandAlt Action Toggle Command TEXT
Command to send to the Item when "Toggle Item" is selected as the action, and the Item's state is equal to the command above
# taphold_actionOptions Command Options TEXT
Comma-separated list of options; if omitted, retrieve the command options from the Item dynamically. Use value=label format to provide a label different than the option.
# taphold_actionRule Scene, Script or Rule TEXT rule
Scene, Script or Rule to run
# taphold_actionRuleContext Context TEXT script
Object representing the optional context to pass. Edit in YAML or provide a JSON object, e.g. { "param1": "value1", "param2": { "subkey1": "testing", "subkey2": 123 } }.
# taphold_actionPage Page TEXT page
Page to navigate to
# taphold_actionPageTransition Transition Effect TEXT
Use a specific page transition animation
Options:
# taphold_actionModal Modal Page or Widget TEXT pagewidget
Page or widget to display in the modal
# taphold_actionModalConfig Modal component configuration TEXT props
Configuration (prop values) for the target modal page or widget
# taphold_actionPhotos Images to show TEXT
Array of URLs or objects representing the images. Auto-refresh is not supported.
Edit in YAML, e.g.- item: ImageItem1
caption: Camera[ "url1", { "item": "ImageItem1", "caption": "Camera" } ]
Objects are in the photos array format with an additional item property to specify an item to view.
# taphold_actionPhotoBrowserConfig Photo browser configuration TEXT
Configuration for the photo browser.
Edit in YAML or provide a JSON object, e.g.{ "exposition": false, "type": "popup", "theme": "dark" }
See photo browser parameters (not all are supported).
# taphold_actionGroupPopupItem Group Popup Item TEXT item
Group Item whose members to show in a popup
# taphold_actionAnalyzerItems Item(s) to Analyze* TEXT item
Start analyzing with the specified (set of) Item(s)
# taphold_actionAnalyzerChartType Chart Type TEXT
The initial analyzing period - dynamic or a predefined fixed period: day, week, month or year
Options:
# taphold_actionAnalyzerCoordSystem Initial Coordinate System TEXT
The initial coordinate system of the analyzer - time, aggregate or calendar (only time is supported for dynamic periods)
Options:
# taphold_actionConfirmation Action Confirmation TEXT
Shows a dialog or sheet to ask for confirmation before the action is executed. Can either be a text to show in the dialog or a JSON object { type: "dialog", title: "Confirm", text: "Are you sure?" } or { type: "sheet", text: "Confirm", color: "green" }
# taphold_actionFeedback Action Feedback TEXT
Shows a toast popup when the action has been executed. Can either be a text to show or a JSON object including some of the supported parameters
# taphold_actionVariable Variable TEXT
The variable name to set
# taphold_actionVariableValue Variable Value TEXT
The value to set the variable to
# taphold_actionVariableKey Variable Key TEXT
Consider the variable value is an object and set the corresponding deep property within that object using a key syntax. Examples: user.name, user[0].address[1].street, [0], [0].label. The inner property and its parent hierarchy will be created if missing.
# Slots
You need to define either one of these two slots:
content: The default slot for content, which will then be rendered inside af7-card-contentelement.content-root: The slot for content that should be rendered directly inside the card, without any additional wrapping element. If this slot is defined, thecontentslot will be ignored, and you have to implement the handling ofconfig.contentStyleandconfig.contentClassyourself.
Optionally, you can define these slots:
header: The slot for the header content, which will replace the default header.footer: The slot for the footer content, which will replace the default footer.
# Style
oh-card provides full control over the style of itself as well as the header, content and footer.
The card itself can be styled through the style and class config properties,
while the header, content and footer can be styled through the headerStyle, headerClass, contentStyle, contentClass, footerStyle and footerClass properties.
# Example
This card can be created using the following YAML definition:
component: oh-card
config:
title: Title
footer: Footer
style: {} # Card style
class: [] # Card classes
headerStyle: {} # Header style
headerClass: [] # Header classes
contentStyle: {} # Content style
contentClass: [] # Content classes
footerStyle: {} # Footer style
footerClass: [] # Footer classes
slots:
content:
- component: oh-button
config:
text: Content
Without using the oh-card component, the same card can be created by directly using the Framework7 components:
component: f7-card
config:
style: {} # Card style
class: [] # Card classes
slots:
default:
- component: f7-card-header
config:
style: {} # Header style
class: [] # Header classes
slots:
default:
- component: Label
config:
text: Title
- component: f7-card-content
config:
style: {} # Content style
class: [] # Content classes
slots:
default:
- component: oh-button
config:
text: Content
- component: f7-card-footer
config:
style: {} # Footer style
class: [] # Footer classes
slots:
default:
- component: Label
config:
text: Footer