お久しぶりです。
やりたいこと
streamlit上にある程度スタイルされたhtmlを表示したい！
st.html()ではJavascriptが効かないため、スタイルが当たらず悩んでいた。
以下の記事を参考にしたらちゃんとスタイルが効いた！！
感動したので記事を残しておく。
実装
今回は、TailwindをCDNで読み込みます。
templates/top.html
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<h1 class="bg-gradient-to-r from-blue-600 via-green-500 to-indigo-400 text-3xl font-bold text-white">
Hello world!
</h1>
</body>
</html>
main.py
import streamlit as st
import streamlit.components.v1 as stc
with open("templates/top.html", "r", encoding="utf-8") as file:
top_html = file.read()
stc.html(top_html)
ちゃんと表示されたあああ！嬉しいので虹色にしちゃう。
紆余曲折
最初は、st.html()でやろうと思ってたのだけど、公式にある通り、JavaScriptを実行できないので、スタイルが当たらなかった。
st.html content is not iframed. Executing JavaScript is not supported at this time.
components.html()とは？
- HTMLコードを文字列で渡すと、iframe内にHTMLとして表示
- CSSやJavaScriptも含めて、好きなようにHTMLをカスタマイズ可能
-
st.textやst.markdownでは難しかった複雑なレイアウトが可能！ - コンポーネントのサイズもピクセル単位で指定できる
- iframeのスクロールも
scrollingパラメータで制御できる
上の例では、他ファイルからHTMLを読み込んだけど、最低限は以下
# カスタムHTMLコンテンツ
html_content = """
<div style="background-color: #f0f0f0; padding: 20px; border-radius: 10px;">
<button onclick="alert('ボタンがクリックされました！')">クリックしてください</button>
<h2 style="color: #333;">カスタムHTMLコンポーネント</h2>
</div>
"""
# HTMLコンテンツの表示
stc.html(html_content, width=400, height=200)
ちゃんとJavascriptが効いてる〜
まとめ
単純にHTMLを表示するだけならst.htmlでいいけど、スタイル効かせたいときはいいね！