mirror of
https://github.com/m5stack/m5-docs.git
synced 2026-05-20 10:23:01 -07:00
change faq style and update some faq and add faq search function
This commit is contained in:
Sean
+164
-4
@@ -9,9 +9,9 @@ a {
|
||||
|
||||
.markdown-section {
|
||||
max-width: 80%;
|
||||
margin-top: 25px;
|
||||
padding-left:80px;
|
||||
padding-right:0px;
|
||||
margin-top: 40px;
|
||||
/* padding-left:80px;
|
||||
padding-right:0px; */
|
||||
}
|
||||
|
||||
.markdown-section a {
|
||||
@@ -373,7 +373,7 @@ div.card-img-overlay:hover {
|
||||
position: fixed;
|
||||
z-index: 1001;
|
||||
top: 20px;
|
||||
left: 18%;
|
||||
left: 20%;
|
||||
height: 56px;
|
||||
line-height: 0px;
|
||||
padding: 0 20px;
|
||||
@@ -405,13 +405,28 @@ div.card-img-overlay:hover {
|
||||
|
||||
body[data-page="index.md"] .search {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body[data-page="en/faq.md"] .search {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body[data-page="index.md"] .markdown-section {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
body[data-page="zh_CN/README.md"] .search {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body[data-page="zh_CN/faq.md"] .search {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
body[data-page="zh_CN/README.md"] .markdown-section {
|
||||
margin-top: 25px;
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 768px) {
|
||||
.d-flex {
|
||||
@@ -781,4 +796,149 @@ body[data-page="zh_CN/README.md"] .search {
|
||||
mark {
|
||||
background-color: #888888;
|
||||
color:white;
|
||||
}
|
||||
|
||||
|
||||
|
||||
/* .faq_search {
|
||||
flex: 1;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: 0%;
|
||||
display: flex;
|
||||
padding: 5px 8px 0 16px;
|
||||
padding-left: 14px;
|
||||
} */
|
||||
|
||||
|
||||
|
||||
.faq-class {
|
||||
border: 1px solid #d9d9d9;
|
||||
margin-bottom: 1.5%;
|
||||
background-color: #d9d9d9;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.faq-tips {
|
||||
border: 1px solid #d9d9d9;
|
||||
margin-bottom: 1.5%;
|
||||
background-color: #d9d9d9;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.faq-class h5 {
|
||||
color: #666 !important;
|
||||
font-size: 16px !important;
|
||||
position: relative;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
.faq-tips h5 {
|
||||
color: #666 !important;
|
||||
font-size: 16px !important;
|
||||
position: relative;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
.faq-item {
|
||||
border: 1px solid #d9d9d9;
|
||||
margin-bottom: 1.5%;
|
||||
background-color: #ffffff;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
|
||||
.faq-title {
|
||||
color: #666 !important;
|
||||
font-size: 16px !important;
|
||||
position: relative;
|
||||
margin: 0px !important;
|
||||
padding-right: 30px !important;
|
||||
/* width: 500px; */
|
||||
/* overflow-x: auto; */
|
||||
}
|
||||
|
||||
|
||||
.faq-title::before {
|
||||
background-color: #00b8ee;
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 20px;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
margin: auto;
|
||||
}
|
||||
|
||||
|
||||
.faq-button {
|
||||
height: 0px;
|
||||
margin: 0px !important;
|
||||
}
|
||||
|
||||
|
||||
.faq-button::after {
|
||||
background-color: white;
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 4px;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.faq-button::before {
|
||||
background-color: white;
|
||||
content: "";
|
||||
width: 12px;
|
||||
height: 2px;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 4px;
|
||||
bottom: 0px;
|
||||
margin: auto;
|
||||
transform: rotate(90deg);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.faq-answer {
|
||||
border: 0;
|
||||
outline: 0;
|
||||
font-weight: 400;
|
||||
max-height: 0px;
|
||||
overflow: auto;
|
||||
transition: max-height .35s ease;
|
||||
}
|
||||
|
||||
.faq-answer div {
|
||||
padding-top: 30px;
|
||||
color: #666 !important;
|
||||
}
|
||||
|
||||
.faq-answer div span {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.faq-item.open .faq-answer{
|
||||
max-height: 600px;
|
||||
}
|
||||
|
||||
.faq-img {
|
||||
margin-top: 20px;
|
||||
margin-bottom: 20px;
|
||||
width: 40%;
|
||||
display: inline-block;
|
||||
}
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 232 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 304 KiB |
+268
-366
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,65 @@
|
||||
# UIFlow Block Custom{docsify-ignore-all}
|
||||
|
||||
|
||||
1. [Create block](#Create-block)
|
||||
|
||||
2. [Code-Parameter](#Code-Parameter)
|
||||
|
||||
3. [Save and Changes](#Save-and-Changes)
|
||||
|
||||
4. [Using program block](#Using-program-block)
|
||||
|
||||
|
||||
## Create block
|
||||
|
||||
|
||||
Create a custom block by clicking on the `Custom` option > `Create` in the block list.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_01.jpg">
|
||||
|
||||
To create a new block, we need to provide:
|
||||
|
||||
`1: group name`: the name of the group in which the custom block is placed
|
||||
|
||||
`2: Block color`: Appearance color of the block
|
||||
|
||||
`3: Block label`: Only letters, numbers, underscores are allowed
|
||||
|
||||
`4: Block type`: Define the type of the block as `Value` (value), or `Execute` (execute)
|
||||
|
||||
`5: Number of blocks`: Ability to add multiple blocks at the same time and save them to a `.m5b` file at the same time
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_02.jpg">
|
||||
|
||||
|
||||
## Code-Parameter
|
||||
|
||||
|
||||
Click the `Add` option under `Parameter`, add a program property, enter the name displayed in the block, and select the property type. Enter the code contained in the custom block in the `Block Code` option box.
|
||||
|
||||
[Click here to visit Github for more program API](https://github.com/m5stack/UIFlow-Code/wiki)
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_03.jpg">
|
||||
|
||||
When the attribute type of a custom block has constant or variable input, we can get these values in the code and perform further processing and operations.
|
||||
|
||||
Example: Select the attribute type as `String` (string input). In this case, if we want to get the string input when using, just use `${Parameter name}` in the code. It is `${show_word}`. It should be noted that when there is a space in the block name, use ${} to get the space that needs to be replaced with the `_` underscore.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_04.jpg">
|
||||
|
||||
## Save and Changes
|
||||
|
||||
After editing the program, click `Download` to save.
|
||||
|
||||
Click on `Open .m5b` to open the saved custom program for modification.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_05.jpg">
|
||||
|
||||
|
||||
## Using program block
|
||||
|
||||
Open a custom block by clicking on the`Custom`option > `Open` ，in the block list.
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_06.jpg">
|
||||
<br></br>
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_07.jpg">
|
||||
@@ -68,6 +68,17 @@
|
||||
<p><a class="btn btn-secondary" href="#/en/uiflow/FACES" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Custom</h2>
|
||||
<p class="uiflow_p">The creation and use of UIFlow custom program blocks. </p>
|
||||
<p><a class="btn btn-secondary" href="#/en/uiflow/blockly_custom" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
<br><br><br><br>
|
||||
+29
-9
@@ -59,7 +59,7 @@
|
||||
</div>
|
||||
<div class="d-flex a flex-column flex-md-row align-items-center p-3 px-md-4 mb-3 bg-white border-bottom shadow-sm">
|
||||
<h5 class="my-0 mr-md-auto font-weight-normal">
|
||||
<a href="https://m5stack.com/"><img src="//cdn.shopify.com/s/files/1/0056/7689/2250/files/LOGO_70x.jpg?v=1563273356" style="margin-right:10px;margin-top:-5px" width="52"></a>M5Stack Docs</h5>
|
||||
<a href="https://m5stack.com/"><img src="//cdn.shopify.com/s/files/1/0056/7689/2250/files/LOGO_70x.jpg?v=1563273356" style="margin-right:30px;margin-top:-5px" width="52"></a><span style="position: relative; top: 5px;">M5Stack Docs</span></h5>
|
||||
<nav class="my-2 my-md-0 mr-md-3">
|
||||
<a id="product" class="p-2 dropdown" href="#">Product</a>
|
||||
<div id="platform" class="p-2 dropdown"><span>Platform</span>
|
||||
@@ -141,7 +141,7 @@
|
||||
// }, 600);
|
||||
};
|
||||
|
||||
function product_search(){
|
||||
function product_search(onEnter_content){
|
||||
var p = $(".item p");
|
||||
temp_product_name = [];
|
||||
all_product_name = [];
|
||||
@@ -160,7 +160,6 @@
|
||||
$(".item").parent().children("p").css("display","none");
|
||||
$(".item").eq(i).parent().next("hr").css("display","none");
|
||||
}
|
||||
|
||||
if((match2.length == 0)){
|
||||
$("#search_note").css("display","block");
|
||||
}
|
||||
@@ -170,20 +169,41 @@
|
||||
temp_product_name.shift();
|
||||
}
|
||||
}
|
||||
|
||||
function faq_search(onEnter_content){
|
||||
// console.log(onEnter_content);
|
||||
// $(".faq-class").eq(0).textContent("问题搜索结果");
|
||||
$(".faq-tips").css("display","block");
|
||||
$(".faq-class").css("display","none");
|
||||
var faq_title = $(".faq-item h5");
|
||||
for (var i=0; i<faq_title.length; i++ ) {
|
||||
if(faq_title[i].textContent.toLocaleLowerCase().indexOf(onEnter_content) != -1){
|
||||
$(".faq-item").eq(i).css("display","block");
|
||||
$(".faq-tips").css("display","none");
|
||||
$(".faq-item").eq(i).prev(".faq-class").css("display","block");
|
||||
}
|
||||
else{
|
||||
$(".faq-item").eq(i).css("display","none");
|
||||
}
|
||||
}
|
||||
}
|
||||
function onEnter(event){
|
||||
timer = setTimeout(function () {
|
||||
onEnter_content = event.target.value.toLowerCase();
|
||||
mode_search();
|
||||
var onEnter_content = event.target.value.toLowerCase();
|
||||
select_search_page(onEnter_content);
|
||||
clearTimeout(timer);
|
||||
timer = null;
|
||||
}, 250);
|
||||
}
|
||||
|
||||
function mode_search(){
|
||||
function select_search_page(onEnter_content){
|
||||
link = window.location.href;
|
||||
if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
|
||||
product_search();
|
||||
if(((link.slice(-4) == "/en/")||(link.slice(-7)== "/zh_CN/"))||((link.indexOf(/en/) == -1) && (link.indexOf(/zh_CN/) == -1))){
|
||||
product_search(onEnter_content);
|
||||
}
|
||||
if(link.slice(-4) == "/faq"){
|
||||
faq_search(onEnter_content);
|
||||
}
|
||||
}
|
||||
// function keyup_submit(e){
|
||||
// var evt = window.event || e;
|
||||
@@ -198,7 +218,7 @@
|
||||
|
||||
Input.focusout(function (){
|
||||
Input.animate({width:240});
|
||||
onEnter_content = event.target.value.toLowerCase();
|
||||
// onEnter_content = event.target.value.toLowerCase();
|
||||
})
|
||||
|
||||
function select(event){
|
||||
|
||||
+1
-1
@@ -123,7 +123,7 @@
|
||||
<a href="#/en/unit/color" >COLOR</a>
|
||||
<a href="#/en/unit/tof" >TOF</a>
|
||||
<a href="#/en/unit/heart" >HEART</a>
|
||||
<a href="#/en/unit/adc" >ADC</a>
|
||||
<a href="#/en/unit/adc" >ADC</a>w
|
||||
<a href="#/en/unit/makey" >MAKEY</a>
|
||||
<a href="#/en/unit/gps" >GPS</a>
|
||||
<a href="#/en/unit/finger" >FINGER</a>
|
||||
|
||||
+269
-338
File diff suppressed because it is too large
Load Diff
@@ -0,0 +1,67 @@
|
||||
# UIFlow 程序块定制{docsify-ignore-all}
|
||||
|
||||
|
||||
1. [创建程序块](#创建程序块)
|
||||
|
||||
2. [程序块代码-传参](#程序块代码-传参)
|
||||
|
||||
3. [程序块保存-修改](#程序块保存-修改)
|
||||
|
||||
4. [使用程序块](#使用程序块)
|
||||
|
||||
|
||||
## 创建程序块
|
||||
|
||||
|
||||
点击程序块列表中的`Custom`选项 > `Create` ，创建一个自定义程序块
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_01.jpg">
|
||||
|
||||
创建一个新的程序块，我们需要提供 :
|
||||
|
||||
`1：分组名称`: 自定义程序块所放置在的分组名称
|
||||
|
||||
`2：程序块颜色`: 程序块的外观颜色
|
||||
|
||||
`3：程序块标签`: 只允许包含字母、数字、下划线
|
||||
|
||||
`4：程序块类型`: 定义程序块的类型为`Value`(数值)，或是`Execute`(执行)
|
||||
|
||||
`5：程序块数量`: 能够同时添加多个程序块，并同时保存到一个`.m5b`文件中
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_02.jpg">
|
||||
|
||||
|
||||
|
||||
## 程序块代码-传参
|
||||
|
||||
|
||||
点击`Parameter`下方的`Add`选项，添加一条程序属性，输入程序块所显示的名称，以及选择属性类型，在`Block Code`选项框中输入自定义程序块所包含的代码.
|
||||
|
||||
[点击此处，访问Github获取更多程序API](https://github.com/m5stack/UIFlow-Code/wiki)
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_03.jpg">
|
||||
|
||||
当自定义程序块的属性类型带有常量或变量输入时，我们可以在代码中获取这些值，并进行进一步的处理和运算.
|
||||
|
||||
例： 将属性类型选择为`String`(字符串输入)，此时在程序中，如果我们想要获得使用时所输入的字符串，只需要在代码中使用`${Parameter name}`，也就是`${show_word}`,需要注意的是，当程序块名称中带有空格时，在使用${}去获取需要使用`_`下划线对空格进行替代
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_04.jpg">
|
||||
|
||||
## 程序块保存-修改
|
||||
|
||||
完成程序编辑后，点击`Download`进行保存
|
||||
|
||||
点击`Open .m5b`，能够打开已保存的自定义程序进行修改
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_05.jpg">
|
||||
|
||||
|
||||
## 使用程序块
|
||||
|
||||
点击程序块列表中的`Custom`选项 > `Open` ，打开一个自定义程序块
|
||||
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_06.jpg">
|
||||
<br></br>
|
||||
<img src="assets/img/related_documents/blockly_custom/custom_07.jpg">
|
||||
|
||||
@@ -70,6 +70,14 @@
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-4">
|
||||
<h2>Custom</h2>
|
||||
<p class="uiflow_p">UIFlow自定义程序块的创建与使用. </p>
|
||||
<p><a class="btn btn-secondary" href="#/zh_CN/uiflow/blockly_custom" role="button">View details »</a></p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user