![]() To use it, I can go inside my setup and say import )". I'll open my terminal and say npm install Let's search for the icon, I'll do "dot.", and I want this one right here. So I'll use heroicons which can be installed as a vue library. Now, for the settings button, I want to add an icon something like three dots. Let's add some padding, font-medium text-sm text-white rounded-md. For the title, we'll do text-xl text-white font-bold, the button will have bg-white/10and then on hover we'll do bg-white/20. We'll start with the container, we'll do flex justify-between item-center and let's add some padding. Here we'll have an h1 for the title and the container for the settings button. Now the cards section should grow, so we'll do flex-1, and we'll need to prevent this from shrinking using shrink-0. ![]() Now inside it, we'll have one section for the board title and the settings, so do div and say title and settings, and another one for the cards. Inside main we'll have a container that will need to be a vertical flex, so we'll do flex flex-col, and we'll need to fill up all the space, so we'll do h-full. Let's add some left margin to the button, we'll do ml-3, and that's pretty much it. Now, for the image we'll do h-9 w-9 inline, and then rounded-full. The link will be text-sm font-medium, let's add some padding, and rounded-md hover:bg-gray-100, that looks right. For the header, we'll have flex and justify-between to push the elements to the side, bg-white, and let's add some padding px-4 py-3, the logo will be text-xl font-black, and let's say tracking-tight. Let's take the elements one by one and style them. Inside the header, we'll have the logo let's say "kanboard", and the navigation with my boards, and a button that will become a drop-down at some point. The main element will need to grow to fill all the available space, so we'll use flex-1, and then to prevent the header from shrinking we'll do shrink-0. Now the container will be a vertical flex, so we'll do flex flex-col, and it will need to fill up the entire screen, so we'll do h-screen, and let's also add a background bg-blue-600. Let's go into browser to /board, and here it is. We'll use script setup, and I'll add a template, and here we'll have a container to hold everything together, a header, and a main section. Then I will go to resources/js/Pages/ and create a new component called Board.vue. We'll do route, get, board, function, and we'll simply return an inertia view. Then I'll open the web routes file and add a new route. The first thing I'm going to do is open my tailwind config file and remove the nonito font we'll just use the default ones. We'll have horizontal scrolling, vertical scrolling, edit buttons appearing on card hover, and so on. The end result won't look exactly like the trello board, but it will be close. ![]() In this video we're going to build a trello like kanban board. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |