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

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번째 줄: @@
-<includeonly><onlyinclude><div class="" style="display: inline-block;position: relative;width: 304px;"><div style="border-radius: 2em; height: {{#expr:{{{thick|5}}}*2}}px; background: black; width: 100%;" class="arrow-stick"></div><div style="border-radius: 2em; width: {{{tip-length|48}}}px; height: {{#expr:{{{thick|5}}}*2}}px;    background: #ff0000; rotate: {{#expr: {{#ifeq: {{{tip-direction|up}}}|up|-1 * }}{{#ifeq: {{{direction|right}}}|right|-1 * }}{{{deg|30}}}}}deg; transform-origin:
+<onlyinclude><div class="responsive-arrow" style="display: flex; position: relative;"><div class="arrow-dataset"
-{{#ifeq: {{{direction|right}}}|right|{{#expr:{{{tip-length|48}}} - {{{thick|5}}}}}|{{{thick|5}}}}}px 50%; {{{direction|right}}}: 0;" class="arrow-tip"></div></div></onlyinclude></includeonly>
+data-direction="{{#if:{{{direction|}}}|{{{direction}}}|left}}"
-{{사용자:Cerulean/작업실
+data-thick="{{#if:{{{thick|}}}|{{{thick}}}|5}}"
-|direction=left|tip-direction=up}}<br>
+data-length="{{#if:{{{length|}}}|{{{length}}}}}"
-{{사용자:Cerulean/작업실
+data-color="{{#if:{{{color|}}}|{{{color}}}|black}}"
-|direction=right|tip-direction=up}}<br>
+data-point-direction="{{#if:{{{point-direction|}}}|{{{point-direction}}}|right}}"
-{{사용자:Cerulean/작업실
+data-point-deg="{{#if:{{{point-deg|}}}|{{{point-deg}}}|30}}"
-|direction=left|tip-direction=down}}<br>
+data-point-length="{{#if:{{{point-length|}}}|{{{point-length}}}|48}}"
-{{사용자:Cerulean/작업실
+></div>
-|direction=right|tip-direction=down|tip-length=100|thick=10}}
+<div class="arrow-point" style="border: 1px solid; box-sizing: border-box;"></div>
+<div class="arrow-shaft" style="border: 1px solid;"></div>
+</div></onlyinclude>
+화면 너비에 따라 반응하는 화살표 틀.
+{| class="wikitable"
+|+
+|-
+|
+|{{반응형 화살표|direction=up|point-direction=left|length=}}
+|{{반응형 화살표|direction=up|point-direction=both}}
+|{{반응형 화살표|direction=up}}
+|
+|-
+|{{반응형 화살표|length=100|point-length=|direction=}}
+| colspan="3" rowspan="3" |
+|{{반응형 화살표|direction=right|point-direction=left|length=|thick=2}}
+|-
+|{{반응형 화살표|direction=left|point-direction=both}}
+|{{반응형 화살표|direction=right|point-direction=both|point-length=30|thick=2}}
+|-
+|{{반응형 화살표|direction=left|point-direction=left}}
+|{{반응형 화살표|direction=right|point-direction=right|length=100|thick=1}}
+|-
+|
+|{{반응형 화살표|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=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>