Capturando Dados no LWC Salesforce: Uma Abordagem Completa para Input Text, Números e Outros Dados

Salesforce Lightning Design System: Criando Layouts Responsivos com Grid Utility Classes

Salesforce Lightning Design System: Utility Classes Styling

<h2>Introdução</h2>
O Salesforce Lightning Design System (SLDS) é uma estrutura de design que fornece uma abordagem sistemática para criar interfaces de usuário consistentes e atraentes. Uma das partes mais poderosas do LDS são as utility classes, que permitem aos desenvolvedores criar layouts personalizados e flexíveis de forma eficiente. Neste artigo, vamos explorar as utility classes de layout do Salesforce Lightning Design System e como elas podem ser utilizadas para melhorar a experiência do usuário.
<h2>Desenvolvimento</h2>
<h3>Utility Classes Básicas</h3>
As utility classes básicas do LDS são projetadas para fornecer uma base sólida para a criação de layouts. Elas incluem classes como <code>slds-grid</code>, <code>slds-flex</code>, <code>slds-wrap</code> e <code>slds-no-wrap</code>, que permitem que os desenvolvedores criem layouts de grade, flexbox e outros tipos de disposições de elementos.
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="css" data-theme="github-dark"><code data-language="css" data-theme="github-dark" style="display: grid;">&#x3C;!-- Exemplo de uso da classe slds-grid -->
&#x3C;div class="slds-grid">
 &#x3C;div class="slds-col">Coluna 1&#x3C;/div>
 &#x3C;div class="slds-col">Coluna 2&#x3C;/div>
&#x3C;/div></code></pre></figure>
<h3>Utility Classes de Alinhamento</h3>
As utility classes de alinhamento do LDS permitem que os desenvolvedores controlem a disposição dos elementos dentro de um layout. Elas incluem classes como <code>slds-align-top</code>, <code>slds-align-middle</code>, <code>slds-align-bottom</code> e <code>slds-align-center</code>, que permitem alinhar elementos vertical ou horizontalmente.
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="css" data-theme="github-dark"><code data-language="css" data-theme="github-dark" style="display: grid;">&#x3C;!-- Exemplo de uso da classe slds-align-center -->
&#x3C;div class="slds-grid" style="height: 100px;">
 &#x3C;div class="slds-align-center">Elemento alinhado ao centro&#x3C;/div>
&#x3C;/div></code></pre></figure>
<h3>Utility Classes de Espaçamento</h3>
As utility classes de espaçamento do LDS permitem que os desenvolvedores controlem o espaçamento entre os elementos dentro de um layout. Elas incluem classes como <code>slds-p-around_small</code>, <code>slds-p-around_medium</code>, <code>slds-p-around_large</code> e <code>slds-m-around_small</code>, que permitem adicionar espaçamento ao redor dos elementos.
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="css" data-theme="github-dark"><code data-language="css" data-theme="github-dark" style="display: grid;">&#x3C;!-- Exemplo de uso da classe slds-p-around_small -->
&#x3C;div class="slds-grid">
 &#x3C;div class="slds-p-around_small">Elemento com espaçamento pequeno ao redor&#x3C;/div>
&#x3C;/div></code></pre></figure>
<h3>Exemplo de Implementação</h3>
Aqui está um exemplo de como utilizar as utility classes do LDS para criar um layout de grade com alinhamento e espaçamento:
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="html" data-theme="github-dark"><code data-language="html" data-theme="github-dark" style="display: grid;">&#x3C;div class="slds-grid slds-grid_pull-padded slds-wrap">
 &#x3C;div class="slds-col slds-size_1-of-2 slds-align-top">Coluna 1&#x3C;/div>
 &#x3C;div class="slds-col slds-size_1-of-2 slds-align-bottom">Coluna 2&#x3C;/div>
 &#x3C;div class="slds-col slds-size_1-of-2 slds-p-around_small">Coluna 3&#x3C;/div>
 &#x3C;div class="slds-col slds-size_1-of-2 slds-m-around_medium">Coluna 4&#x3C;/div>
