I'm starting from scratch with the standard Ionic 5 Tabs Starter template and the large title block from the docs but above my title block I can the the blured content from below. Is this the correct behavior?
const Tab2: React.FC = () => {
return (
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonHeader collapse="condense">
<IonToolbar>
<IonTitle size="large">Settings</IonTitle>
</IonToolbar>
<IonToolbar>
<IonSearchbar></IonSearchbar>
</IonToolbar>
</IonHeader>
<ExploreContainer name="Tab 3 page" />
</IonContent>
</IonPage>
);
};
after scrolling down the second header is correct:
Ok I found the reason for this issue. It was my fault to duplicate the content. If I add normal cards inside the content section the behavior is correct.
remove the addition header
<IonPage>
<IonHeader translucent>
<IonToolbar>
<IonTitle>Settings</IonTitle>
</IonToolbar>
</IonHeader>
<IonContent fullscreen>
<IonToolbar>
<IonSearchbar></IonSearchbar>
</IonToolbar>
<ExploreContainer name="Tab 3 page" />
</IonContent>
</IonPage>
Related
My current bootstrap and vue versions:
"bootstrap": "^5.2.3", "bootstrap-icons": "^1.10.3", "bootstrap-vue": "^2.23.1", "jquery": "^3.6.3", "popper.js": "^1.16.1", "vue": "^3.2.47",
My code:
<template>
<div>
<b-card no-body>
<b-tabs card>
<b-tab title="Tab 1" active>
<b-card-text>Tab contents 1</b-card-text>
</b-tab>
<b-tab title="Tab 2">
<b-card-text>Tab contents 2</b-card-text>
</b-tab>
</b-tabs>
</b-card>
</div>
</template>
Hope everyone can help me. Thank you very much.
It just shows up like this:
enter image description here
In Ionic-React how to create a carousel with ionic slides and want to use it inside the IonList, so the image can be a thumbnail or avatar. I tried changing the CSS but with no luck and also autoplay is not working.
Want to use it purely in ionic so that it can be accessed on mobile as well.
const slideOptsOne = {
initialSlide: 0,
slidesPerView: 1,
autoplay: true
};
<IonList>
<IonItem>
<IonSlides pager={true} options={slideOptsOne}>
<IonSlide>
<IonThumbnail slot="start">
<img src="image source" className="divSlide"/>
</IonThumbnail>
</IonSlide>
<IonSlide>
<IonThumbnail slot="start">
<img src="image source" />
</IonThumbnail>
</IonSlide>
</IonSlides>
<IonLabel>
<h5>Finn</h5>
<h6>I'm a big deal</h6>
<p>Listen, I've had a pretty messed up day...</p>
</IonLabel>
<IonLabel>
<p>Finn</p>
<p>I'm a big deal</p>
</IonLabel>
</IonItem>
<IonItem>
<IonSlides pager={true} options={slideOptsOne}>
<IonSlide>
<IonThumbnail slot="start">
<img src="image source" className="divSlide"/>
</IonThumbnail>
</IonSlide>
<IonSlide>
<IonThumbnail slot="start">
<img src="image source" />
</IonThumbnail>
</IonSlide>
</IonSlides>
<IonLabel>
<h5>Han</h5>
<h6>Look, kid...</h6>
<p>I've got enough on my plate as it is, and I...</p>
</IonLabel>
<IonLabel>
<p>Finn</p>
<p>I'm a big deal</p>
</IonLabel>
<IonLabel>
<h5>Han</h5>
<h6>Look, kid...</h6>
<p>I've got enough on my plate as it is, and I...</p>
</IonLabel>
</IonItem>
</IonList>
The IonItem format is somewhat fixed. If you want to use it, I would suggest changing your approach to the following:
<IonList>
<IonItem>
<IonThumbnail slot="start">
<IonSlides options={slideOptsOne}>
<IonSlide>
<IonImg alt="logo" src="..." />
</IonSlide>
<IonSlide>
<IonImg alt="logo" src="..." />
</IonSlide>
</IonSlides>
</IonThumbnail>
<IonLabel>
<p>Finn</p>
<p>I'm a big deal</p>
</IonLabel>
</IonItem>
<IonItem>
...
</IonItem>
</IonList>
As the title states, I would like to make out of an input a clickable hyperlink.
Code:
<Label text="Stackoverflow" />
<Input enabled="true" editable="false" name="Stackoverflow" value="Example" />
Issue: I want to display Example in the input as value, however, when clicking on the Example - to take you to stackoverflow.com.
Question: How to make it possible?
Without knowing what the use of the links are, generally, sap.m.InputBase controls can contain links within the value state message (Since 1.78).
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/Fragment"
], Fragment => Fragment.load({
definition: `<Input xmlns="sap.m"
width="12rem"
valueState="Information"
placeholder="Input with links"
class="sapUiTinyMargin">
<formattedValueStateText>
<FormattedText htmlText="See %%0 and %%1.">
<controls>
<Link text="Link 1" press="alert('Link 1 clicked!')" />
<Link text="Link 2" press="alert('Link 2 clicked!')" />
</controls>
</FormattedText>
</formattedValueStateText>
</Input>`,
}).then(control => control.placeAt("content"))));
<script id="sap-ui-bootstrap"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-async="true"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatversion="edge"
data-sap-ui-excludejquerycompat="true"
data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody"></body>
Even if a link or button would be the better solution, here is my suggestion:
XML with custom attribute "url"
<Input enabled="true" editable="false" id="idInputStack" name="Stackoverflow" value="Example">
<customData>
<core:CustomData key="url" value="https://www.stackoverflow.com" writeToDom="true" />
</customData>
</Input>
Controller:
var oInput = this.getView().byId("idInputStack");
oInput.addEventDelegate({
onclick: function() {
document.location.href = oInput.data("url"); //get custom attribute url
}
})
First we would provide an id to the Input control so that we could refer to the same from the controller.
<Input enabled="true" editable="false" name="Stackoverflow" value="Example" id="myInputLinkId"/>
Now we could add the typical user click event to the Input field by attaching a Browser event to the same and place it in the onInit() hook method so that it is always accessible.
onInit: function () {
this.getView().byId("myInputLinkId").attachBrowserEvent('click',function(){ window.open("https://stackoverflow.com/");});
}
I am using Ionic 4 React and trying to make a simple chat application. When the user loads the chat page, I'd like to automatically start on the bottom of the page. What is the simplest way to do this?
Here is the code I have:
<IonPage>
{/* Header */}
<IonHeader>
<IonToolbar>
<IonButtons slot="start">
<IonButton onClick={() => {
setCurrentConversationId('')
setState('home');
}}
fill="clear" className="back-button" shape="round" size="default">
<IonIcon slot="icon-only" icon={arrowBack} />
</IonButton>
</IonButtons>
<IonTitle>Chat</IonTitle>
</IonToolbar>
</IonHeader>
{/* Content */}
<IonContent>
{Object.values(messages).map((el, idx) =>
printMessage(el, idx)
)}
</IonContent>
</IonPage>
You can use .scrollToBottom() when loading of content is done. It's a method of ion-content.
I have an sap.m.Select control for a list of countries and I need to put flag near everyone. How can I do it? In XML, if it's possible.
Here is my XML code:
<m:Label text="{i18n>COUNTRY}" />
<m:Select width="100px"
fieldWidth="60%"
class="xcuiInputNoMargin"
enabled="{Edit>/EditOn}"
items="{countryList>/}"
>
<core:Item
key="{countryList>Country}"
text="{countryList>Country} - {countryList>Name}"
/>
</m:Select>
The sap.m.Select Object is restricted to display text (or Like #Jasper_07 said) icon only.
I think that the best solution for your problem is to use another object instead of your select. You can use Select Dialog and put inside whatever you want, like listItem with image.
This is an example:
<SelectDialog
noDataText="No Products Found"
title="Select Product"
search="handleSearch"
confirm="handleClose"
close="handleClose"
items="{
path: '/ProductCollection'
}" >
<StandardListItem
title="{Name}"
description="{ProductId}"
icon="{ProductPicUrl}"
iconDensityAware="false"
iconInset="false"
type="Active" />
</SelectDialog>
see link bellow
As of UI5 version 1.62, the following controls support displaying the icon on the left side.
sap.m.Select
sap.m.SelectList
And other controls based on the above mentioned ones, such as sap.m.ComboBox.
Here is an example:
sap.ui.getCore().attachInit(() => sap.ui.require([
"sap/ui/core/mvc/XMLView",
], XMLView => XMLView.create({
definition: `<mvc:View xmlns:mvc="sap.ui.core.mvc" height="100%">
<Select xmlns="sap.m" xmlns:core="sap.ui.core" class="sapUiTinyMargin">
<core:ListItem text="Paper plane" icon="sap-icon://paper-plane" />
<core:ListItem text="Stop Watch" icon="sap-icon://fob-watch" />
<core:ListItem text="Umbrella" icon="sap-icon://umbrella" />
</Select>
</mvc:View>`
}).then(view => view.placeAt("content"))));
<script id="sap-ui-bootstrap"
src="https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m"
data-sap-ui-preload="async"
data-sap-ui-async="true"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatversion="edge"
data-sap-ui-xx-waitfortheme="true"
data-sap-ui-xx-xml-processing="sequential"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>
Keep in mind to use sap.ui.ListItem as an aggregation child in this case, instead of sap.ui.core.Item.
Limitation
Currently, the icon property only allows resource paths from "sap-icon://*". I.e. images, that are not icons such as country flags, are not possible. A possible workaround would be to make use of emoji flags as additionalText.
Otherwise, I'd recommend to look for alternative controls as shmoolki suggested.
from the documentation of sap.m.Select
The URI to the icon that will be displayed only when using the
IconOnly type
seems limiting, but try
<m:Select
type="sap.m.SelectType.IconOnly"
icon="sap-icon://cart">
</m:Select>