改进的盒子

类固醇上的盒子！

盒子状态

盒子（）无疑是{bs4现金}。多亏了AdminLTE API，{bs4现金}能够提供更多的交互性组件。例如，您可以：

随时了解任何盒子的状态。此状态捕获不同折叠、关闭、最大化等参数。
切换框。
关闭/恢复方框。
更新框属性：标题、状态、solidHeader、background、，宽度、高度、可折叠、可关闭和最大化。

要从该功能中受益，必须通过身份证件参数并在服务器端使用输入$<id>.让我们考虑一个例子：

图书馆（发亮）
图书馆（bs4现金）
用户界面<- 仪表板页面(
  标题= “盒子API”,
  仪表板标题(),
  仪表板边栏(),
  仪表板车身(
标签$风格(“正文{背景色：幽灵白}”),
    流体行(
      action按钮(“切换框”,“切换框”),
      action按钮(“删除框”,“删除方框”,类别= “bg-危险”),
      action按钮(“恢复框”,“还原框”,类= “bg-成功”),
      action按钮(“更新框”,“更新框”,类= “bg-primary”)
),
    br个(),
    箱(
      标题= text输出(“盒子状态”),
      “箱体”,
      标识= “我的盒子”,
      可折叠的= 真的,
      可关闭的= 真的,
      绘图输出(“绘图”)
)
)
)

服务器<- 功能（输入、输出、会话）{
输出$情节<- 渲染图({
    请求(!输入$我的盒子$坍塌）
    情节(rnorm公司(200))
})

输出$箱_状态<- renderText（渲染文本）({
状态<- 如果（输入$我的盒子$坍塌）“崩溃” 其他的 “未折叠”
    粘贴(“我的盒子是”，州）
})

  observeEvent观察事件（输入$切换框{
    updateBox（更新框）(“我的盒子”,行动= “切换”)
})

  observeEvent观察事件（输入$删除框{
    updateBox（更新框）(“我的盒子”,行动= “删除”)
})

  observeEvent观察事件（输入$恢复框{
    updateBox（更新框）(“我的盒子”,行动= “恢复”)
})

  observeEvent观察事件（输入$更新框{
    updateBox（更新框）(
      “我的盒子”,
      行动= “更新”,
      选项= 列表(
        所有权= 氢气(“新标题”,仪表板标签(1,颜色= “主要”)),
        状态= “危险”,
        实心页眉= 真的,
        宽度= 4
)
)
})

  观察事件（输入$我的盒子$可见{
坍塌的<- 如果（输入$我的盒子$坍塌）“崩溃” 其他的 “未折叠”
看得见的<- 如果（输入$我的盒子$可见）“可见” 其他的 “隐藏”
消息<- 粘贴(“我的盒子是”，坍塌，“和”，可见）
    干杯(
      标题=消息，
      选项= 列表(
        自动隐藏= 真的,
        类= “bg-墨水”,
        位置= “右上”
)
)
})
}

闪亮应用程序（用户界面，服务器）

我们称之为更新框（）函数，指定操作实现：

切换
去除
恢复
更新

了解盒子的状态会大大打开新的可能性在应用程序中，从而增加了交互性。如果你想了解更多有关底层机制的信息，查看box小部件文档.

盒子组件

使用｛bs4现金｝，您可以嵌入标签、侧栏和框标题中的下拉菜单。

方框工具。从左到右：boxLabel、boxDropdown、可折叠和可关闭按钮，boxSidebar触发器。

方框标签

框标签（）在盒子（） 标签狭槽。它们通常包含数字或短文本。

方框提要栏

方框提要栏（）通过调用盒子（）侧栏参数。侧边栏有一个身份证件允许在服务器端以编程方式切换更新方框边栏（）。此组件通常用于包含您不想在框中显示的输入元素，而框体通常包含诸如图或表之类的可视化。方框提要栏（）高度可定制，因为用户可以更改背景颜色、宽度和图标触发，后者显示如图所示，位于方框标题的最右侧@ref（图：boxTools）。下面是一个示例，演示如何设置侧栏并切换它。

闪亮应用程序(
  用户界面= 仪表板页面(
    收割台= 仪表板标题(),
    车身= 仪表板车身(
      箱(
        标题= “更新框侧边栏”,
        可关闭的= 真的,
        宽度= 12,
        高度= “500像素”,
        实心页眉= 错误的,
        可折叠的= 真的,
        action按钮(“更新”,“切换卡片侧边栏”),
        侧边栏= box提要栏(
          标识= “mycardsidebar”,
          滑块输入(
            “obs”,
            “观察次数：”,
            最小值= 0,
            最大值= 1000,
            价值= 500
)
),
        绘图输出(“distPlot”)
)
),
    侧边栏= 仪表板边栏()
),
  服务器= 功能（输入、输出、会话）{
    观察(打印（输入$mycardsidebar））

输出$distPlot（分布图）<- 渲染图({
      历史(rnorm公司（输入$obs））
})

    observeEvent观察事件（输入$更新{
      更新框提要栏(“mycardsidebar”)
})
}
)

在服务器？当用户单击时，您希望立即打开侧边栏的图像一个特定的操作按钮。这绝对是可能的。

方框下拉列表

框下拉（）是一个超级强大的工具下拉项的行为可能类似于操作按钮。此功能允许将交互性无缝添加到box组件并在中收集特征一个地方。在下面的示例中，单击第一项会触发toast（）.

闪亮应用程序(
  用户界面= 仪表板页面(
    仪表板标题(),
    仪表板边栏(),
    仪表板车身(
      箱(
        标题= “可关闭的下拉框”,
        可关闭的= 真的,
        宽度= 12,
        状态= “警告”,
        实心页眉= 错误的,
        可折叠的= 真的,
        下拉菜单= box下拉列表(
          方框下拉项(“单击我”,标识= “下拉项”,图标= 偶像(“心”))，
          方框下拉项(“项目2”,href公司= "https://www.google.com/"),
          下拉分隔符(),
          方框下拉项(“项目3”,图标= 偶像(“第个”))
),
        “我的盒子”
)
)
),
  服务器= 功能（输入、输出）{
    observeEvent观察事件（输入$下拉项{
      干杯(
        标题= “嗨！”,
        选项= 列表(
          自动隐藏= 真的,
          类= “bg-墨水”,
          位置= “右上”
)
)
})
}
)

其他盒子

{bs4现金}提供了更多盒组件，以便能够适应各种情况。如果您想创建一个包含评论，带有社交内容？

用户框

用户框（）旨在突出显示用户配置文件。它有许多常用参数盒子（）总体上是一样的布局。两者之间的两个主要区别盒子（）和用户框（）是：

在框标题中添加用户图像的功能。
可选地在框标题中添加背景图像。
这个颜色参数仅应用于框标题。

此外，您还可以选择两种类型：居中图像或左对齐图像。

这个标题参数需要一个用户描述（）:

用户描述(
  标题= “娜迪娅·卡迈克尔”,
  副标题= “首席开发人员”,
  类型= 2,
  图像= "https://adminlte.io/themes/adminlte/dist/img/user7-128x128.jpg",
)

用户框（）也可以从服务器完全更新侧面，因为它建在顶部盒子（）功能：

闪亮应用程序(
  用户界面= 仪表板页面(
    仪表板标题(),
    仪表板边栏(),
    仪表板车身(
      action按钮(“更新框”,“更新”),
      用户框(
        标识= “用户框”,
        标题= 用户描述(
          标题= “娜迪娅·卡迈克尔”,
          副标题= “首席开发人员”,
          类型= 2,
          图像= "https://adminlte.io/themes/adminlte/dist/img/user7-128x128.jpg",
),
        状态= “主要”,
        梯度= 真的,
        背景= “主要”,
        方框工具大小= “xl”,
        “这里有一些文字！”,
        页脚= “页脚在这里！”
)
),
    标题= “userBox”
),
  服务器= 功能（输入、输出）{
    observeEvent观察事件（输入$更新框{
      updateBox（更新框）(
        “用户框”,
        行动= “更新”,
        选项= 列表(
          标题= 用户描述(
            标题= “Jean Box”,
            副标题= “开发人员”,
            类型= 1,
            图像= "https://adminlte.io/themes/adminlte/dist/img/user3-128x128.jpg",
),
          状态= “危险”,
          背景= 无效的,
          实心页眉= 错误的,
          宽度= 4
)
)
})
}
)

社交信箱

A类社交框（）专门用于包含事件、评论、，任何与人有关的东西。这个标题参数主机用户块（）:

userBlock（用户阻止）(
  图像= "https://adminlte.io/themes/adminlte/dist/img/user4-128x128.jpg",
  标题= “社交盒”,
  副标题= “示例01.05.2018”
)

元素，如附件块（）和用户消息（）与此组件非常匹配。这个...插槽可以承载多个方框注释,包含在用户注释中。目前，没有程序化的方法（理解为否更新功能可用）处理它们只是未来发布的{bs4现金}显然会填满这个差距。下面的应用程序显示了一个社交框（）:

闪亮应用程序(
  用户界面= 仪表板页面(
    仪表板标题(),
    仪表板边栏(),
    仪表板车身(
      社交框(
        标识= “社交箱”,
        标题= 用户块(
          图像= "https://adminlte.io/themes/adminlte/dist/img/user4-128x128.jpg",
          标题= “社交盒”,
          副标题= “示例01.05.2018”
),
        action按钮(“更新框”,“刷新”),
        “这里有一些文字！”,
        br个(),br个(),
        选项卡面板(
          选项卡面板(
            “新闻”,
            附件块(
              图像= "https://www.sammobile.com/wp-content/uploads/2017/11/Camel.png",
              标题= “测试”,
              href公司= "https://google.com网站",
              “这就是内容”
)
),
          选项卡面板(
            “消息”,
            用户消息(
              宽度= 12,
              状态= “危险”,
              用户消息(
                作者= “亚历山大·皮尔斯”,
                日期= “1月20日下午2:00”,
                图像= "https://adminlte.io/themes/adminlte/dist/img/user1-128x128.jpg",
                类型= “已收到”,
                “这个模板真的是免费的吗？真是难以置信！”
),
              用户消息(
                作者= “莎拉·布洛克”,
                日期= “1月23日下午2:05”,
                图像= "https://adminlte.io/themes/adminlte/dist/img/user3-128x128.jpg",
                类型= “已发送”,
                “你最好相信！”
)
)
)
),
        重叠地(X（X）= 1:10,乐趣= 功能（i）{
          方框注释(
            图像= "https://adminlte.io/themes/adminlte/dist/img/user3-128x128.jpg",
            标题= 粘贴(“评论”，i），
            日期= “2018年5月1日”,
            粘贴0(“这个”，我，“-th注释”)
)
}),
        页脚= “页脚在这里！”
)
),
    所有权= “社交盒”
),
  服务器= 功能（输入、输出）{
    observeEvent观察事件（输入$更新框{
      updateBox（更新框）(
        “社交箱”,
        行动= “更新”,
        选项= 列表(
          标题= userBlock（用户阻止）(
            图像= "https://adminlte.io/themes/adminlte/dist/img/user3-128x128.jpg",
            标题= “社交框已更新”,
            副标题= “今天”
)
)
)
})
}
)