ดาวน์โหลด Snacks - ดาวน์โหลดซอร์สโค้ด Snacks

Snacks

ส่วนประกอบของบุคคลที่สาม

v0.0.159

ดาวน์โหลด

ของว่าง

ไลบรารีองค์ประกอบ JavaScript โดย Instacart

โปรดทราบ: เรายังอยู่ในขั้นตอนก่อนวางจำหน่าย หากคุณเลือกที่จะใช้ของว่างโปรดเตรียมพร้อมสำหรับการเปลี่ยนแปลงการเปลี่ยนแปลงในอนาคต

การติดตั้ง

คุณสามารถใช้ yarn หรือ npm เพื่อติดตั้งของว่างและการพึ่งพา

ด้วยเส้นด้าย

yarn add ' ic-snacks '

ด้วย NPM

npm install ' ic-snacks '

การติดตั้งการพึ่งพาเพียร์

ของว่างมีการพึ่งพาเพียร์ไม่กี่ที่จำเป็นในการใช้ห้องสมุด

หากคุณมีไลบรารีเหล่านี้อยู่ในการพึ่งพาแอปของคุณอยู่แล้วไม่จำเป็นต้องติดตั้งอีกครั้ง

สำหรับไลบรารีองค์ประกอบหลัก:

prop-types v15 หรือ v16
@Instacart/Radium V18+
ตอบสนอง V15 หรือ V16
Reactdom V15 หรือ V16

หากคุณต้องการใช้แอนิเมชั่น: React-Transition-Group V2.2

การพัฒนาในท้องถิ่นเป็นการพึ่งพาอาศัยกัน

บางครั้งอาจเป็นประโยชน์ในการทำงานในโครงการนี้ในพื้นที่และดูการเปลี่ยนแปลงในแอพอื่น สามารถทำได้โดยใช้ลิงก์ NPM

 # From this directory
npm link
# go to the app you are working on
cd ../workspace/my_working_app
# symlink this app
npm link ic-snacks

ในการย้อนกลับกระบวนการคุณสามารถทำสิ่งต่อไปนี้ได้

 # go to the app you are working on
cd ../workspace/my_working_app
# remove symlink
npm unlink ic-snacks

ด้วยเส้นด้าย

yarn add @instacart/radium
yarn add prop-types
yarn add react
yarn add react-dom
yarn add react-transition-group

ด้วย NPM

npm install @instacart/radium
npm install prop-types
npm install react
npm install react-dom
npm install react-transition-group

การใช้งาน

ใช้องค์ประกอบ:

 import { CircleButton } from 'ic-snacks'

const MyComponent = props => {
  const doYes = e => { alert ( 'Snacks are the best!' ) }
  const doNo = e => { alert ( 'Wrong choice, choose again.' ) }

  return (
    < div >
      < p > Do you love snacks? </ p >
      < CircleButton onClick = { doYes } > Yes </ CircleButton >
      < CircleButton onClick = { doNo } > No </ CircleButton >
    </ div >
  )
}

องค์ประกอบที่ซับซ้อนมากขึ้น:

 import React , { Component } from 'react'
import { NavigationPills } from 'ic-snacks'

const choices = [
  { text : 'bananas' } ,
  { text : 'carrots' } ,
  { text : 'watermelon' } ,
  { text : 'snacks' } ,
  { text : 'kale' } ,
  { text : 'endives' } ,
  { text : 'arugula' } ,
  { text : 'spinach' } ,
  { text : 'potatoes' }
]

class Navigation extends Component {
  static state = {
    activePill : choices [ 0 ]
  }

  render ( ) {
    return (
      < div >
        < NavigationPills
          pills = { choices }
          onPillClick = { ( e , choice ) => {
            e . preventDefault ( ) ;
            setState ( { activePill : choice . text } )
            console . log ( 'Choice clicked!' , choice )
          } }
          label = 'Favorite healthy snack:'
          activePill = { state . activePill }
        />
      </ div >
    )
  }
}