카테고리 없음

<lightning:buttonIcon> 버튼 아이콘 구성요소

으농농이 2021. 6. 28. 16:53

<lightning:buttonIcon> 구성요소는 클라이언트 측 컨트롤러에서 실행하는 아이콘 전용 버튼이다. 

다양한 크기의 아이콘을 만들 수 있다 

 

 

--------------------------------------------------------------------------------------------------------------------------------

* border(default)  :  회색테두리가 있는 아이콘이 포함 된 버튼

<lightning:buttonIcon iconName="utility:settings" variant="border-filled" alternativeText="Settings" title="Settings"/>

<lightning:buttonIcon iconName="utility:settings" variant="border-filled" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" />

--------------------------------------------------------------------------------------------------------------------------------

 

* bare :  테두리 없이 일반 아이콘처럼 보이는 버튼 

<lightning:buttonIcon iconName="utility:settings" variant="bare" onclick="{! c.handleClick }" alternativeText="Settings" title="Settings" />

<lightning:buttonIcon iconName="utility:settings" variant="bare" onclick="{! c.handleClick }" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" />

 

--------------------------------------------------------------------------------------------------------------------------------



* container : 일반 아이콘처럼 보이는 32*32 픽셀버튼 


<lightning:buttonIcon iconName="utility:settings" alternativeText="Settings" title="Settings" /> <lightning:buttonIcon iconName="utility:settings" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" />

 

 

 

--------------------------------------------------------------------------------------------------------------------------------

 

* border-filled  : 회색테두리와 흰색 배경의 아이콘이 포함된 버튼

<lightning:buttonIcon iconName="utility:settings" variant="border-filled" alternativeText="Settings" title="Settings" /> <lightning:buttonIcon iconName="utility:settings" variant="border-filled" disabled="true" alternativeText="Settings (disabled)" title="Settings (disabled)" />

 

 

 

--------------------------------------------------------------------------------------------------------------------------------

<lightning:buttonIcon iconName="utility:settings" variant="bare" alternativeText="Settings" iconClass="dark" title="Settings" />