Difference between revisions of "Widget:Curve"

From Hackerspace ACKspace
Jump to: navigation, search
m (added width and height)
m (added curve condition)
Line 8: Line 8:
  
 
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
 
<nowiki>{{#widget:</nowiki>{{PAGENAME}}<nowiki>
|width=auto
+
|width=100px
|height=auto
+
|height=2em
|direction=up
+
|up
 
}}</nowiki>
 
}}</nowiki>
  
 
This will give the following result:<br/>
 
This will give the following result:<br/>
 
{{#widget:{{PAGENAME}}
 
{{#widget:{{PAGENAME}}
|width=auto
+
|width=100px
|height=auto
+
|height=2em
|direction=up
+
|up
 
}}<br/>
 
}}<br/>
  
 +
For a downward curve, use down; for both, don't use it at all
 
== Copy to your site ==
 
== Copy to your site ==
 
To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.
 
To use this widget on your site, just install [http://www.mediawiki.org/wiki/Extension:Widgets MediaWiki Widgets extension] and copy [{{fullurl:{{FULLPAGENAME}}|action=edit}} full source code] of this page to your wiki as '''{{FULLPAGENAME}}''' article.
Line 25: Line 26:
 
</noinclude><includeonly>
 
</noinclude><includeonly>
 
<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="width:<!--{$width|escape:html|default:auto}-->;height:<!--{$height|escape:html|default:auto}-->;" preserveAspectRatio="none">
 
<svg viewBox="0 0 200 50" xmlns="http://www.w3.org/2000/svg" style="width:<!--{$width|escape:html|default:auto}-->;height:<!--{$height|escape:html|default:auto}-->;" preserveAspectRatio="none">
 +
<!--{if !isset($up)}-->
 
   <path d="M0 0 C 100 0, 100 50, 200 50" stroke="black" fill="transparent"></path>
 
   <path d="M0 0 C 100 0, 100 50, 200 50" stroke="black" fill="transparent"></path>
 +
<!--{if !isset($down)}-->
 
   <path d="M0 50 C 100 50, 100 0, 200 0" stroke="black" fill="transparent"></path>
 
   <path d="M0 50 C 100 50, 100 0, 200 0" stroke="black" fill="transparent"></path>
 +
<!--{/if}-->
 
</svg>
 
</svg>
 
<includeonly>
 
<includeonly>

Revision as of 15:56, 6 April 2018

This widget creates an SVG curve.

Created by xopr

Using this widget

To insert this widget, use the following code:

{{#widget:Curve |width=100px |height=2em |up }}

This will give the following result:

For a downward curve, use down; for both, don't use it at all

Copy to your site

To use this widget on your site, just install MediaWiki Widgets extension and copy full source code of this page to your wiki as Widget:Curve article.