Tab - backup

Β 


Setup

Create New

νƒ­ μ»΄ν¬λ„ŒνŠΈμ˜ κΈ°λ³Έ μ…‹νŒ… 화면은 νƒ­ λͺ©λ‘μ„ κ΄€λ¦¬ν•˜λŠ” Config와 Options 2개의 μ˜μ—­μœΌλ‘œ κ΅¬λΆ„λ˜μ–΄ μžˆλ‹€.

Β 

Β 

Set Config

을 ν΄λ¦­ν•˜λ©΄ Add Tab μ˜μ—­μ΄ ν•˜λ‹¨μ— 좜λ ₯λœλ‹€. νƒ­ 이름과 νƒ€μž…μ„ μ„ νƒν•˜κ³  μ €μž₯ν•˜λ©΄ Config μ˜μ—­μ— λ¦¬μŠ€νŠΈμ—… λœλ‹€. νƒ­ λͺ©λ‘μ—μ„œ 을 ν΄λ¦­ν•˜μ—¬ Update Tab μ˜μ—­μ—μ„œ νƒ­ μ„€μ • λ‚΄μš©μ„ μˆ˜μ • ν•  수 μžˆλ‹€.

Β 

Β 

Type 01. Page

νƒ­ νƒ€μž…μ„ Page둜 μ„ νƒν•˜λ©΄ λ‹€μŒκ³Ό 같은 μ…‹νŒ… μ˜΅μ…˜μ΄ 좜λ ₯λœλ‹€.

  • Tab Page : 미리 μƒμ„±λœ λ‹€λ₯Έ νŽ˜μ΄μ§€μ˜ URL μž…λ ₯ λ˜λŠ” 선택

  • Data Setting : μ—°κ΄€ 데이터 μ„€μ • μ—¬λΆ€ ON/OFF

  • Data Key : μ—°κ΄€ 데이터 ν‚€ μž…λ ₯

  • Data NodeType : μ—°κ΄€ 데이터 NodeType μž…λ ₯ λ˜λŠ” 선택

  • icon

Β 

νƒ­ 클릭 μ‹œ μ—°κ²°λ˜μ–΄ μžˆλŠ” Page 1κ°œκ°€ ν•˜λ‹¨μ— 좜λ ₯λœλ‹€.

Tab Child Type{Page}

Β 

Type02. Component

νƒ­ νƒ€μž…μ„ Component둜 μ„ νƒν•˜λ©΄ λ‹€μŒκ³Ό 같은 μ…‹νŒ… μ˜΅μ…˜μ΄ 좜λ ₯λœλ‹€. (icon μΆ”κ°€)

Β 

νƒ­ 클릭 μ‹œ μ—°κ²°λ˜μ–΄ μžˆλŠ” Component 1κ°œκ°€ ν•˜λ‹¨μ— 좜λ ₯λœλ‹€.

Tab Child Type{Component}

Β 

tip BO Builder > Board Component new

Board μ»΄ν¬λ„ŒνŠΈλŠ” κ²Œμ‹œνŒ λͺ©λ‘κ³Ό 상세 View 2개의 μ»΄ν¬λ„ŒνŠΈλ₯Ό ν•˜λ‚˜λ‘œ λ§Œλ“  것이닀.

Board μ»΄ν¬λ„ŒνŠΈλ„ μ•„λž˜μ™€ 같이 ν•˜λ‚˜μ˜ 탭에 μ—°κ²°ν•˜μ—¬ μ‚¬μš©ν•  수 μžˆλ‹€.

Β 

Β 


Option Detail

νƒ­ μ˜΅μ…˜ 상세 λ‚΄μš©μ€ λ‹€μŒκ³Ό κ°™λ‹€.

Β 

Β 

1. Size

νƒ­ μ‚¬μ΄μ¦ˆλ₯Ό 선택 ν•  수 μžˆλ‹€.(Small, Default, Large)

Β 

Β 

2. Hide Title

