> ## 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.

# Banners

> Hướng dẫn thêm, sửa, xóa Banners và tùy chỉnh các hiệu ứng, phong cách hiển thị.

### **4.2.2. Banners**

* **Dữ liệu**
* **Thêm dữ liệu mới banner**

<Steps>
  <Step title="Thêm dữ liệu mới">
    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 mới">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image68_f67e66b3db.png"
        alt="Nút thêm dữ liệu mới trong giao diện quản lý banner"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Nút thêm dữ liệu mới"
      />
    </Frame>
  </Step>

  <Step title="Chọn ảnh và đường dẫn trang đích">
    Người dùng nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”** và chọn **đường dẫn đến trang đích** — đây là trang mà người dùng sẽ được điều hướng đến khi nhấn vào ảnh này trên banner.

    <Frame caption="Chọn ảnh và thiết lập đường dẫn">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image131_f9f8ae76c1.png"
        alt="Giao diện chọn ảnh và đường dẫn trang đích cho banner"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Thêm dữ liệu banner"
      />
    </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 banner,\
    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 banner">
    Người dùng nhấn vào nút <Icon icon="pencil" color="#cfcfcf" size={15} /> để **đến trang chỉnh sửa**.

    <Frame caption="Nút chỉnh sửa">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image60_a8f6c92125.png"
        alt="Nút chỉnh sửa banner 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 banner"
      />
    </Frame>
  </Step>

  <Step title="Chỉnh sửa ảnh và đường dẫn trang đích">
    Người dùng nhấn **“Tải ảnh lên hoặc chọn ảnh từ thư viện”** và **sửa đường dẫn đến trang đích** — đây là trang mà người dùng sẽ được **điều hướng đến khi nhấn vào ảnh này trên banner**.

    <Frame caption="Chỉnh sửa dữ liệu banner">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image152_b4f8ea66de.png"
        alt="Giao diện chỉnh sửa ảnh và đường dẫn banner"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Chỉnh sửa dữ liệu banner"
      />
    </Frame>
  </Step>

  <Step title="Lưu hoặc hủy thao tác 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 banner, 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 dữ liệu banner">
    Người dùng nhấn vào nút

    <Icon icon="minus" color="#cfcfcf" size={15} />để **xóa dữ liệu** khỏi banner.

    <Frame caption="Nút xóa dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image177_4594d1306d.png"
        alt="Nút xóa dữ liệu banner trong giao diện quản lý"
        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 ảnh khỏi banner**, hoặc nhấn **“Hủy”** để **dừng quá trình xóa dữ liệu**.

    <Frame caption="Hộp xác nhận xóa dữ liệu">
      <img
        src="https://aimini-upload.sgp1.digitaloceanspaces.com/image228_c7e3b90a62.png"
        alt="Hộp xác nhận xóa dữ liệu banner"
        style={{
  borderRadius: "0.5rem",
  width: "100%",
  height: "auto",
  objectFit: "cover",
  objectPosition: "0 -38px" 
}}
        title="Xác nhận xóa dữ liệu"
      />
    </Frame>
  </Step>
</Steps>

**Hiệu ứng**

Người dùng có thể chọn các hiệu ứng chuyển trang giữa các ảnh trong banner, bao gồm: Mặc định, mờ dần ,sáng tạo, trượt ngang, lật, xếp chồng

<Frame caption="Hiệu ứng chuyển trang ">
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image229_282233b2c8.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**

**Chiều cao**

Người dùng có thể nhập hoặc tăng/giảm chiều cao của phần tử banner

* **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 phần tử banner với các phần tử khác bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image366_35b7222b1f.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 phần tử banner với lề màn hình điện thoại bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image367_73cc2d0d2f.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/image368_d42d4c4e72.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 phần tử banner với hình ảnh bên trong phần tử banner bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image369_df8f97f46e.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 phần tử banner với hình ảnh bên trong phần tử banner bằng nút

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image370_154b84e170.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/image371_513dd9d3ab.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 phần tử banner tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image372_1e4fa1ff81.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/image373_bc3d7d2896.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 phần tử banner tại ô nhập

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image374_7f430606a9.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/image375_14baf42af4.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 phần tử banner tại ô

<Frame caption>
  <img
    src="https://aimini-upload.sgp1.digitaloceanspaces.com/image376_94ec759be1.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/image377_93f1313f98.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} />