sapui5中通过卡片控制按下事件或导航

问题描述 投票：0回答：2

我正在使用卡片来显示一些数据。我想在sapui5中单击卡控件来调用一些功能。

<f:Card class="sapUiMediumMargin carousalCards" width="360px">
    <f:content>
        <VBox height="370px" justifyContent="SpaceBetween">
            <HBox justifyContent="SpaceBetween">
                <VBox>
                    <Title class="titleWidth" text="{getfileDefaultJSONModel>REFERENCE}" level="H1"/>
                    <Text class="sapMGTSubHdrTxt" text="{getfileDefaultJSONModel>CREATION_DATE}"></Text>
                </VBox>
                <HBox class="checkedIcon">
                    <RadioButton custom:model="getfileDefaultJSONModel" select="fnCreateClone" text="{getfileDefaultJSONModel>ID}" groupName="GroupA" visible="{getfileDefaultJSONModel>RADIO_VISIBLE}"/>
                </HBox>
            </HBox>
            <HBox justifyContent="SpaceBetween" class="largeTileFooter">
                <Text class="sapMTileCntFtrTxt" text="{getfileDefaultJSONModel>USER_ID} {getfileDefaultJSONModel>REFERENCE} Data"></Text>
                <Text class="sapMNCValue Neutral" text="{getfileDefaultJSONModel>JSON_SIZE}"></Text>
            </HBox>
        </VBox>
    </f:content>
</f:Card>
sapui5
2个回答
0
投票

目前

sap.f.Card
没有任何
click
活动。但是，您可以使用浏览器事件：

var card = this.getView().byId("your-card-id");
card.attachBrowserEvent("click", function(event) {
    // handle card click
}, this);
0
投票

更新（2024-10）

自 UI5 1.131 起（提交：

e207a13
），所有 
sap.f.CardBase
控件都支持 
press
事件（当前处于实验阶段） if 卡的 
semanticRole
设置为 
"ListItem"
。

之前的回答

在撰写本文时，

sap.f.Card
不提供任何新闻活动。你可以..

  • 遵循指南并仅使标题可点击。实现 
    sap.f.cards.IHeader
    的控件确实提供 
    press
    事件。
  • 或者利用 
    sap.m.CustomListItem
    和 
    type="Active"
    使卡片内容可点击。

演示

globalThis.onUI5Init = () => sap.ui.require([
  "sap/ui/core/Fragment",
], async Fragment => {
  "use strict";

  const cardContent = `<Title text="Clickable Card" titleStyle="H4" />
    <core:Icon xmlns:core="sap.ui.core"
      src="sap-icon://sap-ui5"
      size="4rem"
      color="#ff7b17"
      class="sapUiTinyMarginBottom"
    />`;

  const newerCard = await Fragment.load({
    definition: `<f:Card
      xmlns:f="sap.f"
      xmlns="sap.m"
      width="18rem"
      press="alert('Card pressed!')"
      semanticRole="ListItem"
      class="sapUiSmallMargin"
    >
      <f:header>
        <cards:Header xmlns:cards="sap.f.cards"
          title="Header"
          statusText="Status"
        />
      </f:header>
      <f:content>
        <FlexBox renderType="Bare" width="100%">
          <HBox
            height="6.5rem"
            width="100%"
            justifyContent="SpaceAround"
            alignItems="Center"
          >${cardContent}</HBox>
        </FlexBox>
      </f:content>
    </f:Card>`,
  });
  newerCard.placeAt("content");

  const previousCard = await Fragment.load({
    definition: `<f:Card xmlns:f="sap.f" width="18rem" class="sapUiSmallMargin">
      <f:header>
        <cards:Header xmlns:cards="sap.f.cards"
          title="Separate Clickable Header"
          statusText="Status"
          press="alert('Header pressed')"
        />
      </f:header>
      <f:content>
        <FlexBox xmlns="sap.m" renderType="Bare" width="100%">
          <CustomListItem type="Active" press="alert('Card pressed')">
            <HBox
              height="6.5rem"
              width="100%"
              justifyContent="SpaceAround"
              alignItems="Center"
            >${cardContent}</HBox>
            <layoutData>
              <FlexItemData minWidth="100%" />
            </layoutData>
          </CustomListItem>
        </FlexBox>
      </f:content>
    </f:Card>`,
  });
  previousCard.placeAt("content");
});
<script id="sap-ui-bootstrap"
  src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core,sap.m,sap.f,sap.ui.unified,sap.ui.layout"
  data-sap-ui-onInit="onUI5Init"
  data-sap-ui-async="true"
  data-sap-ui-compatVersion="edge"
  data-sap-ui-excludeJQueryCompat="true"
  data-sap-ui-xx-waitForTheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.