Guia Completo: Utilizando Tooltips no SLDS no LWC

Usando Modal SLDS no LWC: Implemente Interfaces de Usuário Engajantes no Salesforce

Método Estático no Apex: Guia Completo para Trabalhar com JSON em Salesforce

O Salesforce Lightning Design System (SLDS) é uma poderosa ferramenta que ajuda desenvolvedores a criar interfaces de usuário consistentes e atraentes para suas aplicações Salesforce. Mas você sabe como aproveitar ao máximo os recursos de Styling Hooks do SLDS? Neste artigo, vamos explorar exemplos práticos e dicas valiosas para dominar o uso de Styling Hooks e personalizar sua experiência do Salesforce.
<h2>Introdução aos Styling Hooks</h2>
Styling Hooks são pontos de extensão no CSS que permitem aos desenvolvedores personalizar e estilizar componentes da interface do usuário no Salesforce. Eles oferecem uma maneira flexível e eficiente de sobrepor e modificar as definições de estilo padrão dos componentes do SLDS.
Ao usar Styling Hooks com o SLDS, você pode garantir que suas aplicações Salesforce sejam visualmente atraentes, intuitivas e alinhadas com as diretrizes de design da plataforma.
<h2>Importando Variáveis SLDS</h2>
O primeiro passo para usar Styling Hooks de forma eficaz é importar as variáveis CSS do SLDS em seu arquivo CSS personalizado. Isso lhe dará acesso a todas as variáveis disponíveis no sistema de design, facilitando a integração de suas customizações.
<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;">@import url('./node_modules/@salesforce-ux/design-system/assets/styles/slds.css');</code></pre></figure>
Agora você pode usar essas variáveis em suas próprias regras de estilo:
<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;">/* Usando a variável SLDS para a cor de fundo de um botão */
.my-custom-button {
 background-color: var(--slds-g-color-brand-base-50, #0b5cab);
 color: var(--slds-g-color-neutral-base-100, #ffffff);
 padding: var(--slds-c-button-spacing-block-start, 0.75rem) var(--slds-c-button-spacing-inline-end, 1rem);
}</code></pre></figure>
<h2>Definindo Variáveis CSS em Componentes LWC</h2>
Quando trabalhando com Lightning Web Components (LWC), você pode definir variáveis CSS diretamente no componente usando o seletor <code>:host</code>. Isso permite que suas customizações de estilo sejam scoped dentro do componente, evitando conflitos com estilos globais.
<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;">:host {
 --my-custom-color: #ff9900;
 --my-custom-padding: 1.5rem;
}
 
.my-custom-element {
 color: var(--my-custom-color);
 padding: var(--my-custom-padding);
}</code></pre></figure>
Agora, você pode usar essas variáveis personalizadas em todo o seu componente LWC, garantindo que suas customizações sejam aplicadas corretamente.
<h2>Exemplos Práticos de Styling Hooks</h2>
Vamos explorar alguns exemplos práticos de como usar Styling Hooks para personalizar diferentes componentes do SLDS.
<h3>Customizando o Accordion</h3>
O componente de accordion é muito utilizado em aplicações Salesforce. Aqui está como você pode personalizá-lo:
<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;">/* Alterando a cor do texto do cabeçalho do accordion */
.slds-accordion__summary-action-title {
 color: var(--slds-c-accordion-heading-text-color, #333333) !important;
}
 
/* Modificando o tamanho da borda do accordion */
.slds-accordion__section {
 border-width: var(--slds-c-accordion-sizing-border, 1px) !important;
 border-color: var(--slds-c-accordion-color-border, #dddddd) !important;
}
 
/* Adicionando um ícone personalizado no cabeçalho do accordion */
.slds-accordion__summary-action-icon {
 background-image: url('/path/to/custom-icon.svg') !important;
 background-size: 1.25rem !important;
 background-repeat: no-repeat !important;
 background-position: center !important;
}</code></pre></figure>
<h3>Estilizando Tabs</h3>
As tabs também são um componente muito comum no Salesforce. Aqui está um exemplo de como personalizar seu estilo:
<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;">/* Mudando a cor do texto ativo da tab */
.slds-tabs_default__link[aria-selected="true"] {
 color: var(--slds-c-tab-text-color-active, #0b5cab) !important;
}
 
/* Alterando a cor da borda inferior da tab ativa */
.slds-tabs_default__item.slds-is-active {
 border-bottom-color: var(--slds-c-tab-color-border-active, #0b5cab) !important;
}
 
/* Adicionando um ícone personalizado às tabs */
.slds-tabs_default__item::before {
 content: url('/path/to/custom-icon.svg');
 margin-right: 0.5rem;
}</code></pre></figure>
<h3>Personalizando Modais</h3>
Os modais também podem ser personalizados usando Styling Hooks:
<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;">/* Modificando a cor de fundo do modal */
.slds-modal__container {
 background-color: var(--slds-c-modal-color-background, #ffffff) !important;
}
 
/* Adicionando uma sombra ao modal */
.slds-modal__container {
 box-shadow: var(--slds-c-modal-shadow, 0 12px 24px 0 rgba(0, 0, 0, 0.2)) !important;
}
 
/* Personalizando o cabeçalho do modal */
.slds-modal__header {
 background-color: var(--slds-c-modal-header-color-background, #f3f2f2) !important;
 border-bottom-color: var(--slds-c-modal-header-color-border, #dddbda) !important;
}</code></pre></figure>
<h2>Dicas para Uso Escalável de Styling Hooks</h2>
Ao personalizar sua aplicação Salesforce com Styling Hooks, é importante seguir algumas melhores práticas para garantir um desenvolvimento escalável e sustentável. Aqui estão algumas dicas:
<ol>
<li>
Documente suas customizações: Mantenha um registro claro de todas as alterações feitas com Styling Hooks, incluindo a justificativa e o impacto de cada uma delas. Isso facilitará a manutenção e a integração de futuras atualizações do SLDS.
</li>
<li>
Organize seu CSS de forma modular: Separe suas regras de estilo personalizadas em arquivos ou módulos lógicos, como "accordion.css", "modal.css", etc. Isso tornará seu código mais legível e fácil de gerenciar.
</li>
<li>
Evite sobrescrever excessivamente: Antes de criar uma nova regra de estilo, verifique se não há uma maneira de reutilizar ou estender as definições existentes do SLDS. Isso ajudará a manter a consistência visual e evitará conflitos futuros.
</li>
<li>
Teste suas customizações: Certifique-se de testar suas alterações em diferentes tamanhos de tela e dispositivos para garantir uma experiência consistente e responsiva.
</li>
<li>
Mantenha-se atualizado com o SLDS: Acompanhe as atualizações do SLDS e ajuste suas customizações conforme necessário para se manter alinhado com as diretrizes de design da plataforma.
</li>
</ol>
<h2>Conclusão</h2>
O uso eficaz de Styling Hooks com o SLDS pode transformar a aparência e a usabilidade de suas aplicações Salesforce. Ao seguir os exemplos e dicas apresentados neste artigo, você estará bem no caminho para dominar essa poderosa ferramenta de personalização e criar interfaces de usuário visualmente atraentes e intuitivas.
Lembre-se de sempre testar suas customizações, documentá-las adequadamente e se manter atualizado com as últimas novidades do SLDS. Com essa abordagem, você poderá personalizar seu Salesforce de forma escalável e sustentável.

Code Referral.

Guia de Styling Hooks no Salesforce com SLDS

Compartilhe:

Categorias

Post Suggestions

Guia Completo: Utilizando Tooltips no SLDS no LWC

Usando Modal SLDS no LWC: Implemente Interfaces de Usuário Engajantes no Salesforce

Método Estático no Apex: Guia Completo para Trabalhar com JSON em Salesforce