틀:반응형 화살표: 두 판 사이의 차이

큰숲백과, 나무를 보지 말고 큰 숲을 보라.
편집 요약 없음
편집 요약 없음
 
(같은 사용자의 중간 판 2개는 보이지 않습니다)
1번째 줄: 1번째 줄:
<onlyinclude><div class="arrow-test" style="display: flex; position: relative;"><div class="arrow-dataset"
<onlyinclude><div class="responsive-arrow" style="display: flex; position: relative;"><div class="arrow-dataset"
data-direction="{{#if:{{{direction|}}}|{{{direction}}}|left}}"
data-direction="{{#if:{{{direction|}}}|{{{direction}}}|left}}"
data-thick="{{#if:{{{thick|}}}|{{{thick}}}|5}}"
data-thick="{{#if:{{{thick|}}}|{{{thick}}}|5}}"
17번째 줄: 17번째 줄:
|-
|-
|
|
|{{반응형 화살표
|{{반응형 화살표|direction=up|point-direction=left|length=}}
|direction=up|point-direction=left|length=}}
|{{반응형 화살표|direction=up|point-direction=both}}
|{{반응형 화살표
|{{반응형 화살표|direction=up}}
|direction=up|point-direction=both}}
|{{반응형 화살표
|direction=up}}
|
|
|-
|-
|{{반응형 화살표|length=100|point-length=|direction=}}
|{{반응형 화살표|length=100|point-length=|direction=}}
| colspan="3" rowspan="3" |
| colspan="3" rowspan="3" |
|{{반응형 화살표
|{{반응형 화살표|direction=right|point-direction=left|length=|thick=2}}
|direction=
right
|point-direction=left|length=|thick=2}}
|-
|-
|{{반응형 화살표|direction=left|point-direction=both}}
|{{반응형 화살표|direction=left|point-direction=both}}
|{{반응형 화살표|direction=right|point-direction=both|point-length=30}}
|{{반응형 화살표|direction=right|point-direction=both|point-length=30|thick=2}}
|-
|-
|{{반응형 화살표|direction=left|point-direction=left}}
|{{반응형 화살표|direction=left|point-direction=left}}
39번째 줄: 33번째 줄:
|-
|-
|
|
|{{반응형 화살표
|{{반응형 화살표|direction=down|point-direction=right|thick=4}}
|direction=down|point-direction=right|thick=4}}
|{{반응형 화살표|direction=down|point-direction=both}}
|{{반응형 화살표
|{{반응형 화살표|direction=down|point-direction=left|length=100|thick=3}}
|direction=down|point-direction=both}}
|{{반응형 화살표
|direction=down|point-direction=left|length=100|thick=3}}
|
|
|}
|}
잘못된 사용
{{반응형 화살표|direction=down|point-direction=left|length=100px|thick=3px}}
<code><nowiki>{{반응형 화살표|direction=down|point-direction=left|length=100px|thick=3px}}</nowiki></code>
<noinclude>
<noinclude>
<templatedata>
<templatedata>
110번째 줄: 105번째 줄:
"suggested": true
"suggested": true
}
}
}
},
"format": "inline"
}
}
</templatedata>
</templatedata>
</noinclude>
</noinclude>

2025년 8월 7일 (목) 14:03 기준 최신판

화면 너비에 따라 반응하는 화살표 틀.

잘못된 사용

{{반응형 화살표|direction=down|point-direction=left|length=100px|thick=3px}}

설명이 없습니다.

틀 변수[틀데이터 관리]

이 틀은 한 줄로 쓰는 것이 권장됩니다.

변수설명형식상태
directiondirection

화살표 방향

Suggested values
up down left right
기본값
left
알 수 없음제안
thickthick

선 두께

예시
5
숫자제안
lengthlength

선 길이, 비우면 100% 채우기 입니다.

숫자제안
colorcolor

화살표 색상

Suggested values
red #000 #eee
기본값
black
문자열제안
point-directionpoint-direction

화살촉 위치, 진행 방향을 기준으로 화살촉 모양을 지정합니다.

Suggested values
left right both
알 수 없음제안
point-degpoint-deg

화살촉과 화살대의 각도를 지정합니다. 90도 미만만 지정할 수 있습니다.

Suggested values
30 60
예시
30, 60, 88
문자열제안
point-lengthpoint-length

화살촉 길이

기본값
48
예시
48, 5, 10, 20
숫자제안