Пользовательский интерфейс материала - кнопка внутри шагового шага - PullRequest
Новая
       40

Пользовательский интерфейс материала - кнопка внутри шагового шага

0 голосов
/ 31 марта 2020

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

Вот что я попробовал: 

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
    </StepButton>
    <div style={{ display: "flex", justifyContent: "center" }}>
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </div>
</Step>

Но кажется, что внутри элемента div нельзя. Я получаю ошибки в строке div (например, Предупреждение: получено true для активного не-логического атрибута.)

Затем я попытался поместить значок в тег StepButton: 

<Step key={x.id}>
    <StepButton completed={false} onClick={() => xxx()}>
        {title}
        <IconButton onClick={(e) => show()}>
            <InfoIcon />
        </IconButton>
    </StepButton>
</Step>

Но это также невозможно, потому что кнопки внутри кнопок не разрешены.

Есть ли другой способ использовать интерактивный элемент (например, IconButton) на шаге?

1 Ответ

1 голос
/ 31 марта 2020

Вы можете поместить кнопку внутри StepLabel: 

import { Step, StepLabel, StepContent, Button } from "@material-ui/core";

, расположенной так: 

<Step key={x.id}>
    <StepLabel
        onClick={() => handleStep(x.id)}
        completed={completed}
    >
        {title}
        <Button
            onClick={(e)=>{
            console.log("Button Pressed")}
            }
        >
            {"Button"}
        </Button>
    </StepLabel>
    <StepContent>
        {"Content hidden when not active"}
    </StepContent>
</Step>

Если вы хотите, чтобы кнопка не открывала шаг, вы можете добавить e.stopPropagation()

...