Я хочу выделить часть текста в метке флажка курсивом. Я не нахожу способ сделать это. Например, я хочу, чтобы на метке флажка было написано Biologics техническая мастерская. Только слово Biologics должно быть выделено курсивом на этикетке.

                                <lightning:input 
                                             name="workshopCheckbox" 
                                             aura:id="workshopCheckbox" 
                                             label="{!v.workshopTitle}" 
                                             type="checkbox" 
                                             checked="{!v.workshopCheckbox}" 
                                             />

Также нужно это для выбора радио

                                <p class="required">*</p>Please select a Registration Option:
                                <lightning:radioGroup aura:id="amountDueRadioButton" 
                                                  label=""
                                                  name="registrationOption"

                                                  onchange="{!c.calculateRegistrationAmountDue}"                       
                                                  type="radio"
                                                  options="{! v.registrationOptions }"
                                                  />
0
Adrian Larson 2 Апр 2020 в 21:56

1 ответ

Поскольку метка является атрибутом строкового типа. Его значение не может содержать HTML-тег, такой как курсив.

Вместо этого вы можете изменить вариант на label-hidden, а затем добавить тег метки

Образец кода

HTML

<lightning:input class="inline"
                 name="workshopCheckbox" 
                 aura:id="workshopCheckbox" 
                 checked="{!v.myValue}"
                 variant="label-hidden"
                 type="checkbox">

</lightning:input>
<label class="slds-checkbox__label" for="checkbox-unique-id-72">
    <span class="slds-checkbox_faux"></span>
    <span class="slds-form-element__label"><i>Biologics</i> technical workshop</span>
</label>

CSS

.THIS .inline {
    display: inline-block;
}
1
Anmol Kumar 17 Мар 2020 в 16:30
Это сработало для моей метки флажка. Спасибо! Мне также нужно выделить курсивом часть метки переключателя. Я обновляю свой вопрос, чтобы показать это тоже.
 – 
Michele Kleinhomer
17 Мар 2020 в 17:03