-1

I have some pages with a structure like the below:

Page 1:

Component A: question 1 question 2

Component B: question 3 question 4

Component C: question 5 question 6

Page 2:

Component A: question 1 question 2

Component B: (use flex-direction: column-reverse; to revert order question) question 4 question 3

Component C: (use flex-direction: column-reverse; to revert order question) question 6 question 5

How to tabindex work same behavior in 2 pages(top to down and left to right)?

simple example: https://stackblitz.com/edit/angular-ivy-ra1jtd?file=src%2Fapp%2Fapp.component.html,src%2Fapp%2Fapp.component.css

Park
  • 143
  • 1
  • 12
  • can you set a stackblitz demo? – debugger Aug 19 '22 at 05:58
  • there is nothing in your stackblitz link. It's completely a new project. Set an example with your components. – debugger Aug 19 '22 at 06:21
  • @debugger please recheck, I have created 2 button with CSS,
    .button-wrapper { display: flex; flex-direction: row-reverse; }     – Park Aug 19 '22 at 06:24
  • So what do you basically want? What you have to do with the buttons? – debugger Aug 19 '22 at 06:26
  • Button, link, input, dropdown...., In the example, when you tab it will focus to left button first and then the second tab, it will focus to the right button(I expect right first), because I reorder button by CSS. And the component reuse on some pages, and the difference between just use CSS to reorder elements in components. I want tabindex behavior correct on the page with CSS reorder element of component – Park Aug 19 '22 at 06:41

1 Answers1

0

You can use the tabindex attribute on the question components

Component HTML

<div [class.reversed]="isRevesed">
 <input type="text" placeholder="question 1" [tabindex]="getTapIndex(0)">
 <input type="text" placeholder="question 2" [tabindex]="getTapIndex(1)">
<div>

Component TS

@Input() isRevesed:boolean = false;
indexes:number[]=[1,2]
public getTapIndex(index:number):number {
  return (this.isRevesed) ? this.indexes[this.indexes.length - (index + 1)] : this.indexes[index];
}

of course can be made a lot cleaner, if we knew a bit more about your concreate implementation. But i hope the idea makes sense

Bjarked
  • 55
  • 5