streamlit リンクの制御

streamlitでリンクを設置するときは記述方法がいくつかあります。

st.link_buttonでの記述


st.link_button("解説のページはこちら", "https://www.kipure.com/article/450/")

st.markdownでの記述


st.markdown(
    """    
    - [解説のページはこちら](https://www.kipure.com/article/450/)
    """
)

st.markdownは、記載時のバージョンでは、target属性を指定できないため、新しいタブで開きません。

そのため、このページのようなstreamlit app galleryでは、正しく遷移しない可能性があります。

また、class属性も指定できないため、スタイルのカスタマイズもできません。

st.htmlでの記述

st.html('''
<style>
.kipure_btn {
    width: 90%;
    max-width: 300px;
    display: block;
    cursor: pointer;
    text-align: center;
    margin: 0 auto 20px;
    padding: 10px 10px;
    font-size: 14px;
    color: #FFF;
    background-color: #C00;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4);
</style>
<a class="kipure_btn" href="https://www.kipure.com/article/449/" target="_blank">リンクのサンプル</a>
''')