Test in Browser
Installation
npm
npm install react-border-wrapper
yarn
yarn add react-border-wrapper
Usage
Use the border wrapper in the same way you would use a <div>.
import * as React from 'react'
import BorderWrapper from 'react-border-wrapper'
class Example extends React.Component {
render () {
return (
<BorderWrapper>
// Content
</BorderWrapper>
)
}
}
Props
| Prop | Type | Description |
|---|---|---|
innerPadding |
string number |
Padding around the children on each edge. |
borderWidth |
string number |
Width of the border. |
borderRadius |
string number |
Radius of each corner. This radius is added on top of the inner padding. Thus, a large radius will create a large distance between the top and bottom borders. |
borderColour |
string |
CSS compatible string for the border colour |
borderType |
string |
CSS compatible LineStyle string to change the border drawing style |
topElement rightElement bottomElement leftElement |
Element |
JSX Element to be rendered at the specified side. If an element is not specified then all prop values for that side will be ignored. |
topPosition rightPosition leftPosition rightPosition |
number |
A number between 0 and 1 to indicate a precentage (0% to 100%) of where the component will be placed along the sides. Values greater than 1 or less than 0 will be at 1 and 0 respectively. |
topOffset rightOffset leftOffset rightOffset |
string number |
Offset the component on the given side by this value. Use this to help center or position each component to your desired location. |
topGap rightGap bottomGap leftGap |
string number |
Distance between the border and the position of the component to be rendered. |
Playground
Use the following link to play around with the props and find a proper style. It is highly encouraged to export the props and either report an issue with them or submit them as a style to be used by other users.
https://metroxe.github.io/react-border-wrapper/
License
MIT © Christopher Powroznik
-
原文地址：github.com/HuJiaoHJ/bl… React源码 React16源码之React Fiber架构 从源码看React异常处理 从源码看React.PureComponent 实践总结 web移动端布局的那些事儿 React Native转web方案：react-native-web React Native Icon方案：react-native-svg React Nat
-
本文将从三个方面分享 react native 转 web 方案：react-native-web react-native-web 的使用 react-native-web 源码分析 react-native-web 实践 react-native-web：github.com/necolas/rea… 使用 安装 yarn add react react-dom react-native-we
-
styled-components 是一个常用的 css in js 类库。和所有同类型的类库一样，通过 js 赋能解决了原生 css 所不具备的能力，比如变量、循环、函数等。 最简单的用法： import styled from 'styled-components' const Title = styled.h1` font-size: 1.5em; text-align:
-
(1)下载 yarn add react-draft-wysiwyg draftjs-to-html (2)创建组件rich-text-editor.jsx: import React, { Component } from ‘react’ import { EditorState, convertToRaw } from ‘draft-js’ import { Editor } from ‘re
-
中后台管理项目开发 使用react+antd实现中后台管理项目一些简单的项目功能 1.项目准备 1.1创建项目 //创建项目 pnpm create vite //安装依赖 pnpm i //启动项目 pnpm run dev 1.2.配置路由别名和服务器代理 在vite.config.js中配置 vite.config.js import { defineConfig } from 'vite
-
Ant Design Ant Design 是一个致力于提升『用户』和『设计者』使用体验的中台设计语言。它模糊了产品经理、交互设计师、视觉设计师、前端工程师、开发工程师等角色边界，将进行 UE 设计和 UI 设计人员统称为『设计者』，利用统一的规范进行设计赋能，全面提高中台产品体验和研发效率。 我们采用 React 封装了一套 Ant Design 的组件库，也欢迎社区其他框架的实现版本。 rea
-
移动跨平台框架React Native经过4年的发展，其生态已经变得异常丰富，在使用React Native开发项目的过程中，为了提高开发效率，我们经常会借鉴一些使用使用率比较高的开源库，根据大众的需求，对这些使用较高的 React-Native UI 库，我们做一个简单的总结和归类，方便大家更好地入门 React Native。 本文只是收集了一些常见的UI库和功能库，除了上面介绍的知名第三方库
-
meteor 可以快速构建 pc,移动端，桌面端应用。 最大的优点是：数据库的数据发生变化时，可以实时推送到前端，非常适用于实时展示的应用开发。 在 react,react-native 应用中，可以仅使用同一个 meteor 后台，实时向前端推送数据。 github 代码地址 metaor 安装 windows 安装 meteor 官方推荐 chocolatey 安装 meteor。 先从 ch
-
问题内容： 有没有一种方法可以像超级速记样式一样在CSS中组合border-top，border-right，border-left，border-bottom。 例如： 问题答案： 不，您不能在一个语句中全部设置它们。 通常，您至少需要三个属性： 但是，那将非常混乱。使用以下四个内容将更具可读性和可维护性：
-
描述 (Description) border是一个简写属性，用于设置元素周围边框的样式，颜色和宽度。 可能的值 (Possible Values) 可能的值是颜色，border-width的值和border-style的值中的一个或多个。 适用于 (Applies to) 所有HTML元素。 DOM语法 (DOM Syntax) object.style.border = "2px solid
-
这是Web开发人员的完整参考指南，其中列出了与万维网联盟推荐的层叠样式表规范2级中定义的边界相关的所有CSS属性。 单击任何属性以查看其描述的示例 - Sr.No. 财产和描述 1 border 设置元素边框的所有四个边框; value是一个或多个颜色， border-width的值和border-style的值。 2 border-bottom 设置元素的下边框; value是一个或多个颜色，
-
在此布局中，各种面板嵌套并由边框分隔。 语法 (Syntax) 以下是使用Border布局的简单语法。 layout: 'border' 例子 (Example) 以下是一个显示Border布局用法的简单示例。 <!DOCTYPE html> <html> <head> <link href = "https://cdnjs.cloudflare.com/ajax/libs/
-
描述 (Description) border-width是一个简写属性，用于设置元素的四个边框边的宽度。 可能的值 (Possible Values) length - 任何长度单位。 此属性的长度单位可能不是负数。 thin - 比设置为medium的边框更薄的边框。 medium - 一个比边框更粗的边框，比设置为粗边的边框更薄。 thick - 边框比边框设置为中等厚。 适用于 (Appl
-
描述 (Description) 设置元素的顶部边框; value是一个或多个颜色，border-top-width的值和border-style的值。 可能的值 (Possible Values) 可能的值是颜色，border-width的值和border-style的值中的一个或多个。 适用于 (Applies to) 所有HTML元素。 DOM语法 (DOM Syntax) object.s