2
0
mirror of https://github.com/iconify/iconify.git synced 2024-12-13 22:18:24 +00:00
iconify/demo/ember-demo/app/components/alignment-demo.hbs

194 lines
3.8 KiB
Handlebars
Raw Normal View History

<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>