> ## Documentation Index
> Fetch the complete documentation index at: https://docs.appminis.io/llms.txt
> Use this file to discover all available pages before exploring further.

# Categories

> Hướng dẫn quản lý dữ liệu (thêm, sửa, xóa) và tùy chỉnh phong cách cho component Categories.

### **4.2.3. Categories**

**Dữ liệu**

* **Thêm dữ liệu mới:**

<Steps>
  <Step title="Thêm dữ liệu mới cho danh mục">
    Người dùng nhấn vào nút **“Thêm dữ liệu mới”**.

    <Frame caption="Nút thêm dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image31_42508fd40a.png"
        alt="Nút thêm dữ liệu danh mục trong giao diện quản lý"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút thêm dữ liệu danh mục"
      />
    </Frame>
  </Step>

  <Step title="Nhập thông tin và chọn ảnh danh mục">
    * Người dùng nhập **tên danh mục**
    * Nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”**
    * Nếu đây là **danh mục chứa các trang**, chọn **đường dẫn đến trang đích** (người dùng sẽ được điều hướng đến trang tương ứng khi nhấn vào ảnh này)
    * Nếu đây là **danh mục chứa các danh mục sản phẩm**, chọn **đường dẫn đến danh mục sản phẩm** mà người dùng sẽ được điều hướng đến khi nhấn vào ảnh.

    <Frame caption="Thêm dữ liệu cho danh mục">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image171_5ce7eaa661.png"
        alt="Giao diện thêm dữ liệu và chọn ảnh danh mục"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Thêm dữ liệu danh mục"
      />
    </Frame>
  </Step>

  <Step title="Hoàn tất hoặc hủy thao tác thêm dữ liệu">
    Người dùng nhấn **“Thêm dữ liệu”** để tiến hành thêm ảnh cho danh mục,\
    hoặc nhấn **“Hủy bỏ”** để hủy quá trình thêm dữ liệu.
  </Step>
</Steps>

* **Chỉnh sửa:**

<Steps>
  <Step title="Mở trang chỉnh sửa danh mục">
    Người dùng nhấn vào nút

    <Icon icon="pencil" color="#cfcfcf" size={15} />để **đến trang chỉnh sửa danh mục**.

    <Frame caption="Nút chỉnh sửa">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image91_08c92427f7.png"
        alt="Nút chỉnh sửa danh mục trong giao diện quản lý"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút chỉnh sửa danh mục"
      />
    </Frame>
  </Step>

  <Step title="Chỉnh sửa thông tin danh mục">
    Người dùng thực hiện các thao tác sau:

    * Nhập **tên danh mục**
    * Nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”** để thay đổi hình ảnh
    * Nếu đây là **danh mục chứa các trang**, chọn **đường dẫn đến trang đích** (người dùng sẽ được điều hướng đến trang tương ứng khi nhấn vào ảnh này)
    * Nếu đây là **danh mục chứa các danh mục sản phẩm**, chọn **đường dẫn đến danh mục sản phẩm** (người dùng sẽ được điều hướng đến danh mục sản phẩm tương ứng khi nhấn vào ảnh này)

    <Frame caption="Trang chỉnh sửa dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image151_51c1f8b621.png"
        alt="Giao diện chỉnh sửa danh mục và chọn ảnh"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Trang chỉnh sửa dữ liệu danh mục"
      />
    </Frame>
  </Step>

  <Step title="Lưu hoặc hủy chỉnh sửa">
    Người dùng nhấn **“Lưu chỉnh sửa”** để tiến hành cập nhật ảnh cho thẻ trong danh mục,\
    hoặc nhấn **“Hủy bỏ”** để hủy quá trình chỉnh sửa dữ liệu.
  </Step>
</Steps>

* **Xóa:**

<Steps>
  <Step title="Xóa thẻ trong danh mục">
    Người dùng nhấn vào nút <Icon icon="minus" color="#cfcfcf" size={15} /> để **xóa dữ liệu** trong danh mục.

    <Frame caption="Nút xóa">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image225_b877ada35f.png"
        alt="Nút xóa thẻ trong danh mục"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút xóa dữ liệu"
      />
    </Frame>
  </Step>

  <Step title="Xác nhận xóa dữ liệu">
    Khi hộp thông báo xuất hiện, người dùng nhấn **“Xóa ngay”** để **tiến hành xóa thẻ khỏi danh mục**,\
    hoặc nhấn **“Hủy”** để **dừng quá trình xóa dữ liệu**.
  </Step>
