#13 黑色边框的容器组件

作者: 康乐芳华 | 来源:发表于2017-12-19 15:33 被阅读0次

#13 黑色边框的容器组件
flutter text()，Container（），listV
Flutter2.6 Container组件 Text组件详解
CSS揭秘整理之半透明边框
Flutter布局锦囊---圆框的表单字段
JComponent 类的功能
新贵 Flutter （8）动画
react-router
margin和padding的区别
React Native 入门（四）

实现一个组件 BlackBorderContianer，它会把作为它的嵌套结构的每个直接子元素都用一个黑色边框的 div包裹起来。例如：

<BlackBorderContainer>
  <div className='name'>My Name：Lucy</div>
  <p className='age'>
    My Age：<span>12</span>
  </p>
</BlackBorderContainer>

最后的 div.name 和 p.age 都具有一层黑色边框（1px solid #000000）外层结构。

class BlackBorderContainer extends Component{
    render(){
        return (
            <div>
                {
                    this.props.children.map(function(el){
                        return (<div className="border">{el}</div>)
                    })
                }
            </div>
        )
    }
}

#13 黑色边框的容器组件
实现一个组件 BlackBorderContianer，它会把作为它的嵌套结构的每个直接子元素都用一个黑色边框...
flutter text()，Container（），listV
text组件设置文本样式 Container组件 Container组件decoration修饰器，设置容器的边框...
Flutter2.6 Container组件 Text组件详解
1.Container组件container 容器组件 (div)decoration 背景边框颜色 {borde...
CSS揭秘整理之半透明边框
1.半透明边框问题: 如果我们要为一个容器设置红色背景和一道黑色半透明边框，我们可能会这样写: 但是效果却是这样...
Flutter布局锦囊---圆框的表单字段
设计给的效果如下：拿到设计后，先把整体拆分成几个部分： “黑色圆角边框”，因为文本字段（TextField）组件...
JComponent 类的功能
边框设置：使用 setBorder() 方法可以设置组件外围的边框，使用一个 EmptyBorder 对象能在组件...
新贵 Flutter （8）动画
我们都知道 Container （容器）组件提供一些用于定义高度、宽度、背景色、内边距以及边框等属性。在实际开发中...
react-router
安装示例容器组件 react-router的容器组件，就是最外层包括所有路由的组件，所有路由活动需要在容器组件...
margin和padding的区别
margin和padding的区别 margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离。（外边距...
React Native 入门（四）
margin与padding的区别在CSS中margin是指从自身边框到另一个容器边框之间的距离，就是容器外距离...