[컴포넌트 소개] rx.heading #typography

1. rx.heading이란

rx.heading 컴포넌트는 파이썬의 문자열을 "제목(heading)"으로 표시해줍니다.
렌더링 후에는 기본적으로 <h2> 요소로 바뀝니다.

 

2. 크기조절

rx.heading 또한 rx.text와 마찬가지로 font_size 파라미터로 크기를 조절할 수 있으며,
as_ 파라미터로 <h1>부터 <h6>까지 태그 변환도 가능합니다.

또한 내부적으로 rx.box 컴포넌트와 동일하게 작동하므로,
rx.box에 부여할 수 있는 속성을 동일하게 rx.heading에도 적용할 수 있습니다.

 

3. 특정 라인수를 넘어갈 때 자르고 싶다면?

위의 예시에서 보시다시피
rx.heading에도 (rx.text와 마찬가지로) no_of_lines라는 속성(prop)이 있어서 (noOfLines로 사용해도 됩니다)
긴 제목의 라인 수가 늘어나 레이아웃이 깨지는 것을 방지하기 위해
특정 라인이 넘어갈 때 "..."과 함께 뒷부분을 생략할 수 있습니다.

 

4. 예시코드

import reflex as rx


def index() -> rx.Component:
    return rx.container(
        rx.heading("Modern online and offline payments "
                   "for Africa", mb=5),  # mb == margin_bottom: 5(px)
        rx.text("Paystack helps businesses in Africa "
                "get paid by anyone, anywhere in the world",
                font_size='xl'),
        rx.button("Create a free account",
                  size="lg", color_scheme="green",
                  mt="24px"),  # mt == margin_top: 24px
        max_w="32rem"  # maxWidth
    )


app = rx.App()
app.add_page(index)
app.compile()