更多读取

快速启动 | 安装 | 实例 | 参数

关于

更多读取 一个 React.js 软件包,用于创建带有"多读"按钮的短文本来扩充文本,由TypeScript支持所构建. 这个包提供了一个简单而易于使用的组件,用于用自定义按钮来缩短和扩展文本.

特征

• 支持类型
• 组件的每个部分( 容器、 文本、 按钮) 可自定义
• 它与服务器侧组件( SSR) 合作
• 支援班(Tailwind、Bootstrap等)
• 简单易用

开始

安装

要安装软件包 :

npm install @foxeian/react-read-more

快速启动

反应组件中的“ Read Morererea” 示例

import React from 'react';
import ReadMoreArea from '@foxeian/react-read-more';

export default function App() {
  return (
    <ReadMoreArea
      lettersLimit={100} // limit of letters (100 letters)
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </ReadMoreArea>
  );
}
);

“ 阅读更多区域” 自定义示例

import React from 'react';
import ReadMoreArea from '@foxeian/react-read-more';

const buttonStyle = {
  color: "blue",
  fontSize: "1rem",
  padding: "1.5rem",
  // Add any other CSS styles as needed
};

export default function App() {
  return (
    <ReadMoreArea
      className="flex flex-col" // classes styles of main div (tailwind)
      style={{ display: 'flex', flexDirection: 'column' }} // inline styles of main div
      expandLabel="Read more" // Expand Label
      collapseLabel="Read less" // Collapse Label
      textClassName="text-lg text-black" // classes styles of text (tailwind)
      textStyle={{ fontSize: '1rem', color: 'black' }} // inline styles of text
      buttonClassName="text-base text-green-700 p-6" // classes styles of button (tailwind)
      buttonStyle={buttonStyle} // inline styles of button
      lettersLimit={100} // limit of letters (100 letters)
    >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </ReadMoreArea>
  );
}
);

参数

许可证

麻省理工学院 伊曼纽尔·埃克桑