&#x3C;/div></code></pre></figure>
<h2>Utilizando as Utility Classes com Apex e JavaScript</h2>
As utility classes do LDS podem ser utilizadas em conjunto com Apex e JavaScript para criar interfaces de usuário mais interativas. Por exemplo, você pode utilizar Apex para criar uma lista de registros e então utilizar as utility classes do LDS para exibir a lista em uma grade.
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="apex" data-theme="github-dark"><code data-language="apex" data-theme="github-dark" style="display: grid;">// Exemplo de uso de Apex para criar uma lista de registros
public class RegistrosController {
 public List&#x3C;Registro__c> registros { get; set; }
 
 public RegistrosController() {
 registros = [SELECT Id, Nome FROM Registro__c];
 }
}</code></pre></figure>
<figure data-rehype-pretty-code-figure=""><pre style="background-color:#24292e;color:#e1e4e8" tabindex="0" data-language="javascript" data-theme="github-dark"><code data-language="javascript" data-theme="github-dark" style="display: grid;">// Exemplo de uso de JavaScript para exibir a lista em uma grade
var registros = [{ Id: 1, Nome: 'Registro 1' }, { Id: 2, Nome: 'Registro 2' }];
var grid = document.querySelector('.slds-grid');
registros.forEach(function(registro) {
 var col = document.createElement('div');
 col.classList.add('slds-col');
 col.innerHTML = registro.Nome;
 grid.appendChild(col);
});</code></pre></figure>
<h2>Melhores Práticas para Utilizar as Utility Classes</h2>
Aqui estão algumas melhores práticas para utilizar as utility classes do LDS:
<ul>
<li>Utilize as classes de grade (<code>slds-grid</code>) para criar layouts de grade flexíveis.</li>
<li>Utilize as classes de alinhamento (<code>slds-align-top</code>, <code>slds-align-middle</code>, etc.) para controlar a disposição dos elementos.</li>
<li>Utilize as classes de espaçamento (<code>slds-p-around_small</code>, <code>slds-p-around_medium</code>, etc.) para adicionar espaçamento entre os elementos.</li>
<li>Utilize as classes de tamanho (<code>slds-size_1-of-2</code>, <code>slds-size_1-of-3</code>, etc.) para controlar o tamanho dos elementos.</li>
</ul>
<h2>Conclusão</h2>
As utility classes de layout do Salesforce Lightning Design System são uma ferramenta poderosa para criar interfaces de usuário personalizadas e eficazes. Ao utilizar as utility classes básicas, de alinhamento e de espaçamento, os desenvolvedores podem criar layouts flexíveis e interativos. Além disso, ao combinar as utility classes com Apex e JavaScript, os desenvolvedores podem criar interfaces de usuário mais interativas e personalizadas. Ao seguir as melhores práticas para utilizar as utility classes, os desenvolvedores podem criar aplicativos mais eficazes e atraentes para os usuários.
<h2>Referências Adicionais</h2>
<ul>
<li><a href="https://www.lightningdesignsystem.com/">Documentação do Salesforce Lightning Design System</a></li>
<li><a href="https://www.lightningdesignsystem.com/components/grid/">Exemplos de uso das utility classes do LDS</a></li>
<li><a href="https://www.lightningdesignsystem.com/guidelines/utility-classes/">Guia de melhores práticas para utilizar as utility classes do LDS</a></li>
</ul>

Code Referral.

Salesforce Lightning Design System: Utility Classes Layout - Um Guia Completo

Compartilhe:

Categorias

Post Suggestions

Capturando Dados no LWC Salesforce: Uma Abordagem Completa para Input Text, Números e Outros Dados

Salesforce Lightning Design System: Criando Layouts Responsivos com Grid Utility Classes

Salesforce Lightning Design System: Utility Classes Styling