mirror of
https://github.com/iconify/iconify.git
synced 2024-12-14 22:46:06 +00:00
194 lines
3.8 KiB
Handlebars
194 lines
3.8 KiB
Handlebars
|
<section class='alignment-demo'>
|
||
|
<h1>Alignment (components/alignment-demo.hbs)</h1>
|
||
|
<div>
|
||
|
<p>Icon with correct width/heigh ratio:</p>
|
||
|
<IconifyIcon @icon='dashicons:paperclip' />
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Bad width/height ratio, default alignment (slice = false):</p>
|
||
|
<IconifyIcon @icon='dashicons:paperclip' @width='2em' @height='1em' />
|
||
|
<IconifyIcon @icon='dashicons:paperclip' @width='1em' @height='2em' />
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Slice:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@align='slice'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Slice:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@align='slice'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Left:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@hAlign='left'
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@align='left'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Left with slice:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@hAlign='left'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@align='left'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@align='left,slice'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Right:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@hAlign='right'
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@align='right'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Right with slice:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@hAlign='right'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@align='right'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@align='right,slice'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Top:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@vAlign='top'
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@align='top'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Top with slice:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@vAlign='top'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@align='top'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@align='top,slice'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Bottom:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@vAlign='bottom'
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='1em'
|
||
|
@height='2em'
|
||
|
@align='bottom'
|
||
|
/>
|
||
|
</div>
|
||
|
<div>
|
||
|
<p>Bottom with slice:</p>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@vAlign='bottom'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@align='bottom'
|
||
|
@slice={{true}}
|
||
|
/>
|
||
|
<IconifyIcon
|
||
|
@icon='dashicons:paperclip'
|
||
|
@width='2em'
|
||
|
@height='1em'
|
||
|
@align='bottom,slice'
|
||
|
/>
|
||
|
</div>
|
||
|
</section>
|