在使用 React 开发前端应用程序时，我们时常需要使用 UI 组件库。然而，对于某些用例，我们需要自己编写自定义组件。这时候，一个好的选择是使用已经存在的 NPM 包，例如 boundless-segmented-control。
什么是 boundless-segmented-control?
boundless-segmented-control 是一个 React 组件，它可以用于创建一组按钮，这些按钮被分成一个或多个段。这个库的使用非常简单，并且可以定制化，可以渲染各种不同的按钮，包括文本，图像和图标。
安装 boundless-segmented-control
我们可以使用 npm 来安装 boundless-segmented-control：
--- ------- ---------------------------
基本使用
一旦安装好，我们就可以在 React 应用程序中使用 boundless-segmented-control。上传至服务器上的图片无法显示？图片缓存的问题吗？是不是使用了许多的图片，使得打开速度过慢？从而影响用户的体验和评价。
我们首先需要在代码中导入该库：
------ ---------------- ---- ------------------------------
然后，我们可以在 JSX 中渲染组件并传递一些属性：
-----------------
-----------
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- -
--
--上面的代码将渲染三个按钮。每个按钮都有一个标签和值。在这个例子中，标签是分段控件的名称，而值则是该按钮的标识符。当用户点击一个按钮时，将调用回调函数并将该按钮的值传递给回调函数。
我们还可以通过设置属性来自定义分段控件的外观和行为：
-----------------
-----------
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- -
--
-----------------
---------------------
----------------- -- --------------------- ------- -----------
--在这个例子中：
selectedIndex属性指定要选中哪个部分。在该示例中，第二个部分被选中。activeColor属性指定活动按钮的颜色。onSelect属性指定当用户单击某个按钮时要调用的回调函数。
自定义分段控件
分段控件是一个非常定制化的UI组件。 boundless-segmented-control提供了很多方式来自定义外观和功能，其中一些包括：
- 渲染器
- 样式化
- 属性
渲染器
可以通过设置一个渲染器将分段控件中的单个按钮的样式化和布局。在 self-referenced HTML elements 中，如使用的 Flex、Grid，可以通过 CSS 实现高级的自定义渲染，让整体页面的设计变得优雅。以下是一个渲染器函数的示例：
-------- ----------------------- ------ --------- -
------ -
---- -------- ---------------- -------- - --------- - ---------- -------- -- ------- - ---
---------------
------
--
-要使用自定义渲染器，我们可以将其作为 SegmentedControl 组件的 renderer 属性传递：
-----------------
-----------
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- -
--
-------------------------
-----------------
---------------------
----------------- -- --------------------- ------- -----------
--在这种情况下，customRenderer 函数将使用为分段控件渲染每个按钮。 Segment 对象以参数的形式传递给渲染器，因此我们可以访问它的 label 和 value 属性，并相应地以我们需要的方式对其进行渲染。
样式化
boundless-segmented-control允许我们自定义样式，从而使其UI元素更符合我们的设计要求。这里有一些样式可以自定义：
分段内部样式
可以使用内部 SegmentedControl 风格（例如颜色和字体大小），可以使用以下代码：
------------------ - ---------- ----- ------ -------- -------- ----- -------------- ---- --------- ------- ----------- - --- --- ---------------- -
分段外部样式
可以使用外部 SegmentedControl 风格（例如背景颜色和边距），可以使用以下代码：
---------------------------- - ----------- -------- ------- ----- -------- ----- -
分段激活状态样式
可以使用激活状态分段的颜色等属性，在我们的例子中，可以使用以下代码：
------------------ --------------- - ----------- -------- ------ ----- -
将上述 CSS 属性添加到 React 组件的 CSS 文件中以自定义分段控件的外观：
------ -------------------------
-----------------
-----------
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- -
--
-----------------
----------------- -- --------------------- ------- -----------
--属性
除了上述自定义方式之外，我们还可以使用 props 对分段控件进行更细粒度的自定义。以下是一些最常用的属性：
| 属性 | 描述 | 类型 |
|---|---|---|
segments |
一个对象数组，每个对象表示要显示的分段。 | Array<{ label: string, value: any }> |
selectedIndex |
要高亮显示的段索引。 | number |
onSelect |
用户单击一个切换时要调用的回调函数。 | (value: any) => void |
activeColor |
活动分段的颜色。 | string |
示范代码
以下是一个完整的示例代码，展示了如何在分段控件中使用自定义渲染器和样式化：
------ ----- ---- --------
------ ---------------- ---- ------------------------------
------ -------------------------
-------- ----------------------- ------ --------- -
------ -
---- -------- ---------------- -------- - --------- - ---------- -------- -- ------- - ---
---------------
------
--
-
-------- ----- -
------ -
---- ----------------------------------------
-----------------
-----------
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- --
- ------ -------- --- ------ ---------- -
--
-------------------------
-----------------
---------------------
----------------- -- --------------------- ------- -----------
--
------
--
-
------ ------- ----结论
在本文中，我们涵盖了如何使用 boundless-segmented-control，这是一个简单而功能强大的 React 组件，用于创建自定义分段控件。我们看到可以通过示例代码来学习如何使用和自定义这种控件，为 React 应用程序添加一个简单而灵活的组件。
虽然本文的示例是基于 React 程序，但是在其他 Web 应用程序平台上也可以使用这种控件，并进行类似的自定义操作。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/60055fc781e8991b448dd41c