ထႅမ်းပလဵတ်ႉ:Clickable button

ၽိုၼ်ၵႅမ်မိုဝ်း ထႅမ်းပလဵတ်ႉ[တူၺ်း] [ထတ်း] [ပိုၼ်း] [ၸၢင်း]

This template styles a link like a button, using the deprecated mediawiki.ui.button module. This expands the clickable area and tap target for the link.

လွင်ႈၸႂ်ႉတိုဝ်း

All parameters

{{Clickable button|wikilink|display|color=color|url=url|class=class|link=}}

wikilink

Unnamed first parameter; the title of the page being linked. Brackets are not necessary

display (optional)

Optional unnamed second parameter; the text to display. Not needed if the text to display is the wikilink itself

|color= or |class=

Color to display. |color= accepts blue and red, |class= accepts mw-ui-progressive and mw-ui-destructive

|url=

URL to link through the button. If no wikilink/display text is provided, will show the URL, otherwise will show the wikilink/display text

|link=no

Use this parameter set to "no" to display a button without linking to anything

Examples

Wikilinks

{{Clickable button|Main Page}} → Main Page

{{Clickable button|Main Page|Click here to visit the main page}} → Click here to visit the main page

{{Clickable button|Click here|link=no}} → Click here

Colors

{{Clickable button|Main Page}} → Main Page – without defined |color= and |class=, the default is a white button

{{Clickable button|Main Page|color=blue}} → Main Page

{{Clickable button|Main Page|color=red}} → Main Page

{{Clickable button|Main Page|class=mw-ui-progressive}} → Main Page

{{Clickable button|Main Page|class=mw-ui-destructive}} → Main Page

URLs

{{Clickable button|url=https://example.com}} → https://example.com

{{Clickable button|Example|url=https://example.com}} → Example

{{Clickable button|2=Example|url=https://example.com}} → Example

Adding an icon

Adding an icon to a button should be avoided. Don't forget to hide the icon from the accessibility DOM by wrapping it in a span that is aria-hidden="true" so that a screen reader doesn't read it out loud.

<span class="mw-ui-button mw-ui-progressive"><span aria-hidden="true">[[File:OOjs UI icon logo-wikimediaCommons-invert.svg|15px|link=|alt=]]</span>&nbsp;{{int:multimediaviewer-repository-local}}</span>

 More details

Template data

Styles a link like a button, using the mediawiki.ui.button module

Template parameters[ၸတ်းၵၢၼ် ၶေႃႈမုၼ်းထႅမ်းပလဵၵ်ႉ]

This template prefers inline formatting of parameters.

Parameter		ၶေႃႈသပ်းလႅင်း	Type	Status
Link/Label	1	Defines the page to link to, and uses that page's title as the text for the button Example Foobar	Page name	required
Label	2	Defines the text that appears on the button Default the page being linked to	Unknown	suggested
URL	url	Defines a web address for the button to link to Example https://www.example.com	URL	optional
class	class	Defines the visual type of the button Suggested values mw-ui-progressive mw-ui-destructive	String	optional
Custom CSS styling	style	Allows custom CSS styling to be applied to the button Default None Example border: 2px solid red;	String	optional
Category switch	category	Whether or not categories should be on Default yes Example no Auto value 0	Boolean	optional
color	color	Defines the visual type of the button Suggested values blue red	String	optional

တူၺ်းပႃး

• commons:Template:Clickable button, corresponding clickable button at Commons.
• Wikimedia design style guide advice on buttons
• phab:T146923, which dropped support for mw-ui-constructive, the CSS class for green buttons

ၽိုၼ်ၵႅမ်မိုဝ်း တီႈၽၢႆႇၼိူဝ်ၼႆႉ ပဵၼ် ဢၼ် ထွၼ်ဢွၵ်ႇ မႃးတီႈ ထႅမ်းပလဵတ်ႉ:Clickable button/doc။ (ထတ်း | ပိုၼ်း)
ၽူႈမႄးထတ်းၶဝ် ၸၢင်ႈၸၢမ်းတူၺ်းလႆႈ တီႈၼႂ်း ၼႃႈလိၵ်ႈ sandbox (သၢင်ႈ | mirror) လႄႈ testcases (သၢင်ႈ) ၶွင် ထႅမ်းပလဵတ်ႉ ဢၼ်ၼႆႉ လႆႈယူႇ။
ထႅမ်ပိူင်ထၢၼ်ႈ သႂ်ႇၸူးတီႈ ၼႃႈလိၵ်ႈၽႄ /doc ။ ၼႃႈလိၵ်ႈၽႄ ၶွင် ထႅမ်းပလဵတ်ႉ ဢၼ်ၼႆႉ.