Location>code7788 >text

『Play Streamlit』--Text and Title Components

Popularity：647 ℃/2024-11-07 11:37:27

This post is ready to begin the introduction ofStreamlitThe components of the

StreamlitThere are a lot of components, and the next few posts are intended to be categorized by use, with the most commonly used components in each category.

This time, we start with the simplest components and introduce the text and title related components, which are the following 4 components:

  1. : for displaying normal text content
  2. : Used to display the page's main title
  3. : For displaying first-level headings
  4. : for displaying secondary headings

1. Components

beStreamlit The most basic text display component in the

Its main function is to display ordinary text content with no special formatting or styling.

It is primarily used to display paragraphs, explanatory text, or any text that does not require special emphasis.

Usage scenarios mainly include:

  • Showing the description text of the application
  • Display user-entered or dynamically generated text content
  • Serves as transition text between other components

Both can displaysingle-line textThe program can also be accessed through thetriple quoteto showmultiline text。

import streamlit as st

("This is a plain text using display.")
(
    """This is a multiline text that uses display.
Each line is displayed separately
and maintains the original formatting.""""
)

2. Components

is the component used to display the large title of the page.

It is large and bold, very eye-catching, and is usually located at the top of the page or at the beginning of important content.

The main role of the application is to attract the user's attention and clarify the theme of the application or the core content of the current section.

It is used in a number of scenarios:

  • as the title of the entire application
  • Identify important parts or sections of the application
  • Provide clear navigation instructions at the top of the page

Very easy to use.

("XXX Data Application")

3. Components

is the component used to display the first level headings.

It has a slightly smaller font and bolding than the, but still prominent enough to clearly identify the different parts of the page content.

s main role is to help the user understand the structure of the application and quickly locate the content section of interest.

can be taken asHTMLhit the nail on the headH1The tags look at the main scenarios in which it is used:

  • Divide the application into different blocks or sections
  • Provide headings for specific sections of content
  • Providing Visual Separation on Long Pages

The use andSimilarly, the following example treats it as a title for content segmentation.

import streamlit as st

("Introduction")
("This article introduces Streamlit's basic text presentation component.")

("Methods")
("We used a variety of methods to analyze the data.")

("Results")
("Here are the results of our analysis.")

4. Components

is the component used to display secondary headings.

as opposed to, which is further reduced in font and bolding, but still clearly identifies subsections of the content.

s main role is to further refine the content structure and provide users with a more detailed navigation or content overview, which can be thought of as theHTMLhit the nail on the headH2Tagged to see.

Scenarios for its use:

  • Further division of content subsections under first-level headings
  • Provide headings for specific subsections or paragraphs
  • Use it where it needs to be emphasized but not overly prominent

The following example demonstrates the use of secondary headings:

("Sales Data Analysis")
("Monthly Sales Trend")
("Monthly sales data trends will be displayed here.")

("Annual Sales Trend")
("The trend of sales data for the whole year will be shown here.")

("Product Category Sales")
("Next, we will analyze the sales of different product categories.")

5. Summary

The 4 components described above、、 cap (a poem) do not exist in isolation, they are often used in combination to build hierarchical and logical page layouts.

When used, components are selected based on the content hierarchy, e.g., the

utilization Serves as the beginning of an entire page or application, clarifying the theme and core purpose;

utilization to delineate the main part or section of the page, with each All should represent a relatively separate and complete block of content;

exist Under the to further refine the content and provide headings for specific subsections or paragraphs;

Finally, it is possible to use the to fill in the gaps between the above headings with specific descriptions, explanations, or additional information.

needtake note ofThe thing is, while these text display components are very useful, they should be avoided; too many headings and text can be confusing and disorienting to the user.

Therefore, when using these components, make sure that they actually add value to the page and do not become redundant information.

<Previous Next>