Estoy usando un menú desplegable básico en Ember y en la lista, una vez que seleccionamos el elemento en la lista de contenido, quiero resaltar el elemento seleccionado. Me gustaría saber si puedo usar un simple [aria-current] & [aria-selected] en CSS para que esto suceda.
archivo hb:
{{#each pagelist as |page|}} <li class=" dropdown-class" {{action "getAllPages" page dd.actions}}> <p {{page.name}}</p> </li> {{/each}}Creo que la forma más rápida de resaltar "Algo seleccionado" sería,
(usando ember-source 3.25+) y: https://github.com/NullVoxPopuli/ember-functions-as-helper-polyfill/ (aterrizando en ember-source 4.5~ish, polyfilled para 3.25+)
// app/components/my-component.js import Component from '@glimmer/component'; import { tracked } from '@glimmer/tracking'; export default class MyComponent extends Component { @tracked selectedIndex; select = (index) => this.selectedIndex = index; isSelected = (index) => this.selectedIndex === index; } {{!-- app/component/my-component.hbs --}} {{!-- where does pagelist come from? - let's assume it's passed in --}} <ul> {{#each @pagelist as |page index|}} <li class="dropdown-class {{if (this.isSelected index) 'highlighted'}}" {{on "click" (fn this.select index)}} > <p>{{page.name}}</p> </li> {{/each}} </ul> Tenga en cuenta, sin embargo, que es una violación de accesibilidad hacer clic en <li> (y ember-template-lint le daría un error), por lo que probablemente querrá un botón en el li en su lugar:
<li class="dropdown-class {{if (this.isSelected index) 'highlighted'}}"> <button type="button" {{on "click" (fn this.select index)}}> {{page.name}} <button> </li>