Two days ago, I wrote a practical article on front-end building block theory. Taking Carousel Carousel component of DevUI component library as an example, I elaborated in detail how to apply building block theory to component development, which mentioned the idea of abstraction and stratification. By abstracting Carousel components at the core of the thought of interaction into abstract usePage this Composable, through the Carousel components into the thought of hierarchical CarouselIndicator/CarouselPagination two child component.

Why do CarouselIndicator components define v-Models separately?

When it comes to the implementation principle of CarouselIndicator, greedy and vulgar students ask a question:

Why don’t CarouselIndicator directly use Carousel’s pageIndex instead of defining a V-Model bidirectional binding?

I think that’s a very good question!

It shows that the student really read the article carefully and had his own thoughts. I replied very simply:

To avoid coupling the CarouselIndicator to the Carousel component.

After dinner this afternoon, I was walking around digging nuggets when I came across an article written by a battleKing classmate last August:

Accordion folding cards to show the effect

BattleKing wrote a great article, and the code is clear and easy to understand. Please give him a thumbs up!

On second thought, isn’t that a CarouselIndicator?

So to explain more clearly the question posed by the greedy Philistine:

Why don’t CarouselIndicator directly use Carousel’s pageIndex instead of defining a V-Model bidirectional binding?

I’m going to use the CarouselIndicator for an accordion-style folding card.

Used aloneCarouselIndicatorComponent implementationAccordion folding cardThe effect

Since the CarouselIndicator component is actually a stand-alone component and does not have any coupling with the Carousel component, it can be used on its own.

It’s still in app.vue

Epage <script setup lang="ts"> import {DCarouselIndicator, usePage } from './components/carousel' const { pageIndex, SetPageIndex} = usePage(1) </script> <template> <DCarouselIndicator Accordion Folding Card Display Effect: https://juejin.cn/user/3677241439685368 <div class="box"> <div :class="['panel', pageIndex === 1 ? 'active' : '']" @click="setPageIndex(1)"> <h3>Explore The World</h3> </div> <div :class="['panel', pageIndex === 2 ? 'active' : '']" @click="setPageIndex(2)"> <h3>Wild Forest</h3> </div> <div :class="['panel', pageIndex === 3 ? 'active' : '']" @click="setPageIndex(3)"> <h3>Sunny Beach</h3> </div> <div :class="['panel', pageIndex === 4 ? 'active' : '']" @click="setPageIndex(4)"> <h3>City on Winter</h3> </div> <div :class="['panel', pageIndex === 5 ? 'active' : '']" @click="setPageIndex(5)"> <h3>Mountains - Clouds</h3> </div> </div> </DCarouselIndicator> </template> <style> // The styles are also copied directly from battleKing's article without changing anything. Box {display: flex; width: 90vw; } .panel { background-size: cover; background-position: center; background-repeat: no-repeat; height: 40vh; border-radius: 50px; color: #fff; cursor: pointer; Flex: 0.5; margin: 10px; position: relative; -webkit-transition: all 700ms ease-in; transition: all 700ms ease-in; } .panel:nth-child(1){ background-image: url("https://picsum.photos/1350/900? random=1"); } .panel:nth-child(2){ background-image: url("https://picsum.photos/1350/900? random=2"); } .panel:nth-child(3){ background-image: url("https://picsum.photos/1350/900? random=3"); } .panel:nth-child(4){ background-image: url("https://picsum.photos/1350/900? random=4"); } .panel:nth-child(5){ background-image: url("https://picsum.photos/1350/900? random=5"); } .panel h3 { font-size: 24px; position: absolute; bottom: 20px; left: 20px; margin: 0; opacity: 0; } .panel.active { flex: 5; } .panel.active h3 { opacity: 1; Transition: opacity 0.3s ease-in 0.4s; } </style>Copy the code

Accordion type folding card to achieve the effect

The final effect is as follows:

Is it very simple, almost no need to write any logic code, to achieve the effect of accordion card folding, I hope the greedy vulgar students can understand why CarouselIndicator and Carousel decoupling.

The core idea of building block theory is:

Let each component can be freely spliced and combined like building blocks, components are independent and cohesive, without any coupling with other components.

So we can develop the front end as easily as building blocks, just putting the components together.

Please give me a thumbs-up if you think it is useful. Your thumbs-up is the biggest encouragement for me. I will continue to output more DevUI component design articles in the future.

Optimization idea

From epage, usePage has been introduced. This logic can be placed inside the CarouselIndicator component, and should look something like this:

<DCarouselIndicator>
  <div class="panel">
    <h3>Explore The World</h3>
  </div>
  <div class="panel">
    <h3>Wild Forest</h3>
  </div>
  <div class="panel">
    <h3>Sunny Beach</h3>
  </div>
  <div class="panel">
    <h3>City on Winter</h3>
  </div>
  <div class="panel">
    <h3>Mountains - Clouds</h3>
  </div>
</DCarouselIndicator>
Copy the code

DevUI is recruiting contributors

Where did Carousel components come from that are so simple, easy to use and flexible?

From our DevUI component library, of course!

Welcome those interested in open source to join our DevUI open source organization. At present, we have the following open source products related to the component library ecology:

  • Ng DevUI:Angular12DevUI component library, an open source front-end solution for enterprise backend products
  • Vue DevUI:Vue3Version DevUI component library based onVite+Vue3+TypeScript+JSXTechnology stack
  • React DevUI:React18Version of the DevUI component library, developed by the communityxiejayReact is created with more than 20 React components.
  • DevUI Admin: flexible and customizable Admin system, based on DevUI component library and design system
  • DevUI Icons: DevUI Icons library
  • DevUI Helper: DevUI code Helper that provides a silky code completion experience.

There are now over 80 contributors to DevUI, and we welcome those of you who love learning, open source, and making friends!

Previous articles are recommended

Design a flexible Carousel lantern assembly with building block theory

Building Blocks theory of Front-end development – Do front-end development like building blocks

The story of DevUI open source

Build a warm open source community

DevUI Open Source 2021 annual review