This course will be retired on July 21, 2017.
Bummer! This is just a preview. You need to be signed in with a Pro account to view the entire video.
Building a Panel with Component Driven Code7:05 with Guil Hernandez
Instead of using a div and an empty
zf-panel="" attribute to display a panel component:
<div zf-panel="" id="filters" > ... </div>
you can use the
<zf-panel> opening and closing tags:
<zf-panel id="filters" > ... </zf-panel>
So the search results view would be more useful for users if they could
filter the results to match the types of trails they're interested in hiking.
So I wanna add a section where users can filter or
narrow down their search results.
So, I'm gonna build this using Foundation for Apps' sliding panel component.
So panels are used to hide content off canvas.
They slide in from the top, left, bottom or right sides of the screen and
they appear over the content, as we can see in these examples.
So I'm gonna build this panel in a separate file called a partial.
Partials are files containing snippets of code that get included in views.
They make the app's code base more modular and easier to maintain,
because you can section off different elements of your app into small partials.
You can create partials inside the templates folder.
But to keep my code organized, I'm going to create a new folder
inside the client directory named partials.
Inside the new partials folder, I'll create a new HTML file and
I'll name it filter-results.html.
Inside the partial, I'll add a comment that lets us know that this is where we're
building the results panel.
So I'll say, filter results panel.
Remember, when you add a new file, you need to stop and
restart the watcher and server.
So I'm going to bring up the Terminal and hit Ctrl+C.
Then once again, type the command foundation-apps watch to rebuild my app.
So partials contain only snippets of HTML, and
you don't need to create a front matter block in the file.
So, I'll go back to the foundation for apps docs, and
I'm going to copy the basic HTML panel snippet right here,
and I'm going to paste it inside the filter results partial.
Now you can use any of the other panel snippets here, if you want, but
I'm sticking with the basic HTML snippet for my app.
So next, I'm going to give this panel an ID of filters,
which I'll use later to target and trigger the panel components slide animation.
And I'm also going to remove the paragraph element inside
the component since I wont be using it.
Now panels slide from the left side of the screen by default, but you can set them to
slide from the top, right or bottom by adding foundation's position attribute.
So in the opening div tag, I'll add the attribute position and
I want it to slide from the right side of the screen.
So I'll set the value to right.
CSS components using custom HTML tags that use a zf prefix.
So for example, this panel component here
uses the zf-panel attribute in the opening div tag.
Now the zf stands for Zerb Foundation.
So any time you see a zf prefix attribute in a component's wrapper, it means
you also can write the component using a custom tag instead of a div element.
So in my panel component, instead of using a div and
an empty zf-panel attribute, I'm going to use the tag zf-panel.
So I'll select and delete the opening div tag, and
I'll delete the zf-panel value and I'll leave it as zf-panel.
And I'll go ahead and copy this tag and
paste it in the closing tag, so right after the forward slash.
So now, I have opening and
closing zf-panel tags to build the panel component.
So next, inside the panel component,
I'll add a grid content container for the panel content.
So right below the anchor element,
I'm going to add aelement and I'll give it the class grid-content.
Next for the content, I'm going to add an h4 element as the panel heading.
So inside the h4 tag, I'm going to write Activities,
because I want the user to be able to filter
their results based on certain activities a trail might have or not have.
So I'll type Activities.
Next, I want to build the filter items as a list.
So, I'm going to add an unordered list element and I'll add the first li and
I want to build the list of activities or filters as checkboxes and labels.
So inside the li, I'll add an input element and
I'll give it the id hiking.
I want it to be a checkbox, so I'll set its type attributes to checkbox.
Next, I'll add a label element.
I'll set the content to hiking and I'll set the for attribute to hiking.
So for this example, I wanna add a couple more activities.
So, I'm going to select and copy the entire li element here and
paste it three more times, and I'm going to change some of the content.
So the second checkbox and label will say walking.
So, I'll change the id to walking.
I'll change the for attribute in the label to walking and the content to walking.
And right below, I'll make the next one say running.
So I'll change the id value to running.
I'll do the same for the label attribute and content.
So now, users will be able to filter their results
based on some of the trail activities.
For example hiking, walking or running.
Foundation for Apps also has a helper class
that removes bullets from an unordered or ordered list element.
So I wanna remove the bullets from this list here.
So in the opening ul tag,
I'm going to add the class no-bullet.
So my list of activities is pretty much set, you can add more filter items for
And in a later video, you'll learn how to display these dynamically
using front matter variables and special angular tags.
You need to sign up for Treehouse in order to download course files.Sign up