项目作者: nicomontanari

项目描述 :
React Native material chip component
高级语言: JavaScript
项目地址: git://github.com/nicomontanari/react-native-material-chip.git
创建时间: 2020-04-24T15:47:48Z
项目社区:https://github.com/nicomontanari/react-native-material-chip

开源协议:MIT License

下载


React native material chip

Material chip

React Native component for Anroid and iOS inspired by Material Design Chip

Installing

Install react-native-material-chip:

```shell script
yarn add react-native-material-chip
or
npm install react-native-material-chip

  1. ## Usage
  2. ![Examples](Examples.png)
  3. ```jsx
  4. import React from 'react'
  5. import MaterialChip from "react-native-material-chip"
  6. const BasicExample = () => {
  7. return (
  8. <MaterialChip
  9. text="Example"
  10. checked={true}
  11. onPress={() => console.log('press')}
  12. onDelete={() => console.log('delete')}
  13. textStyle={{color: 'rgba(0, 0, 0, 0.87)'}}
  14. leftIcon={
  15. <View
  16. style={{
  17. height: MaterialChip.CHIP_LEFT_ICON_SIZE,
  18. width: MaterialChip.CHIP_LEFT_ICON_SIZE,
  19. borderRadius: MaterialChip.CHIP_RADIUS,
  20. backgroundColor: 'rgba(252,0,0,1)',
  21. borderWidth: 0
  22. }}
  23. ></View>
  24. }
  25. rightIcon={
  26. <View
  27. style={{
  28. height: MaterialChip.CHIP_RIGHT_ICON_SIZE,
  29. width: MaterialChip.CHIP_RIGHT_ICON_SIZE,
  30. borderRadius: MaterialChip.CHIP_RIGHT_ICON_RADIUS,
  31. backgroundColor: 'rgba(252,0,0,1)',
  32. borderWidth: 0
  33. }}
  34. ></View>
  35. }
  36. />
  37. )
  38. }
  39. export default BasicExample

<MaterialChip ></MaterialChip> component api

Props

The component extents the ViewProperties

Prop Type Default
text string
checked boolean false
onPress function null
leftIcon element null
rightIcon element null
onDelete function null
textStyle object null

Constants

Prop Type Value
CHIP_HEIGHT number 32dp
CHIP_RADIUS number 16dp
CHIP_MARGIN number 14dp
CHIP_TEXT_SIZE number 14dp
CHIP_TEXT_MARGIN number 16dp
CHIP_LEFT_ICON_SIZE number 24dp
CHIP_LEFT_ICON_RADIUS number 12dp