Este artigo visa a aplicação prática da metodologia Atomic Design, apenas para fins de consulta. Caso você desconheça o método, recomendo uma leitura prévia sobre o tema antes de continuar.
EXEMPLOS PRÁTICOS
Átomos: é a menor unidade que compõe nosso aplicativo.
AtomButton.vue
<template>
<a
:href="link.url"
>{{ link.name }}</a>
</template>
<script>
export default {
name: "AtomButton",
props: ["link"]
};
</script>
AtomImage.vue
<template>
<img :src="img" :alt="alt" />
</template>
<script>
export default {
name: "AtomImage",
props: ["img", "alt"]
};
</script>
AtomText.vue
<template>
<p>{{ text }}</p>
</template>
<script>
export default {
name: "AtomText",
props: ["text"]
};
</script>
AtomTitle.vue
<template>
<h1>{{ title }}</h1>
</template>
<script>
export default {
name: "AtomTitle",
props: ["title"]
};
</script>
Moléculas: são grupos de átomos ligados entre si.
MoleculeBanner.vue
<template>
<div>
<header>
<AtomTitle :title="Atomic Design com Vue.js" />
<AtomText text="Um exemplo de molecula" />
<AtomButton :link="{ name: 'Button', url: '#' }"/>
</header>
</div>
</template>
<script>
import AtomTitle from "@/components/atoms/AtomTitle";
import AtomText from "@/components/atoms/AtomText";
import AtomButton from "@/components/atoms/AtomButton";
export default {
name: "MoleculeBanner",
components: {
AtomTitle,
AtomText,
AtomButton
}
};
</script>
Organismos: são grupos de moléculas unidas para formar uma seção relativamente complexa e distinta de uma interface, como o cabeçalho e o rodapé.
OrganismHeader.vue
<template>
<header>
<div>
<AtomLogo/>
<MoleculeLinks :links="links"/>
</div>
<div>
<AtomButton :link="{ name: 'Button', url: '#' }"/>
</div>
</header>
</template>
<script>
import AtomLogo from "@/components/atoms/AtomLogo";
import AtomButton from "@/components/atoms/AtomButton";
import MoleculeLinks from "@/components/molecules/MoleculeLinks";
export default {
name: “OrganismHeader",
props: ["links"],
components: {
AtomLogo,
AtomButton,
MoleculeLinks
}
};
</script>
OrganismFooter.vue
<template>
<footer>
<div>
<MoleculeLinks :links="columnOneLinks"/>
</div>
<div>
<MoleculeLinks :links="columnTwoLinks"/>
</div>
</footer>
</template>
<script>
import MoleculeLinks from "@/components/molecules/MoleculeLinks";
export default {
name: “OrganismFooter",
props: ["columnOneLinks", "columnTwoLinks"],
components: {
MoleculeLinks
}
};
</script>
Templates: consistem principalmente em grupos de organismos e/ou moléculas para formar a estrutura comum de uma página, o que costumávamos chamar de layout.
LandingPage.vue
<template>
<section>
<OrganismHeader :links="links"/>
<div>
<MoleculeBanner/>
<div class="container">
<OrganismGrid :cards="cards"/>
</div>
</div>
<OrganismFooter
:columnOneLinks="columnOneLinks"
:columnTwoLin ks="columnTwoLinks" />
</section>
</template>
<script>
import OrganismHeader from "@/components/organisms/OrganismHeader";
import OrganismFooter from "@/components/organisms/OrganismFooter";
import MoleculeBanner from "@/components/molecules/MoleculeBanner";
import OrganismGrid from "@/components/organisms/OrganismGrid";
export default {
name: "TemplateLanding",
components: {
MoleculeBanner,
OrganismHeader,
OrganismFooter,
OrganismGrid
},
data: () => {
return {
links: […],
cards: […],
columnOneLinks: […],
columnTwoLinks: […]
};
}
};
</script>
Como será sua estrutura visualizada na IDE.
Top comments (3)
Ótimo conteúdo, parabéns. Teria algumas referências sobre o assunto?
Recomendo o vídeo: O que é Atomic Design? de Chief of Design https://www.youtube.com/watch?v=e8ySLRGdCAQ&t=309s
e o Artigo que explica o que é a teoria do Atomic Design vidadeproduto.com.br/atomic-design/
Obrigadoo!