Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Document the default row and string templates #19

Open
orangejulius opened this issue Oct 15, 2021 · 1 comment
Open

Document the default row and string templates #19

orangejulius opened this issue Oct 15, 2021 · 1 comment

Comments

@orangejulius
Copy link
Contributor

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
Copy link
Contributor

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants