Upload
atlassian
View
1.151
Download
2
Embed Size (px)
Citation preview
The Right Tool For the JobUsing AUI for your Atlassian Plugin UI
DIY
The right tools make things easier.
The right tools will also help your Plugin UI.
DIY UI
Silver Bullet UI
Atlassian UI for Atlassian UI
AUI
History of AUI
So what's in AUI now?
Plus keyboard shortcuts,
extra libraries,helper functions,Soy templates,Page Objects
and experimental components!
> make auiOne zip file
Harmonious design with AUI
You want this...
...not this
Extremes aren't required...
...but it should be harmonious
AUI tips
Or AJS.version in a console near you.
Show me the code, already.
Dropdown2
First, the trigger.
<a href="#dwarfers" class="aui-dropdown2-trigger" aria-owns="dwarfers" aria-haspopup="true">Shipmates</a>
Dropdown2
Then, the dropdown:
<div id="dwarfers"
class="aui-dropdown2 aui-style-default">
<ul class="aui-list-truncate">
<li><a href="URI">Lister</a></li>
<li><a href="URI">Rimmer</a></li>
</ul>
</div>
Dropdown2
That's it. You're done. No JS to match up – just include the markup and away you go.
WAI Why ARIA?
Accessible Rich Internet Applications Suite Paves the way for better a11y Excellent way to declare and read state
Keeping up with AUI
Docs, contribution guide, release notes: http://go.atlassian.com/aui
You will also find links to... Demos Sandbox Bitbucket repo Bug tracker
One last thing – swag!