Slidev

FAQ

Grids

Vì Slidev dựa trên Web nên bạn có thể áp dụng bất kỳ bố cục lưới nào tùy thích. CSS Grids, flexboxes, hoặc thậm chí Masonry, bạn có toàn quyền kiểm soát.

Vì chúng tôi đã tích hợp sẵn Windi CSS, đây là một cách đơn giản để bạn tham khảo:

<div class="grid grid-cols-2 gap-4">
<div>

The first column

</div>
<div>

The second column

</div>
</div>

Hơn nữa, bạn có thể tùy chỉnh kích thước của từng cột như:

<div class="grid grid-cols-[200px,1fr,10%] gap-4">
<div>

The first column (200px)

</div>
<div>

The second column (auto fit)

</div>
<div>

The third column (10% width to parent container)

</div>
</div>

Tìm hiểu thêm về Windi CSS Grids.

Positioning

Slide được xác định theo kích thước cố định (mặc định 980x552px) và chia tỷ lệ để vừa với màn hình người dùng. Bạn có thể an toàn sử dụng position absolute trong slide của mình vì chúng sẽ scale cùng với màn hình.

Ví dụ:

<div class="absolute left-30px bottom-30px">
This is a left-bottom aligned footer
</div>

Để thay đổi kích thước thực của canvas, bạn có thể chuyển các tùy chọn canvasWidth trong frontmatter đầu tiên của mình:

---
canvasWidth: 800
---

Kích thước Font

Nếu bạn cảm thấy kích thước font trong các slide của mình quá nhỏ, bạn có thể điều chỉnh nó theo một số cách:

Ghi đè Style cục bộ

Bạn có thể ghi đè style cho từng trang slide bằng thẻ <style>.

# Page 1

<style>
h1 {
  font-size: 10em;
}
</style>

---

# Page 2

This will not be affected.

Tìm hiểu thêm về Embedded Styles

Ghi đè Style toạn cục

Bạn có thể cung cấp các style toàn cục tùy chỉnh bằng cách tạo ./style.css, ví dụ

/* style.css */ 

h1 {
  font-size: 10em !important;
}

Tìm hiểu thêm về: Global Style

Scale Canvas

Thay đổi kích thước thực tế của canvas sẽ chia tỷ lệ tất cả nội dung của bạn (văn bản, hình ảnh, components, v.v.) và các slide

---
# mặc định: 980
# vì canvas nhỏ hơn, kích thước hình ảnh sẽ trở nên lớn hơn
canvasWidth: 800
---

Sử dụng Transform

Chúng tôi cung cấp một component tích hợp sẵn <Transform />, là một lớp wrapper của thuộc tính transform CSS.

<Tranform :scale="1.4">

- Item 1
- Item 2

</Transform>