geocodeearth / autocomplete-element

A custom element for use with the Geocode Earth Autocomplete API.
https://geocode.earth
MIT License
8 stars 1 forks source link

Document the default row and string templates #19

Open orangejulius opened 3 years ago

orangejulius commented 3 years ago

Today I was trying to write some new examples of customizing the autocomplete element, and wanted to provide examples that slightly modified either the string or (especially) row templates.

This turns out to be pretty hard, because the default templates are not written in plain HTML, as a custom template would be, but instead directly in a React component.

For the row template, I settled on the following HTML, which is probably close but not quite right:

  <template row>                                                                                                                                                                                            
    <li class="result-item">                                                                                                       
    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"                                                                                                                         
    class="result-item-icon"><path fill-rule="evenodd" d="M5.05 4.05a7 7 0 119.9 9.9L10                                                                                                                     
    18.9l-4.95-4.95a7 7 0 010-9.9zM10 11a2 2 0 100-4 2 2 0 000 4z"                                                                                                                                          
    clip-rule="evenodd"></path></svg>                                                                                                                                                                       
      ${item.feature.properties.label}                                                                                                                                                                      
    </li>                                                                                                                                                                                                   
  </template>        

If its not too difficult, we might want to provide a good starting point for customization in our docs.

missinglink commented 3 years ago

@mxlje can we convert the React code to a template so that it's easier for users to copy->paste it and then make incremental edits?