Panel 面板组件

如果项目中使用的是 1.x 版本的基础组件(@alifd/next),请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @icedesign/panel@0.1.8 -S

面板组件

参数(props)

参数名说明必填类型默认值备注
status不同状态string

属性可选值

  • status: success || info || warning || danger

代码示例

简单的用法

本 Demo 演示最基础的用法。

Panel 面板组件 - 图1

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import IcePanel from '@icedesign/panel';
  4. class App extends Component {
  5. render() {
  6. return (
  7. <div>
  8. <IcePanel style={{marginBottom: '10px'}}>
  9. <IcePanel.Body>
  10. <p>山中相送罢,日暮掩柴扉。</p>
  11. <p>春草年年绿,王孙归不归。</p>
  12. </IcePanel.Body>
  13. </IcePanel>
  14. <IcePanel>
  15. <IcePanel.Header>
  16. 将进酒
  17. </IcePanel.Header>
  18. <IcePanel.Body>
  19. <p>君不见,黄河之水天上来,奔流到海不复回。</p>
  20. <p>君不见,高堂明镜悲白发,朝如青丝暮成雪。</p>
  21. <p>人生得意须尽欢,莫使金樽空对月。</p>
  22. <p>天生我材必有用,千金散尽还复来。</p>
  23. <p>烹羊宰牛且为乐,会须一饮三百杯。</p>
  24. <p>岑夫子,丹丘生,将进酒,君莫停。</p>
  25. <p>与君歌一曲,请君为我侧耳听。</p>
  26. <p>钟鼓馔玉不足贵,但愿长醉不愿醒。</p>
  27. </IcePanel.Body>
  28. <IcePanel.Footer>
  29. 诗仙李白
  30. </IcePanel.Footer>
  31. </IcePanel>
  32. </div>
  33. );
  34. }
  35. }
  36. ReactDOM.render((
  37. <App />
  38. ), mountNode);

不同 status 状态表现的用法

本 Demo 演示最基础的用法。

Panel 面板组件 - 图2

查看源码在线预览

  1. import React, {Component} from 'react';
  2. import ReactDOM from 'react-dom';
  3. import IcePanel from '@icedesign/panel';
  4. class App extends Component {
  5. render() {
  6. return (
  7. <div style={{width: '400px'}}>
  8. <IcePanel status="primary" style={{marginBottom: '10px'}}>
  9. <IcePanel.Header>
  10. 关雎
  11. </IcePanel.Header>
  12. <IcePanel.Body>
  13. <p style={{fontSize: '15px', margin: 0, lineHeight: 1.5, color: '#333'}}>
  14. 参差荇菜,左右芼之。窈窕淑女,钟鼓乐之。
  15. </p>
  16. </IcePanel.Body>
  17. </IcePanel>
  18. <IcePanel status="success" style={{marginBottom: '10px'}}>
  19. <IcePanel.Header>
  20. 关雎
  21. </IcePanel.Header>
  22. <IcePanel.Body>
  23. 参差荇菜,左右采之。窈窕淑女,琴瑟友之。
  24. </IcePanel.Body>
  25. </IcePanel>
  26. <IcePanel status="info" style={{marginBottom: '10px'}}>
  27. <IcePanel.Header>
  28. 关雎
  29. </IcePanel.Header>
  30. <IcePanel.Body>
  31. 关关雎鸠,在河之洲。窈窕淑女,君子好逑。
  32. </IcePanel.Body>
  33. </IcePanel>
  34. <IcePanel status="warning" style={{marginBottom: '10px'}}>
  35. <IcePanel.Header>
  36. 关雎
  37. </IcePanel.Header>
  38. <IcePanel.Body>
  39. 参差荇菜,左右流之。窈窕淑女,寤寐求之。
  40. </IcePanel.Body>
  41. </IcePanel>
  42. <IcePanel status="danger" style={{marginBottom: '10px'}}>
  43. <IcePanel.Header>
  44. 关雎
  45. </IcePanel.Header>
  46. <IcePanel.Body>
  47. 求之不得,寤寐思服。悠哉悠哉,辗转反侧。
  48. </IcePanel.Body>
  49. </IcePanel>
  50. </div>
  51. );
  52. }
  53. }
  54. ReactDOM.render((
  55. <App />
  56. ), mountNode);

相关区块

Panel 面板组件 - 图3

暂无相关区块