Lozenges

Lozenges are used to indicate a selection and can be displayed on their own or within a form field. Lozenges also include a manner to remove selections

Code

API: stable
Example Notes Code
Macaw
Lozenge 

                                                                                      <div class="ace-lozenge"><span>Macaw</span>
                                                                                      </div>
<% ace.Lozenge(Array("text", "Basic Lozenge")) %>

ASP Attributes

Name Description
id Sets ID of the toggle
customclass Adds a custom class
type Sets type of lozenge
closeable Makes lozenge closable
link Sets link location
text Sets the text of the lozenge
Macaw
Closeable lozenge 

                                                                                      <div class="ace-lozenge ace-lozenge-interactive" data-ace-closeable="true"><span>Macaw</span>
                                                                                      </div>

                                                                                  <% ace.Lozenge(Array(_
                                                                                    "text", "Macaw",_
                                                                                    "closeable", "true"_
                                                                                  )) %>
Macaw
Closeable lozenge custom icon text 

                                                                                      <div class="ace-lozenge ace-lozenge-interactive" data-ace-closeable="true" data-ace-closeabletext="Remove Macaw from search results"><span>Macaw</span>
                                                                                      </div>

                                                                                  <% ace.Lozenge(Array(_
                                                                                    "text", "Macaw",_
                                                                                    "closeableText", "Remove Macaw from search results",
                                                                                    "closeable", "true"_
                                                                                  )) %>
Macaw
Hyperlink lozenge 

                                                                                      <div class="ace-lozenge ace-lozenge-interactive"><a href="http://example.com">Macaw</a>
                                                                                      </div>

                                                                                  <% ace.Lozenge(Array(_
                                                                                    "text", "Macaw", _
                                                                                    "link", "http://example.com" _
                                                                                  )) %>
Macaw
Closable lozenge with hyperlink 

                                                                                      <div class="ace-lozenge ace-lozenge-interactive" data-ace-closeable="true"><a href="http://example.com">Macaw</a>
                                                                                      </div>

                                                                                  <% ace.Lozenge(Array(_
                                                                                    "text", "Macaw", _
                                                                                    "link", "http://example.com", _
                                                                                    "closeable", "true" _
                                                                                  )) %>
Open
Closed
Undecided
Lozenge groups enclose sets of Lozenges, adding padding when no other parent element is available. 

                                                                                      <div class="ace-lozenge-group">
                                                                                        <!-- Lozenges go here -->
                                                                                      </div>

                                                                                  <%
                                                                                    ace.LozengeGroup(Array())
                                                                                      ' Lozenges go here
                                                                                    ace.LozengeGroupEnd
                                                                                  %>

Lozenges Attributes

Element Attributes Description
.ace-lozenge data-ace-closeable="true" Makes the lozenge closable.
.ace-lozenge data-ace-closeabletext="text" Adds alternative text for closeable icon control.
.ace-lozenge .ace-lozenge-interactive Used for styling of interactive elements such as clocable and link lozenges
Name Description
customclass Adds a custom class
closeable Makes lozenges closeable. options:[True, Empty]

Javascript

Events

Event Description Example
removeLozenge Fires when Lozenge has been removed 

                                                        document.addEventListener('removeLozenge', function() {});

Optional Methods

Function Arguments Description Example
init $parentEl Initialises all children lozenges of an element 
ACE.Lozenges.init('.parent-selector');
destroy $parentEl Removes all children lozenges of an element 
ACE.Lozenges.destroy('.parent-selector');
remove lozengeId Removes the lozenge element from the DOM 
ACE.Lozenges.remove('#someid');