0

我使用了闪电组件，我想知道如何设置闪电动作模式弹出窗口的宽度？

在我的代码下面：

标记组件： 

<aura:component implements="force:lightningQuickActionWithoutHeader,force:hasRecordId" controller="Lead_Coface_Controller">
	
    <div aura:id="messages">
   	{!v.message}
    </div>
	
</aura:component>

CSS：

.THIS{
	
}

4

4 回答 4

1

您将在您的组件和控制器 js 中的逻辑中拥有模态代码因此，将此代码添加到css文件中，确保您slds-modal__container在组件模态代码中命名了此类

.THIS .slds-modal__container {
  margin: 0 auto;
  width: 50%;
  max-width: 100%;
 }
于 2019-05-10T06:26:28.380 回答
0

在 app.css 的一部分下方

.slds-modal__container {position:relative;-webkit-transform:translate(0, 0);-ms-transform:translate(0, 0);transform:translate(0, 0);-webkit-transition:-webkit-transform .1s linear,opacity .1s linear;transition:transform .1s linear,opacity .1s linear;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin: 3px 2rem;height:100%;padding:3rem 0;border-radius:.25rem;}
@media (min-width: 48em) {
  .slds-modal__container {margin:0 auto; width:50%; max-width:40rem; min-width:20rem}
}

于 2017-05-31T12:38:15.430 回答
0

在<section>modal 的标签中，添加 classslds-modal_large或slds-modal_medium，这取决于你想要什么。

<section role="dialog" tabindex="-1" aria-labelledby="modal-heading-01" aria-modal="true" aria-describedby="modal-content-id-1" class="slds-modal slds-fade-in-open slds-modal_large">         
      <div class="slds-modal__container">
         SOME MODAL STUFF HERE
      </div
</section>

于 2019-08-30T13:52:14.697 回答
0

你可以试试下面的代码。

在 doInt 中的控制器中（或在所需位置）

var modal1 = component.find("messages");

$A.util.addClass(modal1,'YourClass');

很有型

.THIS .YourClass{width:50%;} //改变css值

于 2017-05-24T08:05:33.040 回答