react-native-material-cards
Một thành phần thẻ thiết kế vật liệu, có thể tùy chỉnh và linh hoạt.
Xem thêm thông tin về Thẻ tại Google Material Design.
Cài đặt
npm install --save react-native-material-cards
Sử dụng Cơ bản
Nhúng các thành phần như sau:
import { Card, CardTitle, CardContent, CardAction, CardButton, CardImage } from 'react-native-material-cards'
Sau đó chèn thẻ vào mã của bạn:
<Card>
<CardImage
source={{uri: 'http://placehold.it/480x270'}}
title="Above all i am here"
/>
<CardTitle
title="This is a title"
subtitle="This is subtitle"
/>
<CardContent text="Your device will reboot in few seconds once successful, be patient meanwhile" />
<CardAction
separator={true}
inColumn={false}>
<CardButton
onPress={() => {}}
title="Push"
color="blue"
/>
<CardButton
onPress={() => {}}
title="Later"
color="blue"
/>
</CardAction>
</Card>
Tùy chọn Thành phần Thẻ
| Thuộc tính | Kiểu | Hiệu ứng | Giá trị Mặc định |
|---|---|---|---|
isDark |
boolean |
Nếu nền thẻ là màu tối, đặt màu văn bản sáng, thuộc tính này được truyền cho tất cả các thành phần con | true |
mediaSource |
object |
Hình ảnh để hiển thị trong nền của thẻ, với nội dung được đè lên, truyền cho thuộc tính source của Image |
undefined |
avatarSource |
object |
Hình ảnh hồ sơ để hiển thị trong nội dung hoặc phần tiêu đề của thẻ, tùy thuộc vào điều gì đến trước, truyền cho thuộc tính source của Image |
undefined |
style |
object |
Đối tượng style để gộp với style mặc định của nguồn gốc | {} |
Tùy chọn Thành phần Tiêu đề Thẻ
| Thuộc tính | Kiểu | Hiệu ứng | Giá trị Mặc định |
|---|---|---|---|
title |
string |
Văn bản tiêu đề | undefined |
subtitle |
string |
Văn bản phụ đề | undefined |
subtitleAbove |
boolean |
Xem liệu phụ đề có nên hiển thị phía trên tiêu đề hay không | false |
avatarSource |
object |
Hình ảnh hồ sơ để hiển thị, truyền cho thuộc tính source của Image |
undefined |
style |
object |
Đối tượng style để gộp với style mặc định của nguồn gốc | {} |
titleStyle |
object |
Đối tượng style để gộp với style mặc định của văn bản tiêu đề | {} |
subtitleStyle |
object |
Đối tượng style để gộp với style mặc định của văn bản phụ đề | {} |
Tùy chọn Thành phần Nội dung Thẻ
| Thuộc tính | Kiểu | Hiệu ứng | Giá trị Mặc định |
|---|---|---|---|
text |
string |
Văn bản nội dung, có thể bỏ qua và có thể hiển thị bất kỳ nội dung tùy chỉnh nào dưới dạng con | undefined |
avatarSource |
object |
Hình ảnh hồ sơ để hiển thị, truyền cho thuộc tính source của Image |
undefined |
style |
object |
Đối tượng style để gộp với style mặc định của nguồn gốc | {} |
textStyle |
object |
Đối tượng style để gộp với style mặc định của văn bản | {} |
Tùy chọn Thành phần Hình Ảnh Thẻ
| Thuộc tính | Kiểu | Hiệu ứng | Giá trị Mặc định |
|---|---|---|---|
source |
object |
Hình ảnh cần hiển thị, truyền cho thuộc tính source của Image, có thể bỏ qua và có thể hiển thị bất kỳ hình ảnh hoặc nội dung tùy chỉnh nào dưới dạng con |
undefined |
resizeMode |
string |
Xác định cách thay đổi kích thước của hình ảnh khi kích thước khung không phù hợp với kích thước hình ảnh gốc | stretch |
resizeMethod |
string |
Thay đổi kích thước hình ảnh khi kích thước hình ảnh khác với kích thước xem hình ảnh | resize |
singleLineTitle |
boolean |
Đặt thành true nếu bạn muốn tiêu đề chỉ có một dòng, được rút gọn với dấu ba chấm | true |
style |
object |
Đối tượng style để gộp với style mặc định của nguồn gốc | {} |
textStyle |
object |
Đối tượng style để gộp với style mặc định của văn bản | {} |
Tùy chọn Thành phần Hành động Thẻ
| Thuộc tính | Kiểu | Hiệu ứng | Giá trị Mặc định |
|---|---|---|---|
separator |
boolean |
Cho biết liệu có nên hiển thị dấu phân cách hay không | true |
inColumn |
boolean |
Cho biết liệu các nút có nên được xếp chồng lên nhau trong một cột hay không | false |
style |
object |
Đối tượng style để gộp với style mặc định của nguồn gốc | {} |
Tùy chọn Thành phần Nút Thẻ
| Thuộc tính | Kiểu | Hiệu ứng | Giá trị Mặc định |
|---|---|---|---|
title |
string |
Văn bản của nút, có thể bỏ qua và có thể hiển thị bất kỳ tiêu đề hoặc nội dung tùy chỉnh nào dưới dạng con | undefined |
color |
string |
Màu sắc của văn bản nút | màu cam |
onPress |
function |
Hàm sẽ được gọi khi nút được nhấn | noop (được định nghĩa tại src/utils) |
style |
object |
Đối tượng style để gộp với style mặc định của nguồn gốc | {} |
titleStyle |
object |
Đối tượng style để gộp với style mặc định của tiêu đề nút | {} |
Cần làm
- Thêm thẻ với phương tiện phụ bên cạnh
Chào đón PRs 🙂
Chi tiết tải xuống:
Tác giả: SiDevesh
Nguồn: https://github.com/SiDevesh/React-Native-Material-Cards
Giấy phép: MIT license
