Question

我正在将语义UI用于React可视组件。显示Designed Card中包含的Step组件时存在问题。虽然，在下面显示的代码中，我已将Card组件设置为流畅的。

<Card fluid raised>

通过台式机查看时，它溢出到卡的外部，如下所示：

但是，通过移动设备查看时，它的效果很好。它在Card组件内很好地垂直堆叠，如下所示：

我的代码如下。

// Confirmation.jsx
import React, { Component } from 'react';
import { Label, Header, Card, Form, Button, Container, Icon, Step } from 'semantic-ui-react';




class Confirmation extends Component{
    saveAndContinue = (e) => {
        e.preventDefault();
        this.props.nextStep();
    }

    back  = (e) => {
        e.preventDefault();
        this.props.prevStep();
    }

    render(){
        const {values: {  companyName, phoneno, email, subscription, shopregno, gstin, ownername, owneremail, ownerphone, customerservice, address, position  }} = this.props;

        return(


            <Container>
              <Header as='h2' icon textalign='center'>
                              <Icon name='users' circular />
                              <Header.Content>REGISTRATION</Header.Content>
                </Header>
            <Card.Group>
             <Card fluid raised>
               <Card.Content>
                  <Card.Header>
                  <Step.Group>
                    <Step completed>
                      <Icon name='user' />
                      <Step.Content>
                        <Step.Title>Customer Details</Step.Title>
                        <Step.Description>Enter the customer details</Step.Description>
                      </Step.Content>
                    </Step>

                      <Step completed>
                      <Icon name='map marker alternate' />
                      <Step.Content>
                        <Step.Title>Map Details</Step.Title>
                        <Step.Description>Enter Location information</Step.Description>
                      </Step.Content>
                    </Step>


                    <Step completed>
                      <Icon name='book' />
                      <Step.Content>
                        <Step.Title>Category Details</Step.Title>
                        <Step.Description>Enter Category information</Step.Description>
                      </Step.Content>
                    </Step>

                    <Step completed>
                      <Icon name='servicestack' />
                      <Step.Content>
                        <Step.Title>Service Details</Step.Title>
                        <Step.Description>Enter Service information</Step.Description>
                      </Step.Content>
                    </Step>

                    <Step completed>
                      <Icon name='address card' />
                      <Step.Content>
                        <Step.Title>Owner Details</Step.Title>
                       <Step.Description>Enter Owner information</Step.Description>

                      </Step.Content>
                    </Step>

                   <Step active>
                       <Icon name='info' />
                      <Step.Content>
                        <Step.Title>Confirm Registration</Step.Title>
                        <Step.Description>Finalize & Confirm</Step.Description>

                      </Step.Content>
                    </Step>

                  </Step.Group>

                  </Card.Header>
               </Card.Content>





             <Card.Content extra>

                <Button secondary onClick={this.back}>Back</Button>
                <Button primary onClick={this.saveAndContinue}>Save And Continue </Button>
             </Card.Content>



         </Card>
       </Card.Group>





    </Container>



        )
    }
}

export default Confirmation;

我尝试了Jake建议的方法，该方法将滚动条添加到Step.Group，如下所示：

并不是一个理想的解决方案，因为滚动条不会自动移动到活动步骤。

我们非常感谢您提供帮助来解决此错误。从语义UI的文档中，我了解到Card组件有一个宽度预设。如何通过覆盖来修改此预设宽度？

反应语义UI-步骤组件在卡上无法正确显示

0 个答案: