How to use the Elements Panel
How to use the Elements Panel
Discover the full potential of Codux’s Elements Panel in this quick, practical walkthrough.
🔗 Key Links:
🌐 Official Website: https://codux.com
🎧 Join the Discord Conversation: https://discord.gg/SZKzfHdXSn
🐦 Stay Updated on Twitter: https://twitter.com/CoduxIDE
Hit that subscribe button for more concise insights, and let us know your thoughts in the comments. Connect with us on our platforms and be a part of the Codux revolution! Happy coding! 🛠️🌐
Content
0 -> in this video we're going to learn how to manage
our components and navigate around the elements
4.14 -> panel we'll learn how we can restructure our
components add new elements to those components
8.94 -> and even create new components we're going to
start off in Codux with this music application
13.38 -> where if we start to interact around we see that
we have some Dynamic States but ultimately what
17.82 -> we want to do is manage the components inside
of this project and even add some new ones if
22.44 -> I navigate back to the Home tab I can see all
the different components I have available in
26.1 -> this project including the album which if I click
and navigate through I can see a preview of that
32.1 -> particular component this particular view is
going to be our board view where if I go ahead
36.6 -> and select this album board I can see I get some
new options including the properties where I can
42.48 -> start to change things like props including if I
wanted to update the artist name to something like
46.68 -> Colby Fayock we can see it immediately update for
this particular preview now if I wanted to edit
52.38 -> the component itself I can head up to my elements
panel and I can select the edit component option
58.08 -> where I can see all the different elements that
compose this particular component including what
63.06 -> seems to be a card component that wraps all the
children that are available inside including a
68.82 -> title artist and conditionally an image now say
for instance I want to start to edit some of
73.8 -> the styles of this component and in particular I
want to edit the drop shadow and replace it with
77.94 -> a border if I head up to this preview option
I can see that a little bit more clearly but
82.74 -> instead of actually editing this component it
looks like I need to edit the card component so
87.18 -> what I'm going to do is select the edit button of
the card component where if I select the root div
92.1 -> in the elements panel I can start to see all the
properties associated with that particular div
96.66 -> wrapper including going to the Styles panel where
I can change any style I want but once I'm done I
101.94 -> can see that I'm pretty happy with how this looks
for this single view but I want to look at it
105.6 -> compared to the rest of the album so if I navigate
back up to the app tab I can see exactly how that
110.64 -> looks with all of the different albums in place
now heading back to the album tab what if I wanted
115.38 -> to switch up how some of these elements are placed
inside of this component such as what if I wanted
119.76 -> to to move the artist Above the actual album title
switching back to select mode we can see that as
125.28 -> I'm hovering over all these elements I get boxes
that show what elements are that I can select if
131.04 -> I go ahead and select the title we can see that
as I open up the different panels I get all the
135.48 -> options pertaining to that title but what I want
to do is move this below the artist name so I'm
140.46 -> going to Simply drag this below and we can see
that we get that blue bar there that designates
144.66 -> where I'm going to drop it and once I drop it we
can see that I now have it underneath the artist
149.4 -> name now I think I actually prefer the title above
the artist name so I'm going to hit command Z and
154.5 -> just undo that change now if we start to look
inside the elements panel at all the different
158.16 -> elements available we see we have some special
items including the children condition we even
163.86 -> get something called an expression starting with
condition this is going to give us the ability to
168.48 -> show something whether it's true or false where
in our example here we're going to dynamically
173.22 -> show this music icon based off of this something
is playing we can see that this currently isn't
178.38 -> showing meaning it's currently false meaning
it's not rendering anything to the page if we
183.6 -> navigate up to the album board we can start to
look at the properties where if we set this is
188.4 -> playing Boolean to true we can now see that music
note that's because our condition now sees that
193.98 -> as true so it's rendering the content based off
of that condition if we want to see exactly how
199.38 -> that works we can right click the element inside
of our elements panel and select view code where
204.54 -> we can see exactly what's making this display
where in this case it's the is playing property
210.36 -> that's defined on the component as another similar
example I can head back up to the app tab where
215.46 -> inside of my player what if I wanted to turn this
into a new component inside of my project home I'm
220.74 -> going to go ahead and select new component where
I can Define what I want this new component to be
225.3 -> called such as now playing where I'm going to go
ahead and click create Kodak scaffold my component
230.58 -> complete with some example text as well as a
board that I can use to configure how I preview
235.44 -> this particular component now to start to try to
recreate my now playing component the first thing
240.48 -> I want to do is add some text so I'm going to go
back to the elements panel I'm going to select add
244.74 -> elements where I'm going to look for the paragraph
tag where once I find that I'm going to drag that
249.66 -> right into my div root but now we probably don't
need this other text nodes I'm going to go ahead
254.28 -> and right click it and I'm going to click delete
element I'm also going to update the text inside
258.6 -> of my paragraph just to something simple such
as artist name just so that we have an idea of
264.72 -> where we're starting from one of the nice things
with kodux is not only do we get access to all the
269.1 -> basic elements we can also configure external
libraries where I configured a few react icons
274.8 -> where I can now take my headphones and drag that
right into my component so not only can I drag
280.26 -> around things on the stage I can head over to my
elements panel and drag those headphones into the
285.06 -> paragraph tag there now I want to make sure that
this looks good so what I'm going to do is Select
289.14 -> my paragraph tag and head over to the Styles
panel where I need to create a new class I'm
293.88 -> going to go ahead and click create or apply new
class I'm going to call this playing I'm going
298.5 -> to create that class where now once I create it
I have access to add any styles that I want now I
304.44 -> went ahead and added the styling needed but let's
start to think about how we can actually make this
308.46 -> Dynamic now as we saw before if we right click
this element and click view code we can see that
313.92 -> code right inside of Codux but if I instead want
to actually edit this inside of VSCode I can right
319.38 -> click that and click open in VSCode this will
open the right file in the right location that
324.54 -> I need to have extra flexibility for being able to
work with the actual code inside of my natural IDE
330.06 -> environment so we know that we need to add some
Dynamic data to this so we can head back up to our
335.22 -> props where the first thing I'm going to do is add
Maya artist which I'm going to make a string but
340.02 -> then we also have our title which is similarly
going to be a string I'm going to then add my
344.7 -> artist and title props and to make sure that
we're reproducing this component the same as the
349.92 -> original code we can see that we had the artist
hyphen title so I'm going to do the same and set
354.84 -> up my artist hyphen title now if we head back to
the component we can see that we no longer have
359.76 -> had that text in the preview but as we know before
we can head back up to our board where we now have
365.28 -> access to the board elements where if we start
to modify the properties we can set an artist
369.9 -> of Colby Fayock we can add a title of super cool
album where we now have that preview available
377.22 -> whenever we're editing that component now to
actually add this to my project I'm going to head
381.9 -> back over to the app tab where I'm going to select
add elements I'm going to go to Project Library
386.46 -> components where I can see all the components that
I have available or I can alternatively search
391.32 -> for now playing where I find my component and I
can now drag that into the app now if we want to
397.44 -> start to set some values for that if we head over
to the properties panel we can see that we can
401.22 -> start to set some of these props to see what they
look like so if we start to set the artist we use
405.3 -> Colby Fayock again if we use a title of cool album
mix we can see that it starts to pop up now as we
412.86 -> probably realized we don't want these to be static
values we want them to be based off the state so
416.58 -> if we see this little code icon when we hover over
the prop we can click kit and it pops it up right
421.44 -> inside of Codux where we can start to grab our
original values of the playing the artist and I
426.18 -> can go ahead and replace that I can also replace
my playing dot title and we can see that they
431.22 -> start to pop up now the only issue is this isn't
currently utilizing the conditional statement in
436.44 -> order to only show if it's playing so what I'm
going to do is first get rid of the old component
440.94 -> and then I'm going to replace it with the new now
playing component we can see that it doesn't show
445.92 -> but if I start to open up the interactive mode and
click on an album we can see that it's playing but
450.96 -> with just a few clicks we were able to see how we
were able to easily manage our existing component
455.34 -> and even add new components right inside of
the Codux editor Codux brings some powerful
460.2 -> ways for how we can visually edit and manage our
components right inside of a UI if you haven't
465.6 -> yet tried out Codux make sure you head over to
the Codux website and try it for free and if you
469.98 -> like this video make sure you hit Thumbs Up And
subscribe for more Codux tutorials tips and tricks
Source: https://www.youtube.com/watch?v=NVtZb81w9xM