Panel 面板组件

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

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

面板组件

参数（props）

属性可选值

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

代码示例

简单的用法

本 Demo 演示最基础的用法。

查看源码在线预览

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

不同 status 状态表现的用法

本 Demo 演示最基础的用法。

查看源码在线预览

import React, {Component} from 'react';
import ReactDOM from 'react-dom';
import IcePanel from '@icedesign/panel';
class App extends Component {
  render() {
    return (
      <div style={{width: '400px'}}>
        <IcePanel status="primary" style={{marginBottom: '10px'}}>
          <IcePanel.Header>
            关雎
          </IcePanel.Header>
          <IcePanel.Body>
            <p style={{fontSize: '15px', margin: 0, lineHeight: 1.5, color: '#333'}}>
            参差荇菜，左右芼之。窈窕淑女，钟鼓乐之。
            </p>
          </IcePanel.Body>
        </IcePanel>
        <IcePanel status="success" style={{marginBottom: '10px'}}>
          <IcePanel.Header>
            关雎
          </IcePanel.Header>
          <IcePanel.Body>
            参差荇菜，左右采之。窈窕淑女，琴瑟友之。
          </IcePanel.Body>
        </IcePanel>
        <IcePanel status="info" style={{marginBottom: '10px'}}>
          <IcePanel.Header>
            关雎
          </IcePanel.Header>
          <IcePanel.Body>
            关关雎鸠，在河之洲。窈窕淑女，君子好逑。
          </IcePanel.Body>
        </IcePanel>
        <IcePanel status="warning" style={{marginBottom: '10px'}}>
          <IcePanel.Header>
            关雎
          </IcePanel.Header>
          <IcePanel.Body>
           参差荇菜，左右流之。窈窕淑女，寤寐求之。
          </IcePanel.Body>
        </IcePanel>
        <IcePanel status="danger" style={{marginBottom: '10px'}}>
          <IcePanel.Header>
            关雎
          </IcePanel.Header>
          <IcePanel.Body>
            求之不得，寤寐思服。悠哉悠哉，辗转反侧。
          </IcePanel.Body>
        </IcePanel>
      </div>
    );
  }
}
ReactDOM.render((
  <App />
), mountNode);

相关区块

暂无相关区块