</Steps>

**Tổng quan**

* **Hiển thị tiêu đề:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có tiêu đề và không có tiêu đề, ngoài ra người dùng có thể nhập tiêu đề cho phần tử danh mục. Ví dụ, nếu tiêu đề là "Đây là danh mục" thì phần tử danh mục sẽ như thế này

<Frame caption="Tiêu đề danh mục ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image126_386385d018.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Kích thước/ Màu sắc:**
  * Người dùng có thể điều chỉnh kích thước và màu sắc cho tiêu đề của danh mục tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image378_f6c5e6cc9c.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Chế độ xếp hàng:**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có xếp hàng và không có xếp hàng. Nếu bật, người dùng sẽ nhập số cột, số cột sẽ phân bố các thành phần bên trong danh mục thành từng cột.
* **Số phần tử:**
  * Người dùng có thể giới hạn số phần tử có thể có trong danh mục, các phần tử xếp sau sẽ bị loại bỏ nếu vượt quá số lượng phần tử
* **Chi tiết phần tử**
  * **Lề ngoài**
    * Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới giữa các thẻ với các thẻ khác bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image379_0042a11cc9.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng điều chỉnh khoảng cách giữa lề trái và phải giữa các thẻ với các thẻ khác bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image380_e2caea547b.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image381_639af9db0a.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Lề trong**
  * Người dùng điều chỉnh chung khoảng cách giữa lề trên và dưới giữa lề các thẻ bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image382_d8f27a88d5.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng điều chỉnh khoảng cách giữa lề trái và phải giữa lề các thẻ bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image383_e5c90145cf.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Người dùng có thể điều chỉnh riêng lề trên và lề dưới bằng cách nhấn vào nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image384_a379874324.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Nền**
  * Chọn màu nền cho các thẻ bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image385_13dec63853.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có màu nền và không có màu nền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa màu nền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Bo góc**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image386_16702fe937.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

hoặc điềù chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image387_f76c43cf4c.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Viền**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của các thẻ tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image388_ee4b25ac1f.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image389_c8a21a355b.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa viền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của các thẻ tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image390_b4c32f9d6a.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image391_16a20d3bc6.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có đổ bóng và không đổ bóng bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa đồ bóng bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Hiển thị tên danh mục**
  * Người dùng nhấn nút <Icon icon="toggle-large-on" color="#0a06e4" size={15} /> để chuyển đổi qua lại giữa 2 trạng thái có tên của các thẻ trong danh mục và không có tên của các thẻ trong danh mục. Nếu bật, người dùng sẽ nhập kích thước tên, màu của tên. Ví dụ, nếu chọn kích thước là 12 và màu đen thì danh mục sẽ như thế này:

<Frame caption="Danh mục  ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image72_ad00d88a1b.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Hình ảnh danh mục**
  * **Kích thước:**
    * Người dùng có thể nhập hoặc tăng/giảm chung kích thước của các hình ảnh trong từng thẻ tại

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image392_b21262da41.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Bo góc**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ bo góc của 4 góc của các ảnh tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image393_bfdb5fad0f.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

hoặc điều chỉnh riêng lẻ độ bo góc của từng góc bằng cách nhấn nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image394_ac28dd8611.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* **Viền**
  * Người dùng có thể nhập hoặc tăng/giảm chung độ lớn viền của các ảnh tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image395_932a549d78.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chọn màu cho viền bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image396_13fcc149b2.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có viền và không viền bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa viền bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
* **Đổ bóng**
  * Người dùng có thể chọn độ lớn đổ bóng của các ảnh tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image397_4d66642fed.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chọn màu cho đổ bóng bằng cách nhấn ô vuông sau đó chọn màu

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image398_37c760a305.png"
    alt="Screenshot of a deployment confirmation message that says All checks have passed."
    style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
    title=""
  />
</Frame>

* Chuyển đổi qua lại giữa 2 trạng thái có đổ bóng và không đổ bóng bằng cách nhấn nút <Icon icon="eye" color="#cfcfcf" size={15} />
* Xóa đồ bóng bằng cách nhấn nút <Icon icon="minus" color="#cfcfcf" size={15} />
