Salesforce閃電行動模式大小

Question

我使用了閃電組件，我想知道如何設置閃電動作模式彈出窗口的寬度？

在我的代碼下面：

標記組件：

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

css：

 .THIS{ } 

Answer 1

您將在控制器js的組件和邏輯中包含模態代碼。因此，將此代碼添加到css文件中，確保在組件模態代碼中具有名為slds-modal__container 。

.THIS .slds-modal__container {
  margin: 0 auto;
  width: 50%;
  max-width: 100%;
 }

Answer 2

您可以嘗試以下代碼嗎？

在doInt中的Controller中（或在所需位置）

var modal1 = component.find（“ messages”）;

$ A.util.addClass（modal1，'YourClass'）;

很有型

.THIS .YourClass {width：50％;} //更改CSS值

Answer 3

在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} } 

Answer 4

在模態的<section>標記中，根據需要添加類slds-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>