Template:Ink chip: Difference between revisions

Latest revision as of 15:51, 12 December 2024

This template displays links to ink color pages as visually styled chips.

Usage

To display an ink chip, use the following syntax:

{{Ink chip|Violet}}

Violet

Ink chips can be included inline within a paragraph using {{Ink chip|Yellow}} to produce a Yellow chip. When used this way, they appear smaller to maintain the article's visual flow.

Advanced attributes

To display a custom label for the chip, use the optional label attribute:

{{Ink chip|Fluorescent Orange|label=Fluo. Orange}}

Fluo. Orange

Error Handling

If the specified page does not exist, the chip will display without a color background and include a red link:

{{Ink chip|Huckleberry}}

Huckleberry

@@ Line 1: / Line 1: @@
 <noinclude>
-A template to display ink colors as [https://m3.material.io/components/chips/overview chips].
+This template displays links to ink color pages as visually styled [https://m3.material.io/components/chips/overview chips].
-== Usage ==
+==Usage==
+To display an ink chip, use the following syntax:
 <pre>
-{{Color chip|Violet}}
+{{Ink chip|Violet}}
 </pre>
-{{Color chip|Violet}}
+<div>{{Ink chip|Violet}}</div>
+Ink chips can be included inline within a paragraph using <code><nowiki>{{Ink chip|Yellow}}</nowiki></code> to produce a {{Ink chip|Yellow}} chip. When used this way, they appear smaller to maintain the article's visual flow.
-=== Advanced attributes ===
-Sometimes you will need the chip to point to a link other than the title, you can use that buy adding the ''link'' attribute:
+===Advanced attributes===
+To display a custom label for the chip, use the optional <code>label</code> attribute:
 <pre>
-{{Color chip|Yellow|link=Violet}}
+{{Ink chip|Fluorescent Orange|label=Fluo. Orange}}
 </pre>
-{{Color chip|Yellow|link=Violet}}
+<div>{{Ink chip|Fluorescent Orange|label=Fluo. Orange}}</div>
-=== Advanced attributes ===
-If a chip is requested for a page that does not exist, it will be shown as a chip but with no color background and a red link.
+==Error Handling==
+If the specified page does not exist, the chip will display without a color background and include a red link:
 <pre>
-{{Color chip|Huckleberry}}
+{{Ink chip|Huckleberry}}
 </pre>
-{{Color chip|Huckleberry}}
+<div>{{Ink chip|Huckleberry}}</div>
-</noinclude><includeonly><!--
-{{#ifexist:{{{1}}}|<span class="chip color-chip text-{{#ifexpr:{{#rmatch:{{#invoke:Color|hexToCielch|{{#invoke:Color|rgbTripletToHex|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$1|}}|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$2|}}|{{#rmatch:{{#show: {{{1}}} |? Has rgb#}}|/^([0-9]{1,3}),([0-9]{1,3}),([0-9]{1,3})$/|$3|}}}}}}|/^([0-9]{1,3})/|$1}}>75|black|white}}" style="background:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);">[[{{{link|{{{1|}}}}}}|{{{1|}}}]]</span>|<span class="chip color-chip">[[{{{link|{{{1|}}}}}}|{{{1|}}}]]</span>}}
- -->{{#ifexist:{{{1}}}|<span class="chip color-chip text-black" style="background:rgba({{#show: {{{1}}} |? Has rgb#}},1);border-color:rgba({{#show: {{{1}}} |? Has rgb#}},1);">[[{{{link|{{{1|}}}}}}|{{{1|}}}]]</span>|<span class="chip color-chip">[[{{{link|{{{1|}}}}}}|{{{1|}}}]]</span>}}</includeonly>
+</noinclude><includeonly>{{#ifexist:{{{1}}}|<span class="chip color-chip text-{{#ifexpr:{{#invoke:Color|csvrgbToLum|{{#show:{{{1}}}|?Has rgb#}}}}>75|black|white}}" style="background:rgba({{#show:{{{1}}}|?Has rgb#}},1);border-color:rgba({{#show:{{{1}}}|?Has rgb#}},1);">[[{{{1|}}}|{{{label|{{{1|}}}}}}]]</span>|<span class="chip color-chip">[[{{{1|}}}|{{{label|{{{1|}}}}}}]]</span>}}</includeonly>