@4geit/rct-collapsible-component 中文文档教程

Question

@4geit/rct-collapsible-component

---

collapse elements

Demo

可以使用实时故事书查看组件的外观 @ http://react-packages.ws3.4ge.it

Installation

1. A recommended way to install @4geit/rct-collapsible-component is through npm package manager using the following command:

npm i @4geit/rct-collapsible-component --save

或者使用 yarn 使用以下命令：

yarn add @4geit/rct-collapsible-component

2. Depending on where you want to use the component you will need to import the class RctCollapsibleComponent to your project JS file as follows:

import RctCollapsibleComponent from '@4geit/rct-collapsible-component'

例如，如果你想使用在您的 App.js 组件中使用此组件，您可以在 JSX 代码中使用 RctCollapsibleComponent 组件，如下所示：

import React from 'react'
// ...
import RctCollapsibleComponent from '@4geit/rct-collapsible-component'
// ...
const App = () => (
  <div className="App">
    <RctCollapsibleComponent />
  </div>
)

AngularJS

rct-collapsible-component 也支持在 AngularJS 应用程序中集成，因此您可以将 AngularJS 组件指令调用到您的 AngularJS 应用程序中，它会正确显示，您可以在此处了解有关其 AngularJS 集成的更多详细信息。

以下是让组件在 AngularJS 应用程序上运行所需遵循的步骤：

• install the component thanks to npm as shown above
• add the following tag to the main index.html file of your app:

<script src="node_modules/@4geit/rct-ng-vendor/dist/index.ng.js"></script>
<script src="node_modules/@4geit/rct-collapsible-component/dist/index.ng.js"></script>

• inject the component AngularJS module to your app module as below:

angular
  .module('app', ['rct-collapsible-component'])
  // ...

• use the component directive where ever you want to add the component in your app as follow:

<rct-collapsible-component></rct-collapsible-component>