Влияние вкладки порядок элементов управления пользовательского интерфейса материала - PullRequest
Новая
       51

Влияние вкладки порядок элементов управления пользовательского интерфейса материала

0 голосов
/ 05 марта 2019

У меня есть приложение, созданное с использованием React и Material UI.В одном представлении можно иметь несколько текстовых полей и несколько кнопок.Теперь, когда у меня есть фокус на одном текстовом поле, а затем я нажимаю Tab , я не могу надежно предвидеть, какой из элементов управления будет следующим, чтобы получить фокус.Я хочу сначала перейти по всем текстовым полям, а затем - по всем кнопкам.

enter image description here

<DialogContent>
    <DialogContentText>
        The username and password that were used are incorrect. Please provide the correct credentials in order to login to the API.
        <Stepper activeStep={this.state.credentialsStep} orientation='vertical'>
            {
                this.steps.map((label, index) => (
                    <Step key={label}>
                        <StepLabel>{label}</StepLabel>
                        <StepContent>
                            <Typography>{this.stepContent[index]}</Typography>
                            {this.stepAction[index]}
                            <Grid container direction='row' className='m-t-26'>
                                <Button color='primary'
                                        onClick={() => {
                                    this.state.credentialsStep === 0 ? this.onClickCancel() : this.onClickBack();
                                }}>
                                    {this.state.credentialsStep === 0 ? 'Cancel' : 'Back'}
                                </Button>
                                <Button variant='contained'
                                        color='primary'
                                        onClick={() => {
                                    this.state.credentialsStep === this.steps.length - 1 ? this.onClickLogin() : this.onClickNext();
                                }}>
                                    {this.state.credentialsStep === this.steps.length - 1 ? 'Login' : 'Next'}
                                </Button>
                            </Grid>
                        </StepContent>
                    </Step>
                ))
            }
        </Stepper>
    </DialogContentText>
</DialogContent>

Есть ли способ установитьпорядок вкладок элементов управления?

Ответы [ 2 ]

0 голосов
/ 05 марта 2019

Вы можете управлять этим с помощью свойства tabIndex, но вам может быть лучше выяснить, как элементы должны отображаться в источнике в том порядке, в котором вы хотите, чтобы фокус был направлен.

Iнашел этот ресурс удобным: https://bitsofco.de/how-and-when-to-use-the-tabindex-attribute/

Когда использовать положительное значение tabindex

Почти нет причин использовать положительное значение для tabindexи это на самом деле считается анти-паттерном.Если вы обнаружите необходимость использовать это значение для изменения порядка, в котором элементы становятся фокусируемыми, вероятно, вам действительно нужно изменить порядок исходных элементов HTML.

Одна из проблем, связанных с явным управлением порядком tabindex, заключается в том, что любые элементы с положительным значением будут располагаться перед любыми другими фокусируемыми элементами, на которые вы явно не указали tabindex.Это означает, что вы можете получить очень запутанный порядок фокусировки, если пропустите какие-либо элементы, которые вы хотели бы видеть в миксе.

Если вы хотите, чтобы кнопка справа находилась перед кнопкой слева вПорядок фокуса, есть различные опции CSS, которые позволят кнопке справа идти первым в исходном порядке.

Если, однако, вы решите, что явное указание tabindex - ваш лучший вариант, вот примерпоказывая, как это сделать для TextField и Button: 

import React from "react";
import ReactDOM from "react-dom";

import TextField from "@material-ui/core/TextField";
import Button from "@material-ui/core/Button";

function App() {
  return (
    <div className="App">
      <TextField label="1" inputProps={{ tabIndex: "1" }} />
      <br />
      <TextField label="3" inputProps={{ tabIndex: "3" }} />
      <br />
      <TextField label="2" inputProps={{ tabIndex: "2" }} />
      <br />
      <Button tabIndex="5">Button 5</Button>
      <Button tabIndex="4">Button 4</Button>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit tabindex

0 голосов
/ 05 марта 2019

Возможно, вы захотите использовать атрибут html tabindex.Это позволяет вам указать порядок, в котором табуляция будет проходить в вашей форме.Вы можете прочитать больше об этом здесь , и я привел небольшой пример ниже, установив индекс вкладки вашей кнопки на # 1 


<StepContent>
  <Typography>{this.stepContent[index]}</Typography>
  {this.stepAction[index]}
  <Grid container direction="row" className="m-t-26">
    <Button
      tabIndex="1" // This will make the button the first tab index for the form. 
      color="primary"
      onClick={() => {
        this.state.credentialsStep === 0
          ? this.onClickCancel()
          : this.onClickBack();
      }}
    >
      {this.state.credentialsStep === 0 ? "Cancel" : "Back"}
    </Button>
    <Button
      variant="contained"
      color="primary"
      onClick={() => {
        this.state.credentialsStep === this.steps.length - 1
          ? this.onClickLogin()
          : this.onClickNext();
      }}
    >
      {this.state.credentialsStep === this.steps.length - 1 ? "Login" : "Next"}
    </Button>
  </Grid>
</StepContent>;
...