thảo luận Trả lời tất cả những câu hỏi về Front End !!!

onthemoon said:

Cái background nó đổi màu lúc scroll xuống thì làm sao mấy pro?

Figma: The Collaborative Interface Design Tool

Figma is the leading collaborative design tool for building meaningful products. Seamlessly design, prototype, develop, and collect feedback in a single platform.

www.figma.com

Click to expand...

GSAP | GSAP | Docs & Learning

The gsap object serves as the access point for most of GSAP's functionality. It's just a generic object with various methods and properties that create and control Tweens and Timelines (the key players in all of GSAP).

gsap.com

ScrollTrigger | GSAP | Docs & Learning

ScrollTrigger enables anyone to create jaw-dropping scroll-based animations with minimal code. Infinitely flexible. Scrub, pin, snap, or just trigger anything scroll-related, even if it has nothing to do with animation.

gsap.com

liarboy said:

View attachment 2306109
cho e hỏi có nhiều trang thì nên dùng Link hay reacr routuer cho next v mấy thím

Click to expand...

coder biết khóc said:

trình độ thế nào gọi là middle/senior Front-end v bác ?

Click to expand...

liarboy said:

vis duj giờ e có 1 sidebar như này,

mỗi lần e nhấn vào phần bên sidebar ví dụ như manage thì nó sẽ show ra bên phải. Nhưng vẫn giữ lại layout có header, có sidebar. show mỗi cái phần khung màu xanh thôi thì nên như nào thím nhỉ ? e đang k biết nên chia layout chính như nào và gắn link như nào.
View attachment 2306688

View attachment 2306696

ở phần Page1 là page sẽ show ra. Giờ e gọi cái layout này ra cho mỗi cái page của nó à thím. Ví dụ như pageManage như hình. E cảm ơn

Click to expand...

01213784723 said:

Bác dùng NextJS nhỉ.

Đơn giản thì viết layout vào trong _app.jsx, phần Header, Sidebar sẽ chứa Link, phần content sẽ là { children }.

Tham khảo thêm ở đây: Routing: Pages and Layouts | Next.js (https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts)
Lâu rồi mình chưa làm React nên không nói chi tiết hơn được

Click to expand...

liarboy said:

em làm nhưng nó bị dính ở trang chủ, k dẫn link sang dc. Dẫn dc thì ở trang mới nó vẫn dính cái page cũ

Click to expand...

liarboy said:

giờ làm s để e nhấn vão mỗi phần bên sidebar bên trái thì page nó hiện bên phải và vẫn để lại layout.

View attachment 2307171
E đang vướng chỗ chữ "OK" này sẽ tượng trưng cho mỗi trang bên phải e đang nói tới. Làm sao mà nhấn vào nó chỉ hiện cái trang đó và layout k cần render lần nữa.
View attachment 2307172

E có thử gắn link vào thì nó chuyển qua bên trang <Manage> được nhưng bản chất là nó vẫn hiện cái layout ở trên chứ <Manage> chưa thay thế được phần "OK" trong layout

Click to expand...

gang.bang.is.my.life said:

làm sao để căn giữa trên dưới trái phải của 1 thằng span nằm trong 1 div mà ko dùng flex box.

Click to expand...

gang.bang.is.my.life said:

làm sao để căn giữa trên dưới trái phải của 1 thằng span nằm trong 1 div mà ko dùng flex box.

Click to expand...

Centering in CSS | Articles | web.dev

Follow 5 centering techniques as they go through a series of tests to see which one is the most resilient to change.

web.dev

liarboy said:

mấy thím ơi cho e hỏi thường mấy thím làm pagination thì làm theo phong cách nào v ạ, thư viện hay thuần hay theo docs của nextjs
View attachment 2314406

Click to expand...

undefined. said:

này còn tuỳ vào project nữa thì phải, có mấy pj dùng bootstrap or mui thì xài luôn của tụi nó cho tiện chứ code lại thì nó mất tg, cơ mà cái gì có sẵn thư viện thì mình dùng thôi lăng tăng làm gì

Click to expand...

liarboy said:

e dùng tailwind với nextjs thôi á bác. Vậy dùng thẳng thằng này hay là dùng của mui luôn ạ ?. E cảm ơn

Click to expand...

Tailwind CSS Pagination - Flowbite

Use the Tailwind CSS pagination element to indicate a series of content across various pages based on multiple styles and sizes

flowbite.com

Pagination - Official Tailwind CSS UI Components

Pagination examples for Tailwind CSS, designed and built by the creators of the framework.

tailwindui.com