μ»΄ν¬λ„ŒνŠΈ Title은 κΈ°λ³Έ μ…‹νŒ… μ˜΅μ…˜μ΄λ‹€. μ˜΅μ…˜ μ˜μ—­μ—μ„œ νƒ­ 타이틀을 λ…ΈμΆœ/λΉ„λ…ΈμΆœλ‘œ μ„€μ • ν•  수 μžˆλ‹€.

Hide Title{OFF}

Β 

3. Tab Position

νƒ­ μœ„μΉ˜λ₯Ό μ„€μ • ν•  수 μžˆλ‹€.(Top, Right, Bottom, Left)

Β 

Β 

4. Tab Type

νƒ­μ˜ μŠ€νƒ€μΌ νƒ€μž…μ„ μ„€μ • ν•  수 μžˆλ‹€.(Line, Card)

Line

Card

Line

Card

Β 

Β 

5. Tab Editable new

μΉ΄λ“œ μœ ν˜• 탭일 경우, νƒ­ μΆ”κ°€ 및 μ‚­μ œ κΈ°λŠ₯을 μ‚¬μš©ν•  수 μžˆλŠ” νƒ­ μ—λ””νŒ… μ˜΅μ…˜μ„ μ§€μ›ν•œλ‹€. - https://ant.design/components/tabs/#components-tabs-demo-editable-card

μΆ”κ°€ μ•„μ΄μ½˜ 을 클릭 ν•˜λ©΄, Add Tab 이 Modal둜 좜λ ₯λœλ‹€.

Β 

Β 

6. Show Icon new (tab 생성할 λ•Œ μΆ”κ°€)

각각의 νƒ­ Name μ•žμ— μ•„μ΄μ½˜μ„ 좜λ ₯ν•˜λŠ” κΈ°λŠ₯이닀. - https://ant.design/components/tabs/#components-tabs-demo-icon

  • Icon Setting Type : μ•„μ΄μ½˜ μ„€μ • νƒ€μž… 선택(Unify, Separate)

    • Select Icon : Unify νƒ€μž…μœΌλ‘œ μ•„μ΄μ½˜μ„ μ„€μ •ν•  경우 좜λ ₯λ˜λŠ” μ•„μ΄μ½˜ μ…€λ ‰νŠΈ μ˜΅μ…˜

    • Enable Separate Tab Icon : Sdparate νƒ€μž…μœΌλ‘œ μ•„μ΄μ½˜ μ„€μ •ν•  경우 탭별 μ•„μ΄μ½˜μ„ μ„€μ •ν•˜λŠ” μ˜μ—­ 좜λ ₯

Β 

tip Icon Setting Type

- unify : μ•„μ΄μ½˜μ„ 1개 선택 ν•  수 있고, μ„ νƒν•œ μ•„μ΄μ½˜μ΄ λͺ¨λ“  탭에 λ™μΌν•˜κ²Œ μ μš©λœλ‹€.

- separate : νƒ­ λͺ©λ‘μ΄ μ„€μ •ν•΄ 놓은 Configλ₯Ό κΈ°μ€€μœΌλ‘œ μžλ™ 좜λ ₯되고, νƒ­ λ³„λ‘œ μ•„μ΄μ½˜ μ…‹νŒ…μ΄ κ°€λŠ₯ν•˜λ‹€.

Β 

Β 

Β 

7. Use Anchor new

λͺ¨λ“  탭을 Tab Child Type{Component} 둜 μ„€μ •ν•˜λ©΄, Anchor κΈ°λŠ₯을 μ‚¬μš© ν•  수 μžˆλ‹€. 탭에 μ—°κ²°λœ μ»΄ν¬λ„ŒνŠΈκ°€ ν•œ νŽ˜μ΄μ§€μ—μ„œ νƒ­ μ •λ ¬ μˆœμ„œμ— λ§žμΆ”μ–΄ λ‚˜μ—΄λ˜κ³ , 각각의 탭은 클릭 μ‹œ μ—°κ²°λœ μ»΄ν¬λ„ŒνŠΈ μœ„μΉ˜λ‘œ μ΄λ™λ˜λŠ” Anchor κΈ°λŠ₯이 μ μš©λœλ‹€.

Β 

Β 

Β