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

틀:반응형 화살표 (편집)

2025년 3월 3일 (월) 15:55 판

12 바이트 추가됨 , 2025년 3월 3일 (월)

편집 요약 없음

시각위키텍스트

Cerulean

관리자

편집

4,193

번

@@ 1번째 줄: / 1번째 줄: @@
-<includeonly><onlyinclude>{{#switch: {{{direction|}}}
+<includeonly><onlyinclude><div class="" style="display: flex;position: relative;
-|right|left|#default = <div class="" style="
+{{#switch: {{{direction|}}}
-display: flex;
+| right|left|#default =
-align-items: {{#switch: {{{tip-direction|}}}|right|#default = {{#ifeq: {{{direction|}}}|right|flex-start|flex-end}}|left={{#ifeq: {{{direction|}}}|right|flex-end|flex-start}}}};
+min-height: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}*sin({{#if:{{{tip-deg|}}}|{{{tip-deg}}}|30}}*pi/180)+{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px;
-position: relative;
 {{#if:{{{length|}}}|width: {{{length}}}px;}}
-min-height: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}*sin({{#if:{{{tip-deg|}}}|{{{tip-deg}}}|30}}*pi/180)+{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px;"><div class="arrow-stick" style="
+| up|down =
+min-width: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}*sin({{#if:{{{tip-deg|}}}|{{{tip-deg}}}|30}}*pi/180)+{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px;
+height: {{#if:{{{length|}}}|{{{length}}}|100}}px;
+}}{{#switch: {{{direction|}}}
+|left|#default=
+align-items: {{#switch: {{{tip-direction|}}}|right|#default = flex-end|left=flex-start}};
+|right=
+align-items: {{#switch: {{{tip-direction|}}}|right|#default = flex-start|left=flex-end}};
+|up=
+justify-content: {{#switch: {{{tip-direction|}}}|right|#default = flex-start|left=flex-end}};
+|down=
+justify-content: {{#switch: {{{tip-direction|}}}|right|#default = flex-end|left=flex-start}};
+}}"><div class="arrow-shaft" style="background: {{#if:{{{color|}}}|{{{color}}}|black}}; border-radius: 100px;
+{{#switch: {{{direction|}}}
+|right|left|#default=
 width: 100%; height: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px);
-background: {{#if:{{{color|}}}|{{{color}}}|black}};
+|up|down=
-border-radius: 100px;"></div><div class="arrow-tip" style="
+width: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px); height: 100%;
-width: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}px; height: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px);
+}}"></div><div class="arrow-tip" style="
 background:  {{#if:{{{color|}}}|{{{color}}}|black}};
 border-radius: 100px;
+width: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}px; height: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px);
+{{#switch: {{{direction|}}}
+|right =
 rotate: calc({{#ifeq: {{{tip-direction|}}}|left|+|-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}deg);
-transform-origin: {{#expr: {{#ifeq: {{{direction|}}}|right|{{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - }}{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
+transform-origin: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - {{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
-{{#if:||{{{direction|}}}}}: 0;"></div></div>|up|down = <div class="" style="
+right: 0;
-display: flex;
+|left|#default =
-justify-content: {{#switch: {{{tip-direction|}}}|right|#default = {{#ifeq: {{{direction|}}}|down|flex-end|flex-start}}|left={{#ifeq: {{{direction|}}}|up|flex-end|flex-start}}}};
+rotate: calc({{#ifeq: {{{tip-direction|}}}|left|+|-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}deg);
-position: relative;
+transform-origin: {{#if:{{{thick|}}}|{{{thick}}}|5}}px 50%;
-height: {{#if:{{{length|}}}|{{{length}}}|100}}px;
+left: 0;
-min-width: {{#expr: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}*sin({{#if:{{{tip-deg|}}}|{{{tip-deg}}}|30}}*pi/180)+{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px;"><div class="arrow-stick" style="
+|up=
-border-radius: 100px;
+rotate: {{#expr: {{#ifeq: {{{tip-direction|}}}|left|-90+|+90-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}}}deg;
-background: {{#if:{{{color|}}}|{{{color}}}|black}};
+transform-origin: {{#expr: {{#ifeq: {{{tip-direction|}}}|left|{{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - }}{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
-width: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px); height: 100%;"></div><div class="arrow-tip" style="
+top: 0;
-border-radius: 100px;
+|down=
-width: {{#if:{{{tip-length|}}}|{{{tip-length}}}|48}}px; height: calc({{#if:{{{thick|}}}|{{{thick}}}|5}}*2px);
-background: {{#if:{{{color|}}}|{{{color}}}|black}};
 rotate: {{#expr: {{#ifeq: {{{tip-direction|}}}|left|-90+|+90-}}{{#if:{{{deg|}}}|{{{deg}}}|30}}}}deg;
-transform-origin: {{#expr: {{#switch: {{{direction|}}}
+transform-origin: {{#expr: {{#ifeq: {{{tip-direction|}}}|right|{{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - }}{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
-|up|={{#ifeq:{{{tip-direction|}}}|left|{{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - }}
+bottom: 0;
-|down={{#ifeq:{{{tip-direction|}}}|right|{{#if:{{{tip-length|}}}|{{{tip-length}}}|48}} - }}
+}}"></div></div></onlyinclude></includeonly>
-}}{{#if:{{{thick|}}}|{{{thick}}}|5}}}}px 50%;
-{{#switch:{{{direction|}}}|up=top|down=bottom}}: 0;"></div></div>}}</onlyinclude></includeonly>
 화면 너비에 따라 반응하는 화살표 틀.
 {| class="wikitable"