У меня есть колода карт, в которую будут добавлены карты динамически. И это должно быть с горизонтальной прокруткой.
Я хочу, чтобы карты, добавляемые в колоду карт, имели фиксированный размер, а колода карт должна иметь горизонтальную прокрутку по мере увеличения количества карт внутри колоды карт.
Это мой код CardDeck. При нажатии кнопки «плюс» в колоду карт добавляется карта.
<CardDeck
style={{
display: "flex",
flexDirection: "row",
justifyContent: "center",
width: "200em",
overflowX: "auto",
flexWrap: "nowrap"
}}
>
{this.state.vehicleDetailsArr.length > 0 &&
this.state.vehicleDetailsArr.map(data => (
<Card style={{ flex: 1 }}>
<CardHeader tag="h6">Vehicle</CardHeader>
<CardBody>
<Row>
<Col>
<Downshift id="downshift-simple">
{({
getInputProps,
getItemProps,
getLabelProps,
getMenuProps,
highlightedIndex,
inputValue,
isOpen,
selectedItem
}) => {
const {
onBlur,
onFocus,
...inputProps
} = getInputProps({
placeholder: "Search for a brand"
});
return (
<div>
{renderInput({
fullWidth: true,
label: "Car Make",
InputLabelProps: getLabelProps({
shrink: true
}),
InputProps: { onBlur, onFocus },
inputProps
})}
<div {...getMenuProps()}>
{isOpen ? (
<Paper square>
{getSuggestions(inputValue).map(
(suggestion, index) =>
renderSuggestion({
suggestion,
index,
itemProps: getItemProps({
item: suggestion.label
}),
highlightedIndex,
selectedItem
})
)}
</Paper>
) : null}
</div>
</div>
);
}}
</Downshift>
</Col>
</Row>
<Row>
<Col>
<TextField
id="vehicleDetail.carModel"
name="vehicleDetail.carModel"
label="Model"
placeholder="Car Model"
value={data.carModel}
onChange={this.handleTextFieldChange}
margin="normal"
/>
</Col>
</Row>
<br />
<Row>
<Col>
<Button
size="Sm"
outline
color="secondary"
onClick={this.handleColorPickerClick}
>
<i class="fas fa-palette" />
</Button>
<div>
{data.toggleColorPalette && (
<CompactPicker color={data.carColor} />
)}
</div>
</Col>
</Row>
<Row>
<Col>
<TextField
id="vehicleDetail.licensePlateNum"
name="vehicleDetail.licensePlateNum"
label="License plate number"
value={data.carLicensePlateNum}
onChange={this.handleTextFieldChange}
margin="normal"
/>
</Col>
</Row>
</CardBody>
<CardFooter>
<Button size="sm" outline color="danger">
<i className="fas fa-edit" />
</Button>
</CardFooter>
</Card>
))}
<Card style={{ flex: 1 }}>
<CardBody>
<Button size="lg" outline color="secondary">
<i class="fas fa-plus fa-9x" />
</Button>
</CardBody>
</Card>
</CardDeck>
В настоящее время реализация не полностью корректна. Исходные две карты имеют очень большую ширину (поскольку размер картдека установлен на 200em. Но если я уберу ширину, на картдеке не будет включена горизонтальная прокрутка).
И чем больше карт я добавляю, тем они корректируются в пределах 200ем.
Есть ли способ динамически добавлять карты фиксированного размера с включенной прокруткой для колоды карт?