Início / user-4822666

meez's questions

Martin Hope
meez
Asked: 2025-04-14 19:12:08 +0800 CST
  • 5

No meu componente Astro, estou usando class:list para meu estilo tailwind.

Tenho a seguinte situação, em que ambas as condições são true, e quero isRedColorestar na liderança. Como posso resolver isso?

<span
  class:list={[
    'text-large bg-gray text-white font-bold',
    { 'bg-orange': theme === "orange" },
    { 'bg-red': isRedColor },
    classes,
  ]}
>
  {title}
</span>
conditional-statements
Martin Hope
meez
Asked: 2024-10-10 17:48:19 +0800 CST
  • 5

Tenho o seguinte componente Astro :

   ---
    type Props = {
      uuid: string;
    };
    
    const { uuid } = Astro.props;
    ---
    
    <div class="my-feature" data-uuid={uuid} id="my-feature"></div>
    
    <script is:inline src={import.meta.env.MY_SCRIPT}></script>
    
    <script>
      import { MyFeatureHelper } from '@/scripts/my-helper';
    
      let myFeature;
    
      const ref = document.getElementById('my-container');
    
      myFeature = new MyFeatureHelper(ref as HTMLDivElement, {
        uuid: this?.ref.uuid,
      });
    
      myFeaturer.build();
    
    </script>

Preciso passar uuidprop para a <script>tag without define:varsconforme descrito aqui porque então meu script será tratado como is:inlinee não poderei importar a classe JavaScript MyFeatureHelper, da qual preciso.

Como posso ter acesso uuide usá-lo, por exemplo uuid: this?.ref.uuid, usando o truque do atributo de dados ?

Como faço isso funcionar?

javascript
Martin Hope
meez
Asked: 2023-12-21 00:03:48 +0800 CST
  • 5

Estou usando Astro e TypeScript.

Como adiciono condicionalmente um atributo HTML rel="noreferrer"a um elemento no Astro?

Então, quando targetBlank = falsenão renderiza relatributos no dom?

Ou a única solução é mostrar condicionalmente outro elemento HTML?

---
type Props = {
  to: string;
  targetBlank?: boolean;
};

const { to, targetBlank = false } = Astro.props;
---

<a
  href={to}
  target={targetBlank === true ? '_blank' : '_self'}
  rel={targetBlank === true ? 'noreferrer' : ''}
>
  <slot />
</a>
html