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

Salesforce Lightning Design System: Utility Classes Styling

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

<h2>Introdução</h2>
O Salesforce Lightning Design System (SLDS) é uma coleção de componentes e diretrizes de design que ajudam os desenvolvedores a criar aplicativos personalizados e responsivos no Salesforce. Uma das ferramentas mais poderosas do LDS é o sistema de grid, que permite criar layouts responsivos e personalizados com facilidade. Neste artigo, vamos explorar como utilizar as Grid Utility Classes do LDS para criar layouts responsivos e como elas podem ser aplicadas em projetos de desenvolvimento de Salesforce.
<h2>Desenvolvimento</h2>
<h3>Grid Utility Classes</h3>
As Grid Utility Classes são uma parte fundamental do LDS e permitem que os desenvolvedores criem layouts responsivos e personalizados com facilidade. Elas são baseadas em um sistema de grid que divide a tela em 12 colunas, permitindo que os componentes sejam posicionados de forma flexível e responsiva.
As Grid Utility Classes incluem:
<ul>
<li><code>slds-grid</code>: Define o contêiner do grid.</li>
<li><code>slds-grid_container</code>: Define o contêiner do grid com uma largura máxima.</li>
<li><code>slds-grid_column</code>: Define uma coluna do grid.</li>
<li><code>slds-grid_row</code>: Define uma linha do grid.</li>
</ul>
<h3>Exemplo de Implementação</h3>
Aqui está um exemplo de como utilizar as Grid Utility Classes para criar um layout responsivo:
<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_container">
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 1 -->
 &#x3C;/div>
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 2 -->
 &#x3C;/div>
&#x3C;/div></code></pre></figure>
Neste exemplo, estamos criando um contêiner do grid com uma largura máxima e duas colunas de igual largura.
<h3>Utilizando os Tamanhos de Coluna</h3>
As Grid Utility Classes incluem uma variedade de tamanhos de coluna que podem ser utilizados para criar layouts personalizados. Por exemplo:
<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_container">
 &#x3C;div class="slds-grid_column slds-size_1-of-3">
 &#x3C;!-- Coluna 1 -->
 &#x3C;/div>
 &#x3C;div class="slds-grid_column slds-size_2-of-3">
 &#x3C;!-- Coluna 2 -->
 &#x3C;/div>
&#x3C;/div></code></pre></figure>
Neste exemplo, estamos criando um contêiner do grid com uma largura máxima e duas colunas de tamanhos diferentes.
<h3>Utilizando as Classes de Espaçamento</h3>
As Grid Utility Classes incluem uma variedade de classes de espaçamento que podem ser utilizadas para criar layouts personalizados. Por exemplo:
<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_container slds-m-top_large">
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 1 -->
 &#x3C;/div>
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 2 -->
 &#x3C;/div>
&#x3C;/div></code></pre></figure>
Neste exemplo, estamos adicionando um espaçamento superior grande ao contêiner do grid.
<h3>Utilizando as Classes de Alinhamento</h3>
As Grid Utility Classes incluem uma variedade de classes de alinhamento que podem ser utilizadas para criar layouts personalizados. Por exemplo:
<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_container slds-text-align_center">
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 1 -->
 &#x3C;/div>
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 2 -->
 &#x3C;/div>
&#x3C;/div></code></pre></figure>
Neste exemplo, estamos alinhando o conteúdo do contêiner do grid ao centro.
<h3>Utilizando as Classes de Visibilidade</h3>
As Grid Utility Classes incluem uma variedade de classes de visibilidade que podem ser utilizadas para criar layouts personalizados. Por exemplo:
<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_container slds-hide_on_small-only">
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 1 -->
 &#x3C;/div>
 &#x3C;div class="slds-grid_column slds-size_1-of-2">
 &#x3C;!-- Coluna 2 -->
 &#x3C;/div>
&#x3C;/div></code></pre></figure>
Neste exemplo, estamos ocultando o contêiner do grid em dispositivos pequenos.
<h3>Melhores Práticas</h3>
Aqui estão algumas melhores práticas para utilizar as Grid Utility Classes do LDS:
<ul>
<li>Utilize o sistema de grid para criar layouts responsivos e personalizados.</li>
<li>Utilize as classes de tamanho de coluna para criar layouts personalizados.</li>
<li>Utilize as classes de espaçamento para criar layouts personalizados.</li>
<li>Utilize as classes de alinhamento para criar layouts personalizados.</li>
<li>Utilize as classes de visibilidade para criar layouts personalizados.</li>
<li>Teste os layouts em diferentes dispositivos e tamanhos de tela.</li>
</ul>
<h3>Exemplos de Implementação Avançada</h3>
Aqui estão alguns exemplos de implementação avançada das Grid Utility Classes do LDS:
<ul>
<li>Criar um layout responsivo com várias colunas e linhas.</li>
<li>Utilizar as classes de tamanho de coluna para criar um layout personalizado.</li>
<li>Utilizar as classes de espaçamento para criar um layout personalizado.</li>
<li>Utilizar as classes de alinhamento para criar um layout personalizado.</li>
<li>Utilizar as classes de visibilidade para criar um layout personalizado.</li>
</ul>
<h3>Conclusão</h3>
As Grid Utility Classes do Salesforce Lightning Design System são uma ferramenta poderosa para criar layouts responsivos e personalizados no Salesforce. Com as Grid Utility Classes, os desenvolvedores podem criar layouts personalizados e responsivos com facilidade, utilizando as classes de tamanho de coluna, espaçamento, alinhamento e visibilidade. Além disso, as Grid Utility Classes incluem uma variedade de recursos avançados, como a capacidade de criar layouts responsivos com várias colunas e linhas. Com as Grid Utility Classes, os desenvolvedores podem criar aplicativos personalizados e responsivos no Salesforce, melhorando a experiência do usuário e aumentando a produtividade.
<h3>Referências Adicionais</h3>
<ul>
<li><a href="https://www.lightningdesignsystem.com/">Salesforce Lightning Design System</a></li>
<li><a href="https://www.lightningdesignsystem.com/components/grid/">Grid Utility Classes</a></li>
<li><a href="https://www.lightningdesignsystem.com/guidelines/grid/">Melhores Práticas para Utilizar as Grid Utility Classes</a></li>
<li><a href="https://www.lightningdesignsystem.com/examples/grid/">Exemplos de Implementação Avançada das Grid Utility Classes</a></li>
</ul>

Code Referral.

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

Compartilhe:

Categorias

Post Suggestions

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

Salesforce Lightning Design System: Utility Classes Styling

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