css - 显示描述的模态对话框

Question

每当有人单击描述按钮时，我正在尝试制作一个带有元素描述的弹出窗口。我不知道该怎么做。我在 react-mdl 中寻找组件，但我不知道如何将它插入到我的程序中。

按钮的层次结构是:

-应用

---导航栏

---页数

--------元素

----------元素卡

------------描述按钮

我曾尝试集成来自 react-mdl、semantic-ui 等的组件，但我无法弄清楚如何使其适应我的程序。

提前谢谢大家!

import React from "react";
import { Layout, Content } from "react-mdl";
import Pages from "./Pages";
import { NavBar } from "./NavBar";
import { LeftDrawer } from "./LeftDrawer";

class App extends React.Component {
  render() {
    return (
      <div>
        <Layout>
          <NavBar />
          <LeftDrawer />
          <Content className="app-content">
            <Pages />
          </Content>
        </Layout>
      </div>
    );
  }
}

export default App;

import React from "react";
import { Tabs, Tab } from "react-mdl";
import { CProjects } from "./CProjects";
import { ReactProjects } from "./ReactProjects";
import { SwiftProjects } from "./SwiftProjects";
import { TypescriptProjects } from "./TypescriptProjects";
import { JavaProjects } from "./JavaProjects";
import { CPPProjects } from "./CPPProjects";
import { PythonProjects } from "./PythonProjects";
import { AssemblyProjects } from "./AssemblyProjects";

class Projects extends React.Component {
  state = { activeTab: 0 };

  handleChange = tabId => {
    this.setState({ activeTab: tabId });
  };

  toggleCategiries = () => {
    switch (this.state.activeTab) {
      case 0:
        return (
          <div className="react-projects">
            <ReactProjects />
          </div>
        );
      case 1:
        return (
          <div className="typescript-projects">
            <TypescriptProjects />
          </div>
        );
      case 2:
        return (
          <div className="java-projects">
            <JavaProjects />
          </div>
        );
      case 3:
        return (
          <div className="c-projects">
            <CProjects />
          </div>
        );
      case 4:
        return (
          <div className="c++-projects">
            <CPPProjects />
          </div>
        );
      case 5:
        return (
          <div className="swift-projects">
            <SwiftProjects />
          </div>
        );
      case 6:
        return (
          <div className="python-projects">
            <PythonProjects />
          </div>
        );
      case 7:
        return (
          <div className="assembly-projects">
            <AssemblyProjects />
          </div>
        );
      default:
        return <div>lala</div>;
    }
  };

  render() {
    return (
      <div className="page">
        <div className="categories">
          <Tabs
            activeTab={this.state.activeTab}
            onChange={this.handleChange}
            ripple
          >
            <Tab className="tab">React</Tab>
            <Tab className="tab">TypeScript</Tab>
            <Tab className="tab">Java</Tab>
            <Tab className="tab">C</Tab>
            <Tab className="tab">C++</Tab>
            <Tab className="tab">Swift</Tab>
            <Tab className="tab">Python</Tab>
            <Tab className="tab">Assembly</Tab>
          </Tabs>
          {this.toggleCategiries()}
        </div>
      </div>
    );
  }
}

export default Projects;

import React from "react";
import {
  Card,
  CardTitle,
  CardActions,
  Button,
  CardMenu,
  IconButton,
  CardText
} from "react-mdl";
import { Link } from "react-router-dom";

class ProjectCard extends React.Component {
  render() {
    const titleStyle = {
      backgroundImage: "url(" + this.props.background + ")",
      backgroundSize: "100% 100%",
      color: "#fff",
      height: "176px"
    };
    return (
      <div>
        <Card shadow={6} style={{ borderRadius: "6px" }}>
          <CardTitle style={titleStyle}>{this.props.name}</CardTitle>
          <CardText>{this.props.shortDescription}</CardText>
          <CardActions border>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <a href={this.props.github} target="_blank">
                <Button colored>GitHub</Button>
              </a>
              <Button colored>Description</Button>
            </div>
          </CardActions>
          <CardMenu style={{ color: "#fff" }}>
            <IconButton name="share" />
          </CardMenu>
        </Card>
      </div>
    );
  }
}
export default ProjectCard;

import React from "react";
import { Spring } from "react-spring/renderprops";
import ProjectCard from "./ProjectCard";
import backgroundImage from "../../additional-files/images/React_background.png";

export const ReactProjects = () => {
  return (
    <Spring
      config={{ duration: 1000 }}
      from={{ opacity: 0 }}
      to={{ opacity: 1 }}
    >
      {props => (
        <div style={props}>
          <div className="projects">
            <div className="project">
              <ProjectCard
                name="Lab1"
                shortDescription="Encoder and Debug mode"
                description="This is the desired description in Modal"
                github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
                background={backgroundImage}
              />
            </div>
            <div className="project">
              <ProjectCard
                name="Lab1"
                shortDescription="Encoder and Debug mode"
                description="This is the desired description in Modal"
                github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
                background={backgroundImage}
              />
            </div>
            <div className="project">
              <ProjectCard
                name="Lab1"
                shortDescription="Encoder and Debug mode"
                description="This is the desired description in Modal"
                github="https://github.com/avishaiyaniv605/Computer-Architectue-Lab1"
                background={backgroundImage}
              />
            </div>
          </div>
        </div>
      )}
    </Spring>
  );
};

Answer 1

我设法用 evergreen ui 的 Dialog 组件做到了。

将它插入描述按钮所在的位置并在其中插入按钮

import React from "react";
import {
  Card,
  CardTitle,
  CardActions,
  Button,
  CardMenu,
  IconButton,
  CardText
} from "react-mdl";
import Component from "@reach/component-component";
import { Pane, Dialog } from "evergreen-ui";

class ProjectCard extends React.Component {
  state = {
    active: false
  };

  handleToggle = () => {
    this.setState({ active: !this.state.active });
  };

  actions = [
    { label: "Cancel", onClick: this.handleToggle },
    { label: "Save", onClick: this.handleToggle }
  ];

  render() {
    const titleStyle = {
      backgroundImage: "url(" + this.props.background + ")",
      backgroundSize: "100% 100%",
      color: "#fff",
      height: "176px"
    };
    return (
      <div>
        <Card shadow={6} style={{ borderRadius: "6px" }}>
          <CardTitle style={titleStyle}>{this.props.name}</CardTitle>
          <CardText>{this.props.shortDescription}</CardText>
          <CardActions border>
            <div style={{ display: "flex", justifyContent: "center" }}>
              <a href={this.props.github} target="_blank">
                <Button colored>GitHub</Button>
              </a>

              <Component initialState={{ isShown: false }}>
                {({ state, setState }) => (
                  <Pane>
                    <Dialog
                      isShown={state.isShown}
                      title={this.props.name + " description"}
                      onCloseComplete={() => setState({ isShown: false })}
                      confirmLabel="close"
                      hasFooter={false}
                    >
                      <Pane height={1800} width="100%" backgroundColor="#ddd" style={{ borderRadius: '6px' }}>
                        <div style={{ padding: "1vw 0 0 1vw" }}>
                          {this.props.description}
                        </div>
                      </Pane>
                    </Dialog>

                    <Button colored onClick={() => setState({ isShown: true })}>
                      Description
                    </Button>
                  </Pane>
                )}
              </Component>
            </div>
          </CardActions>
          <CardMenu style={{ color: "#fff" }}>
            <IconButton name="share" />
          </CardMenu>
        </Card>
      </div>
    );
  }
}
export default ProjectCard;