Footer
브랜드, 내비게이션 그룹, 로케일, 소셜 링크가 있는 사이트 푸터.
Footer는 마케팅·앱 푸터용 복합 레이아웃입니다 — 브랜드, 링크 그룹, 메타 행, 로케일, 소셜 아이콘.
Overview
Machine-readable contract from Component Spec.
component: footerexport: Footerversion: 1attributes: data-refineui=footer
Anatomy
| Part | data-refineui |
|---|---|
| root | footer |
| brand | footer-brand |
| brand_description | footer-brand-description |
| brand_name | footer-brand-name |
| copyright | footer-copyright |
| explore | footer-explore |
| group | footer-group |
| group_label | footer-group-label |
| link | footer-link |
| locale | footer-locale |
| logo | footer-logo |
| meta | footer-meta |
| meta_end | footer-meta-end |
| nav | footer-nav |
| social | footer-social |
States
| Scope | Category | Values |
|---|---|---|
| component | pseudo | focus-visible |
| component | environment | forced-colors, dir |
Focus
| Section | Property | Value |
|---|---|---|
| visual | required | true |
| visual | selector | :focus-visible |
Layout
| Property | Value |
|---|---|
| direction | logical |
| rtl | true |
npm install @refineui/react @refineui/tokensyarn add @refineui/react @refineui/tokenspnpm add @refineui/react @refineui/tokensbun add @refineui/react @refineui/tokens사용법
섹션 제목: “사용법”import { Footer, FooterBrand, FooterNav, FooterGroup, FooterGroupLabel, FooterLink, FooterMeta, FooterCopyright,} from "@refineui/react";
<Footer> <FooterBrand>RefineUI</FooterBrand> <FooterNav> <FooterGroup> <FooterGroupLabel>Product</FooterGroupLabel> <FooterLink href="/components/">Components</FooterLink> </FooterGroup> </FooterNav> <FooterMeta> <FooterCopyright>© Pelagornis</FooterCopyright> </FooterMeta></Footer>구성 요소
섹션 제목: “구성 요소”FooterBrand, FooterNav, FooterGroup, FooterGroupLabel, FooterLink, FooterExplore, FooterSocial, FooterLocale, FooterMeta, FooterMetaEnd, FooterCopyright.