将带有链接的图片排列成一行 streamlit

Question

我有几个图标要排列在应用程序的末尾。以至于当我点击图片的时候，我被调到了一个link。我应该怎么做？

到目前为止，我只是通过st.markdown.but添加了这个实现，它们是垂直排列的，因为我每次写 markdown 时都会添加一个新项目。

Answer 1

您可以使用 HTML 在 streamlit 中创建自定义组件。也许您可以创建一个社交媒体组件。

创建文件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>

我添加了 3 个链接，分别指向 google、reddit 和 facebook。添加或编辑这些自定义内容。

在 streamlit 文件中，您可以使用组件库将 HTML 文件导入为组件。我分享的实现是一个非常简化的版本。

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)

它有点基础，但会产生类似这样的结果。

将带有链接的图片排列成一行 streamlit

Arrange pictures with links in a row streamlit

python

streamlit