JavaScript UI Libraries & Blazor Components Suite – Smart UI › Forums › General Discussions › smart editor add dropdownbutton to custom editor
- This topic has 1 reply, 2 voices, and was last updated 1 year, 9 months ago by svetoslav_borislavov.
-
AuthorPosts
-
January 27, 2023 at 12:01 am #104308jqwidgetsdevParticipant
Hi,
I am trying to add a drop down button to my custom editor.
The drop down button is appearing at the bottom of the screen, but not in the editor.Am I using
dropdownbutton.dropDownAppendTo = element;
correctly?My code is based on vue drop down button
<smart-drop-down-button drop-down-width="auto"> <smart-tree> <smart-tree-item>Home</smart-tree-item> <smart-tree-items-group> Solutions <smart-tree-item>Education</smart-tree-item> <smart-tree-item>Financial services</smart-tree-item> <smart-tree-item>Government</smart-tree-item> <smart-tree-item>Manufacturing</smart-tree-item> <smart-tree-item>All industries and solutions</smart-tree-item> </smart-tree-items-group> <smart-tree-items-group expanded> Products <smart-tree-item>PC products</smart-tree-item> <smart-tree-item>Mobile products</smart-tree-item> <smart-tree-item>All products</smart-tree-item> </smart-tree-items-group> </smart-tree> </smart-drop-down-button>
{ name: "ddl", width: "auto", template: (element) => { var dropDownButton = document.querySelector("smart-drop-down-button"), tree = dropDownButton.querySelector("smart-tree"); //Get the label of the selected tree item dropdownbutton.dropDownAppendTo = element; tree.whenRendered(() => { dropDownButton.placeholder = tree.querySelector( "smart-tree-item[selected], smart-tree-items-group[selected]" ).label; }); }, },
Any questions?
January 27, 2023 at 6:22 am #104309svetoslav_borislavovParticipantHi,
You should append the drop-down button to the element, you should also append the drop-down to the body and set additional styles.
Here is the whole App.vue file for you:<template>
<div class=”vue-root”>
<smart-editor id=”editor”></smart-editor>
<smart-drop-down-button drop-down-width=”auto” ref=”dropDownButtonRef”>
<smart-tree ref=”treeRef” @change=”onTreeChange”>
<smart-tree-item selected>Home</smart-tree-item>
<smart-tree-items-group>
Solutions
<smart-tree-item>Education</smart-tree-item>
<smart-tree-item>Financial services</smart-tree-item>
<smart-tree-item>Government</smart-tree-item>
<smart-tree-item>Manufacturing</smart-tree-item>
<smart-tree-item>All industries and solutions</smart-tree-item>
</smart-tree-items-group>
<smart-tree-items-group expanded>
Products
<smart-tree-item>PC products</smart-tree-item>
<smart-tree-item>Mobile products</smart-tree-item>
<smart-tree-item>All products</smart-tree-item>
</smart-tree-items-group>
</smart-tree>
</smart-drop-down-button>
</template>
<script setup>
import { onMounted, ref } from “vue”;
import “smart-webcomponents/source/styles/smart.default.css”;
import “smart-webcomponents/source/modules/smart.editor.js”;
import “smart-webcomponents/source/modules/smart.dropdownbutton”;
import “smart-webcomponents/source/modules/smart.tree.js”;
const dropDownButtonRef = ref();
const treeRef = ref();
const onTreeChange = (e) => {
dropDownButtonRef.value.placeholder = e.detail.item.label;
};
window.Smart(
“#editor”,
class {
get properties() {
return {
//Properties
toolbarItems: [
{
name: “ddl”,
width: “auto”,
height: “10px”,
template: (element) => {
dropDownButtonRef.value.dropDownAppendTo = “body”;
element.appendChild(dropDownButtonRef.value);
dropDownButtonRef.value.placeholder = treeRef.value.querySelector(
“smart-tree-item[selected], smart-tree-items-group[selected]”
).textContent;
},
},
“Underline”,
“StrikeThrough”,
“FontName”,
“FontSize”,
“FontColor”,
“BackgroundColor”,
],
};
}
}
);
onMounted(() => {});
</script>
<style>
html,
body {
width: 100%;
height: 100%;
margin: 0 auto;
}
#app,
.vue-root {
width: 100%;
height: 100%;
}
.smart-editor {
width: 100%;
height: 100%;
}
.smart-editor div[item-name=”ddl”] {
height: -webkit-fill-available;
}
smart-drop-down-button {
–smart-editor-drop-down-max-height: none;
}
smart-tree {
width: 100%;
border: 0;
height: auto;
}
.smart-drop-down-container .smart-scroll-viewer-content-container {
display: flex;
}
</style>Best Regards,
Svetoslav BorislavovSmart UI Team
https://www.htmlelements.com/- This reply was modified 1 year, 9 months ago by svetoslav_borislavov.
- This reply was modified 1 year, 9 months ago by svetoslav_borislavov.
-
AuthorPosts
- You must be logged in to reply to this topic.