Reactjs 如何使用卡片组件创建手风琴_Reactjs_Bootstrap 4_React Bootstrap

Reactjs 如何使用卡片组件创建手风琴

reactjs bootstrap-4

Reactjs 如何使用卡片组件创建手风琴,reactjs,bootstrap-4,react-bootstrap,Reactjs,Bootstrap 4,React Bootstrap,我使用的是react bootstrap 1.0.0-beta.3，它是为支持bootstrap 4更新而构建的在此之前，我使用了react bootstrap 0.32.1，并使用面板和面板组创建了Accordion 但在引导升级之后，建议使用卡组件。我试着实现类似这样的行为： <CardGroup> <Card eventKey={this.state.eventKey} className="border-0"> <Card.H

我使用的是react bootstrap 1.0.0-beta.3，它是为支持bootstrap 4更新而构建的

在此之前，我使用了react bootstrap 0.32.1，并使用面板和面板组创建了Accordion

但在引导升级之后，建议使用卡组件。我试着实现类似这样的行为：

<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>


这是测试
测试文本123
测试文本456

我在这里面临两个问题：

如何制作一张全宽的卡片

如何使此结构像手风琴一样工作

大概是这样的：

<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>

您需要创建自定义的

组件

和css

类名

工作示例：

组件/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>
);

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
};

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;

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
};

.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;
}

组件/Collapse.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>
);

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
};

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;

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
};

.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;
}

感谢@Matt提供的详细示例，这对我很有用。