2

这是我想要实现的设计：

我使用下面的代码实现了这一点。它可以工作，但问题是检查元素的第一个 CSS 它具有淡入淡出效果，或者它比另一个慢，并且它有一个奇怪的行为 + 加上方形边框。

我的问题是，只有在添加 : .item-radio-checked { background-color: var(--ion-color-secondary); }AND&.item-radio-checked { --ion-item-background: var(--ion-color-secondary); --ion-item-color: var(--ion-color-light); }在.question-option.

我上面提到的效果：首先，当我按下按钮一秒钟时，会出现阴影或者只是变慢，然后变成完全黑色：

这是我的 HTML

  <ion-content class="ion-padding">
  <form [formGroup]="spqForm">
    <ion-grid>
      <ion-row>
        <ion-col>
          <div class="quiz-header">
            <ion-text class="small">QUESTION 1 OUT OF 10</ion-text>
            <h2>
              What is your primary concern?
            </h2>
          </div>

          <div class="quiz-choices">
            <ion-list lines="none">
              <ion-radio-group formControlName="spq">
                <ion-item class="question-option">
                  <ion-label class="choices-label">N</ion-label>
                  <ion-radio slot="end" value="n"></ion-radio>
                </ion-item>
           </ion-radio-group>
            </ion-list>
          </div>
        </ion-col>
      </ion-row>
    </ion-grid>

这是我的 CSS

ion-item {
  border: 1px solid #eeeff0;
  border-radius: 16px;
  height: 64px;
  text-indent: 20px;
  --background-activated: transparent;
  --ripple-color: transparent;
}

ion-label {
  font-size: 10.72 px;
  font-weight: 500;
  color: var(--ion-color-secondary);
  margin-top: 20px;
  margin-bottom: 5px;
}

.quiz-header {
  text-align: center;
  margin-top: 20%;
  h2 {
    font-weight: 700;
  }
}

.quiz-choices {
  margin-top: 15%;
}

.item-radio-checked {
  background-color: var(--ion-color-secondary);
}

.question-option {
  --padding-start: 0px;
  --ion-item-color: var(--ion-color-secondary);
  --inner-border-width: 0px;
  --inner-padding-end: 0px;

  text-align: left;

  &:not(:last-child) {
    margin-bottom: 2.5%;
  }

  &.item-radio-checked {
    --ion-item-background: var(--ion-color-secondary);
    --ion-item-color: var(--ion-color-light);
  }

  ion-radio {
    --color-checked: var(--ion-color-light);
    margin-bottom: 0px;
    margin-right: 20px;
  }
}

.back-button {
  width: 64px;
  height: 64px;
  --background: var(--ion-color-medium);
  --color: var(--ion-color-secondary);
  position: fixed;
  bottom: 25px;
}

.next-button {
  width: 156px;
  height: 64px;
  color: var(--ion-color-light);
  position: fixed;
  bottom: 25px;
  right: 7.1%;
}
4

0 回答 0