如何在组件的 bit dev mdx 文档的概述选项卡中添加附加属性？
问题描述 投票：0回答：1
我们有一个通过私有范围发布的位组件。我们想要添加一些附加属性以及组件文档概述部分中显示的默认属性。我已经搜索了所有的位文档，但仍然不确定我们是否可以做到这一点。
请查看下面的屏幕截图。名称、类型、默认值、说明以及我想添加的其他字段。有谁可以帮忙吗？
1个回答
0
投票
投票
您正在寻找的内容称为“插槽预览”。 您可以在这里查看文档： https://bit.cloud/bitdev/harmony/docs/integration-slots
最新问题
- 如何在Python中连接两个命令字？
- C++ 中的嵌套注释
- 有没有办法在next.js中实现outlet？在常规反应路由器中，我可以使用 <outlet> 来渲染子组件
- ActivityKit中SwiftUI选择.timer样式时如何控制日期格式
- 通过 bootstrap 在对话框模式上显示 PDF 文件引导示例<...</desc> <question vote="13"> <p>我的要求是，单击按钮后，应在对话框模式中显示 pdf 文件。 请帮忙！</p> <pre><code><!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>View PDF</h2> <!-- Trigger the modal with a button --> <button type="button" href="A - Cover Page.pdf" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">A - Cover Page</button> <!-- Modal --> <div class="modal fade" id="myModal" role="dialog"> <div class="modal-dialog"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> </div> <div class="modal-body"> <p>Some text in the modal.</p> </div> </div> </div> </div> </div> </body> </html> </code></pre> </question> <answer tick="false" vote="27"> <p>您还可以将 pdf 嵌入模式中。 像这样：</p> <pre><code><embed src="sample.pdf" frameborder="0" width="100%" height="400px"> </code></pre> <p>这对我有用</p> </answer> <answer tick="true" vote="18"> <p>很抱歉让您失望，但默认情况下不能仅在模式中显示 pdf。这不是有意的行为。即使使用 <pre><code><iframe></code></pre>，您也无法在引导模式内渲染 pdf。此外，大多数在线提供的 hack 都不支持跨浏览器。更理想的方法是使用插件，我会给你一些链接，你可以使用它们来实现你想要的。</p> <p>1）结账<pre><code>PDFObject</code></pre>JS，</p> <pre><code><script src="https://github.com/pipwerks/PDFObject/blob/master/pdfobject.min.js"></script> </code></pre> <p>PDFObject 将 PDF 文件嵌入到 HTML 文档中。 <a href="http://pdfobject.com/" rel="noreferrer">链接</a>.</p> <p>2) Bootstrap 的简单模态插件。 <a href="http://bootsnipp.com/snippets/VX7EN" rel="noreferrer">演示片段</a>和<a href="http://saribe.github.io/eModal/#demo" rel="noreferrer">网站</a></p> <p>3) 使用 jQuery 对话框模态弹出窗口。 <a href="http://www.aspsnippets.com/demos/1261/" rel="noreferrer">演示</a>。</p> <p>希望有帮助。</p> </answer> <answer tick="false" vote="13"> <pre><code><div class="modal fade" id="modal-agreement"> <div class="modal-dialog modal-lg" role="document"> <div class="modal-content"> <div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> <object type="application/pdf" data="path/to/pdf" width="100%" height="500" style="height: 85vh;">No Support</object> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> </code></pre> </answer> <answer tick="false" vote="2"> <p>你也可以试试这个</p> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>DisplayPDF</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> <answer tick="false" vote="1"> <p>可以在modal/popup中添加iframe。</p> <pre><code><iframe src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="600" height="780" style="position: absolute;top: 66px;bottom: 0px;right: 0px;width: 100%;border: none;margin: 0;padding: 0;overflow: hidden;z-index: 3;height: 100%;"></iframe> </code></pre> <p>根据您的要求，您可以设置参数的样式。</p> </answer> <answer tick="false" vote="1"> <p>在 JS 中使用 Vuejs 全屏模态显示 pdf。</p> <p><strong>html</strong></p> <pre><code> <div class="modal " tabindex="-1" id="idXyz"> <div class="modal-dialog modal-fullscreen"> <div class="modal-content"> <div class="modal-header"> <h5 class="modal-title">[[formName]]</h5> <button type="button" class="btn btn-danger" data-bs-dismiss="modal" aria-label="Close">close </button> </div> <div class="modal-body"> <embed v-bind:src="getUrl" frameborder="0" width="100%" height="100%"> </div> </div> </div> </div> </code></pre> <p><strong>Javascript</strong></p> <pre><code>var pdfVueModal = new Vue({ el: '#idXyz', data: { getUrl: null, formName: null }, methods: { showPdf: function (getUrl, formName) { this.getUrl = getUrl; this.formName = formName; $('#idXyz').modal('show'); } }, delimiters: ["[[", "]]"], }); </code></pre> </answer> <answer tick="false" vote="0"> <p>但是我收到这样的错误：不允许加载本地资源：file:///D:/</p> <p>好吧...您的浏览器不允许直接从硬盘加载该文件。在你看来，你可能会得到这样的东西：</p> <pre><code><img src="C:\xampp\htdocs\socialNet\public\uploads\joew.png" /> </code></pre> <p>您需要浏览器的 URL 才能访问此图像。在您看来，您需要类似的东西：</p> <p>Laravel 中的 asset() 函数从公共文件夹创建一个 URL 并附加您提供的参数。因此，这将创建一个类似以下的 URL：<pre><code>http://localhost/public/uploads/joew.png</code></pre></p> <p>编辑：您指定的文件夹<pre><code>(storage_path)</code></pre>可能根本无法被浏览器读取。将上传更改为<pre><code>public_path('uploads')</code></pre>，即可访问。</p> </answer> <answer tick="false" vote="0"> <p></p><div data-babel="false" data-lang="js" data-hide="false" data-console="true"> <div> <pre><code><!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <title>DisplayPDF</title> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <!-- Trigger the modal with a button --> <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button> <!-- Modal --> <div id="myModal" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <!-- Modal content--> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal">×</button> <h4 class="modal-title">Modal Header</h4> </div> <div class="modal-body"> <embed src="~file:///C:/Users/hp/Downloads/sb_finance.pdf" frameborder="0" width="100%" height="400px"> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div> </div> </body> </html></code></pre> </div> </div> <p></p> </answer> </body></html>
- 有什么方法可以预览压缩文件（zip、rar、7z、...）中的图像吗？
- Qt中如何查找信号槽关系？
- 关闭Python/Gurobi中回调的输出标志
- 连接到通过单个 Qt.createComponent 调用创建的所有 QML 对象
- Ubuntu 18.04 LTS、ROS，无法加载 LZ4 支持的 Python 扩展。 LZ4压缩将不可用
- ODOO 在现场使用隐形属性 |条件：如果数字是0.0
- JavaScript 嵌套 AJAX 调用并承诺如何正确链接？
- async/await 是异步还是同步？
- 无效的数字参数'/Wsign-compare'：无法在Windows上安装pip包或构建相应的库
- 如何使用 IntelliJ 更改项目的分支？
- 在这种情况下我应该怎么做才能更正此代码？
- IntelliJ 单元测试中 Apache poi 和 commons 之间的 NoSuchMethodError Charsets.toCharset()
- Tosca 中的字符串切片
- 新的 Firebase 身份验证计费如何工作以及为什么我们需要“通过身份平台升级到 Firebase 身份验证才能访问此功能。”？
- 在 Keycloak 测试容器中的测试之间清理数据库
© www.soinside.com 2019 - 2024. All rights reserved.