0.2.7

Usando

Usando Hover, Focus e outros Estados

Como estilizar os ícones em hover, focus e muito mais


O suporte a estados no React Native não é completo. Veja a documentação oficial do NativeWind para saber mais.


Você pode usar modificadores antes dos utilitários para condicionalmente aplicar um estilo diferente para condições desejadas. Por examplo, para aplicar border-slate-600 no ícone durante o hover, use hover:border-slate-600:

Passe o mouse sobre o ícone e veja

<div>
<IoMdCheckboxOutlineclassName="size-32 rounded-xl hover:border hover:border-primary-medium" />
</div>

Primeiro, Último, Par ou Ímpar

Usando seletores


Não disponível para React Native. Veja a documentação oficial do NativeWind para saber mais.


Aplique estilos ao ícone quando ele é o first-child ou last-child usando os modificadores first e last:

<div>
<IoMdCheckboxOutlineclassName="first:bg-background last:border-primary-medium ..." />
<IoMdCheckboxOutlineclassName="first:bg-background last:border-primary-medium ..." />
<IoMdCheckboxOutlineclassName="first:bg-background last:border-primary-medium ..." />
<IoMdCheckboxOutlineclassName="first:bg-background last:border-primary-medium ..." />
</div>

Você pode também estilizar um ícone se ele for par ou ímpar usando os modificadores odd and even:

<div>
<IoMdCheckboxOutlineclassName="even:bg-background odd:border-primary-medium ..." />
<IoMdCheckboxOutlineclassName="even:bg-background odd:border-primary-medium ..." />
<IoMdCheckboxOutlineclassName="even:bg-background odd:border-primary-medium ..." />
<IoMdCheckboxOutlineclassName="even:bg-background odd:border-primary-medium ..." />
</div>

Usando o Estado do Elemento Pai

Aqui você encontra um examplo usando estilização condicional baseado no estado do elemento pai.

Passe o mouse sobre o ícone e veja

<div>
<buttonclassName="group/sample ...">
<divclassName="flex">
<IoMdCheckboxOutlineclassName="icon-sky-500 group-hover/sample:icon-white" />
<spanclassName="dark:text-primary font-quicksand group-hover/sample:text-primary-dark">
<span>
rocket
</span>
<spanclassName="font-semibold">
icons
</span>
</span>
</div>
<pclassName="text-primary-light group-hover/sample:text-primary-dark text-sm">
Group state can be used to change style of the icon.
</p>
</button>
</div>

Usando o Estado dos Elementos Irmãos

Aqui você encontra um examplo usando estilização condicional baseado no estado dos elementos irmãos.

User permission
<div>
<fieldset>
<legend>
User permission
</legend>
<inputid="admin"className="peer/admin"type="radio"name="permission" />
<TbCheckboxclassName="transition ... peer-hover/admin:opacity-100 peer-checked/admin:opacity-90 peer-checked/admin:icon-sky-500" />
<labelhtmlFor="admin"className="ml-2 peer-checked/admin:text-sky-500">
Admin
</label>
<inputid="user"className="peer/user"type="radio"name="permission" />
<TbCheckboxclassName="transition ... peer-hover/user:opacity-100 peer-checked/user:opacity-90 peer-checked/user:icon-sky-500" />
<labelhtmlFor="user"className="ml-2 peer-checked/user:text-sky-500">
User
</label>
<TbUserQuestionclassName="transition opacity-100 ... peer-checked/admin:opacity-0 peer-checked/user:opacity-0" />
<TbUserStarclassName="transition opacity-0 ... peer-checked/admin:opacity-100" />
<TbUserclassName="transition opacity-0 ... peer-checked/user:opacity-100" />
</fieldset>
</div>