Oto kod, który poprawnie formatuje opinie naszych klientów przy użyciu Markdown:
import streamlit as st
st.header("Co mówią nasi klienci?")
# Lista z pogrubieniem i kursywą przy użyciu trzech cudzysłowów
st.markdown("""
* Anna: "**Najlepsze** espresso w mieście!"
* Tomasz: "*Klimatyczne* miejsce."
""")
# Podsumowanie z wykorzystaniem kodu emoji
st.markdown("Dziękujemy za wszystkie opinie! :heart:")
Dotarliśmy do ostatniego elementu naszej wizualnej układanki! Masz już piękne nagłówki i świetnie sformatowany tekst. Czasami jednak zdarza się sytuacja wyjątkowa. Użytkownik zrobił coś super (np. zalogował się poprawnie), popełnił błąd (wpisał złą liczbę) albo po prostu chcesz mu dać dobrą radę.
Wrzucenie takiego komunikatu zwykłym tekstem sprawi, że łatwo go przeoczyć. Streamlit ma na to genialne rozwiązanie – cztery gotowe, kolorowe ramki informacyjne, które od razu rzucają się w oczy!
Cztery kolory na każdą okazję
Nie musisz bawić się w ustawianie kolorów tła. Streamlit przygotował cztery dedykowane funkcje, z których każda ma swoje psychologiczne znaczenie:
st.success()– Zielona ramka. Idealna na dobre wiadomości, sukces i komunikaty typu „Udało się!”.st.info()– Niebieska ramka. Świetna na neutralne wskazówki, ciekawostki i dodatkowe informacje.st.warning()– Żółta ramka. Klasyczne ostrzeżenie. Używaj jej, gdy chcesz powiedzieć: „Uwaga, upewnij się, że robisz to dobrze „.st.error()– Czerwona ramka. Alarm! Coś poszło nie tak, wystąpił błąd lub operacja się nie powiodła.
Czas na kod!
Zobacz, jak te cztery ramki wyglądają obok siebie w kodzie:import streamlit as st
st.title("Centrum powiadomień")
st.success("Plik został zaimportowany pomyślnie!")
st.info("Wskazówka: Można przewijać tabelę w prawo.")
st.warning("Twój pakiet próbny kończy się za 3 dni.")
st.error("Błąd połączenia z bazą danych. Spróbuj ponownie.")
Sprytny trik
Domyślnie Streamlit dodaje do każdej ramki pasującą ikonę (np. ptaszek w zielonej, wykrzyknik w czerwonej). Możesz to jednak bardzo łatwo zmienić!
Każda z tych funkcji ma ukrytą supermoc – parametr icon . Możesz tam wpisać dowolne emoji (lub jego krótki kod z poprzedniej lekcji), aby nadać ramce unikalny charakter:
st.success("Twoja kawa jest już gotowa!", icon="☕")
st.info("Dzisiejsze ciasto dnia to szarlotka.", icon="🍰")
Szybkie ćwiczenie dla Ciebie.
Na zakończenie całego Modułu 2. stwórz system powiadomień dla klientów zamawiających online w naszej kawiarni. Użyje zdobytej wiedzy, aby wyświetlić:
1. Niebieską ramkę informacyjną z informacją: „Kawiarnia jest dziś czynna do godziny 21:00.” oraz ikonka zegara (⏰).
2. Zielona ramka sukcesu z informacją: „Kod rabatowy AKTYWNY! Naliczona 15% zniżki.” (dodaj własną ikonkę).
Napisz kod i sprawdź w przeglądarce, jak pięknie prezentują się te kolory. Rozwiązanie jak zwykle pojawi się na początku następnego wpisu.