Question

我正在使用 react-bootstrap 1.0.0-beta.3 ，该版本用于支持 bootstrap 4 更新。

在此之前，我使用的是 react-bootstrap 0.32.1 ，并使用“面板”和“面板”组创建了手风琴。

但是在引导升级后，建议将其添加到Card组件。我试图实现类似的行为：

<CardGroup>
 <Card eventKey={this.state.eventKey} className="border-0">
              <Card.Header>
                <div className="row">
                  <div className="col-xs-9 col-sm-9 col-md-9 col-lg-9">
                    <Card.Title>
                      This is test
                    </Card.Title>
                  </div>
                  <div className="col-xs-3 col-sm-3 col-md-3 col-lg-3">
                    Test Text 123
                  </div>
                </div>
              </Card.Header>
              <Card.Body>
                Test Text 456
              </Card.Body>
           </Card>
</CardGroup>

我在这里面临着几个问题：

如何使一张卡片占据整个宽度。
如何使这种结构像手风琴一样。

类似这样的东西：

Answer 1

您需要创建自定义components和CSS className。

工作示例：https://codesandbox.io/s/8zkrw9jw50

components / Accordian.js

import React from "react";
import Card from "../../components/Card";

const panels = [
  "Add Edit Menus",
  "Resource Management",
  "Asset Management",
  "User Management",
  "Account Management"
];

export default () => (
  <div className="app-container">
    <div className="accordion-container">
      {panels.map(title => (
        <Card key={title} title={title} />
      ))}
    </div>
  </div>
);

components / Card.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import { Row, Col, Card } from "react-bootstrap";
import Collapse from "../Collapse";
import Button from "../Button";

const { Body, Header, Title } = Card;

class CardComponent extends Component {
  state = { isActive: false };

  toggleVisibility = () =>
    this.setState(prevState => ({ isActive: !this.state.isActive }));

  render = () => (
    <div className={`${this.state.isActive ? "active" : "inactive"}`}>
      <Card>
        <Header style={{ padding: 0 }}>
          <Row>
            <Col xs={9}>
              <Button onClick={this.toggleVisibility}>
                {!this.state.isActive ? "+" : "-"}
              </Button>
              <Title style={{ display: "inline-block" }}>
                {this.props.title}
              </Title>
            </Col>
            <Col style={{ paddingTop: 7 }} xs={3}>
              Test Text 123
            </Col>
          </Row>
        </Header>
        <Collapse>
          <Body style={{ padding: 10 }}>Test Text 456</Body>
        </Collapse>
      </Card>
    </div>
  );
}

export default CardComponent;

CardComponent.propTypes = {
  title: PropTypes.string.isRequired
};

components / Button.js

import styled from "styled-components";

const StyledButton = styled.button`
  color: #909090;
  background-color: transparent;
  font-weight: bold;
  outline: none;
  border: 0;
  cursor: pointer;
  font-size: 22px;
  transition: all 0.3s ease-in-out;
  margin: 0 15px;
  width: 25px;

  &:hover {
    color: #333333;
  }

  &:focus {
    outline: none;
  }
`;

export default StyledButton;

components / Collapse.js

import React from "react";
import PropTypes from "prop-types";

const Collapse = ({ children }) => (
  <span className="folding-pannel">{children}</span>
);

export default Collapse;

Collapse.propTypes = {
  children: PropTypes.node.isRequired
};

styles.css

.accordion-container {
  width: 100%;
}

.app-container {
  margin: 20px;
}

.active,
.inactive {
  margin-bottom: 5px;
}

.active .folding-pannel {
  transition: all 0.3s ease-in-out;
  height: 42px;
}

.inactive .folding-pannel {
  transform: perspective(0px) rotateX(90deg);
  transition: all 0.3s ease-in-out;
  height: 0;
}

如何使用Card Component创建手风琴

1 个答案: