I have several icons that I want to line up at the end of the application. So that when I click on the image, I was transferred to a link. How should I do it?
So far, I have only managed to add this implementation through st.markdown.but they are arranged vertically because I added a new item every time I wrote markdown.
You can create custom components in streamlit using HTML. Maybe you can create a social media component.
Create a file my_component.html
<html>
<head>
<style>
.body {
height: 64px;
}
.parent {
width: 100%;
height: auto;
display: flex;
justify-content: center;
}
.child {
margin: 5px;
height: 32px;
width: 32px;
}
</style>
</head>
<body>
<div class="parent">
<a class = "child" href="https://www.google.com"><img src="https://upload.wikimedia.org/wikipedia/commons/thumb/5/53/Google_%22G%22_Logo.svg/1200px-Google_%22G%22_Logo.svg.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.reddit.com"><img src="https://www.redditinc.com/assets/images/site/reddit-logo.png" alt="alt" style="width:32px;height:32px;"></a>
<a class = "child" href="https://wwww.facebook.com"><img src="https://facebookbrand.com/wp-content/uploads/2019/04/f_logo_RGB-Hex-Blue_512.png?w=512&h=512" alt="alt" style="width:32px;height:32px;"></a>
</div>
</body>
</html>
I've added 3 links to google, reddit,and facebook respectively. Add or edit these to something custom.
In the streamlit file, you can import HTML files as components using the components library. The implementation I'm sharing is a very simplified version.
import streamlit as st
import streamlit.components.v1 as components
HtmlFile = open("my_component.html", 'r', encoding='utf-8')
source_code = HtmlFile.read()
print(source_code)
st.text("Navbar Component")
components.html(source_code)
It's a bit basic but yields something like this.
