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

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

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

잘못된 사용

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

설명이 없습니다.

틀 변수[틀데이터 관리]
이 틀은 한 줄로 쓰는 것이 권장됩니다.
변수		설명	형식	상태
direction	`direction`	화살표 방향 Suggested values `up` `down` `left` `right` 기본값 left	알 수 없음	제안
thick	`thick`	선 두께 예시 5	숫자	제안
length	`length`	선 길이, 비우면 100% 채우기 입니다.	숫자	제안
color	`color`	화살표 색상 Suggested values `red` `#000` `#eee` 기본값 black	문자열	제안
point-direction	`point-direction`	화살촉 위치, 진행 방향을 기준으로 화살촉 모양을 지정합니다. Suggested values `left` `right` `both`	알 수 없음	제안
point-deg	`point-deg`	화살촉과 화살대의 각도를 지정합니다. 90도 미만만 지정할 수 있습니다. Suggested values `30` `60` 예시 30, 60, 88	문자열	제안
point-length	`point-length`	화살촉 길이 기본값 48 예시 48, 5, 10, 20	숫자	제안

@@ 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-thick="{{#if:{{{thick|}}}|{{{thick}}}|5}}"
 data-length="{{#if:{{{length|}}}|{{{length}}}}}"
 data-color="{{#if:{{{color|}}}|{{{color}}}|black}}"
-data-deg="{{#if:{{{deg|}}}|{{{deg}}}|30}}"
 data-point-direction="{{#if:{{{point-direction|}}}|{{{point-direction}}}|right}}"
 data-point-deg="{{#if:{{{point-deg|}}}|{{{point-deg}}}|30}}"
@@ 18번째 줄: / 17번째 줄: @@
 |-
 |
-|{{사용자:Cerulean/작업실
+|{{반응형 화살표|direction=up|point-direction=left|length=}}
-|direction=up|point-direction=left|length=}}
+|{{반응형 화살표|direction=up|point-direction=both}}
-|{{사용자:Cerulean/작업실
+|{{반응형 화살표|direction=up}}
-|direction=up}}
 |
 |-
-|{{사용자:Cerulean/작업실|length=100|point-length=|direction=}}
+|{{반응형 화살표|length=100|point-length=|direction=}}
-| colspan="2" rowspan="2" |
+| colspan="3" rowspan="3" |
-|{{사용자:Cerulean/작업실
+|{{반응형 화살표|direction=right|point-direction=left|length=|thick=2}}
-|direction=
-right
-|point-direction=left|length=|thick=2}}
 |-
-|{{사용자:Cerulean/작업실
+|{{반응형 화살표|direction=left|point-direction=both}}
-|direction=left|point-direction=
+|{{반응형 화살표|direction=right|point-direction=both|point-length=30|thick=2}}
-left
+|-
-}}
+|{{반응형 화살표|direction=left|point-direction=left}}
-|{{사용자:Cerulean/작업실
+|{{반응형 화살표|direction=right|point-direction=right|length=100|thick=1}}
-|direction=right|point-direction=right|length=100|thick=1}}
 |-
 |
-|{{사용자:Cerulean/작업실
+|{{반응형 화살표|direction=down|point-direction=right|thick=4}}
-|direction=down|point-direction=right|thick=4}}
+|{{반응형 화살표|direction=down|point-direction=both}}
-|{{사용자:Cerulean/작업실
+|{{반응형 화살표|direction=down|point-direction=left|length=100|thick=3}}
-|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>
+<templatedata>
+{
+	"params": {
+		"direction": {
+			"description": "화살표 방향",
+			"suggestedvalues": [
+				"up",
+				"down",
+				"left",
+				"right"
+			],
+			"default": "left",
+			"suggested": true
+		},
+		"thick": {
+			"description": "선 두께",
+			"example": "5",
+			"type": "number",
+			"suggested": true
+		},
+		"length": {
+			"description": "선 길이, 비우면 100% 채우기 입니다.",
+			"type": "number",
+			"suggested": true
+		},
+		"color": {
+			"description": "화살표 색상",
+			"type": "string",
+			"suggestedvalues": [
+				"red",
+				"#000",
+				"#eee"
+			],
+			"default": "black",
+			"suggested": true
+		},
+		"point-direction": {
+			"description": "화살촉 위치, 진행 방향을 기준으로 화살촉 모양을 지정합니다.",
+			"suggestedvalues": [
+				"left",
+				"right",
+				"both"
+			],
+			"suggested": true
+		},
+		"point-deg": {
+			"description": "화살촉과 화살대의 각도를 지정합니다. 90도 미만만 지정할 수 있습니다.",
+			"example": "30, 60, 88",
+			"type": "string",
+			"suggestedvalues": [
+				"30",
+				"60"
+			],
+			"suggested": true
+		},
+		"point-length": {
+			"description": "화살촉 길이",
+			"example": "48, 5, 10, 20",
+			"type": "number",
+			"default": "48",
+			"suggested": true
+		}
+	},
+	"format": "inline"
+}
+</templatedata>
+</noinclude>