I am using this
{
menu(handle:"Life")
{
id
items{
id
title
type
}
}
}
but it is working only for parent collection or single collection.
This query should return the menu items within a parent menu and the parent menu.
{
menu(handle:"main-menu"){
items{
id
tags
title
url
items{
title
url
}
}
}
}
Related
I created custom multiple InputSelect component named "InputSelectRoles". And I want use class "test" for adding some css styles. I created file InputSelectRoles.razor.css and add styles for my class. But it doesn't work. If I add "form-control" class everything is good for example, styles added for component, but any others don't work.
This is InputSelectRoles.razor code:
#using System.Diagnostics.CodeAnalysis
#inherits InputBase<string[]>
<InputSelect TValue="string[]" class="test" #bind-Value="HandleChange">
#ChildContent
#foreach (string role in Constants.Roles.Items)
{
<option value="#role">#role</option>
}
</InputSelect>
#code
{
[Parameter]
public RenderFragment ChildContent { get; set; }
public string[] HandleChange
{
get { return this.CurrentValue; }
set { this.CurrentValue = value; }
}
protected override bool TryParseValueFromString(string value, [MaybeNullWhen(false)] out string[] result, [NotNullWhen(false)] out string validationErrorMessage)
{
throw new NotSupportedException();
}
}
And this is my css file InputSelectRoles.razor.css:
.test {
width: 30%;
height: 200px;
background-color: aqua;
}
The problem is only with InputSelect component. Style works with etc.
Your InputSelectRoles.razor.css file will only affect the style of the raw HTML content present in your InputSelectRoles.razor.
For example, in this code:
<InputSelect TValue="string[]" class="test" #bind-Value="HandleChange">
#ChildContent
#foreach (string role in Constants.Roles.Items)
{
<option value="#role">#role</option>
}
</InputSelect>
Only this line will be affected by your CSS.
What you can do:
Try to use the ::deep keywork, as explained here: https://learn.microsoft.com/fr-fr/aspnet/core/blazor/components/css-isolation?view=aspnetcore-6.0 (I do not know if it works well now)
Put your style in a tag in your Razor file
Put your style in the global CSS file of your project
class Item
{
public string Id;
public List<Item> Children;
}
json
{
"Id" : "/parent",
"Children" : [
{
"Id" : "/child1"
}
]
}
I have class for creating nested items.
How would I have a child item access the parent's Id field during/after deserialization of the child? Or is there a way to send the parent Id field when the child is to be created?
Example:
Parent Id "/parent"
Child Id "/child1"
I want the child Id "/parent/child1"
For reasons, I cannot use '[OnDeserialized]' after the parent is finished to loop children and change Id. Nor do I have access to change the json files themselves.
Still some what new to SwiftUI. Now I'm trying to present a sheet from a button in a Menu. I can reproduce the issue with the sample code below:
import SwiftUI
struct SheetView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
Button("Press to dismiss") {
presentationMode.wrappedValue.dismiss()
}
.font(.title)
.padding()
.background(Color.black)
}
}
struct TestButtonInMenu: View {
#State private var showingSheet = false
var body: some View {
Button("Show Sheet") {
showingSheet.toggle()
}
.sheet(isPresented: $showingSheet) {
SheetView()
}
}
}
enum SampleEnum: String, CaseIterable {
case one, two, three, four
}
struct ContentView: View {
var body: some View {
Form {
Section {
VStack {
ForEach(SampleEnum.allCases, id:\.self) { id in
Menu("\(Text(id.rawValue))") {
TestButtonInMenu()
}
}
}
}
}
}
}
I've tried different sheet initializers but they don't make a difference.
What am I missing? Is this possible in SwiftUI?
You have a couple of problems with the code. First of all, in your ContentView you have the Menu inside of the ForEach. By doing it that way, you have created four menus with one button each, instead of one menu with four buttons. The point of Menu is to hide the buttons until they are needed.
The second issue is that you are trying to show one sheet off the button that is buried in another view in the menu. The sheet really should be declared in the parent, not a child, and I think you have confused the OS. That being said, I think eventually you intend to call four different sheets from the different buttons, and the answer Asperi pointed you to will help as you will be calling different sheets from the one .sheet. I corrected the code and just brought the button into the main UI and out of its own struct.
struct SheetView: View {
#Environment(\.presentationMode) var presentationMode
var body: some View {
Button("Press to dismiss") {
presentationMode.wrappedValue.dismiss()
}
.font(.title)
.padding()
.background(Color.black)
}
}
enum SampleEnum: String, CaseIterable {
case one, two, three, four
}
struct ContentView: View {
#State private var showingSheet = false
var body: some View {
Form {
Section {
VStack {
Menu("Show Sheet") {
ForEach(SampleEnum.allCases, id:\.self) { id in
Button(id.rawValue) {
showingSheet.toggle()
}
}
}
}
}
}
.sheet(isPresented: $showingSheet) {
SheetView()
}
}
}
So at first I wanted to get rid of the Navigation bar from the home screen as it does not want to show the title & I don't really need it.
However I can't remove it because I use NavigationLink. So I am left in a little pickle.
How do I either hide the toolbar/navigation bar on home page or show the title.
MIN CODE
struct ContentView: View {
var body: some View {
NavigationView {
Text("Loading")
}.navigationBarTitle(Text("Home"))
}
}
So after a few more attempts seems that the title had to be shown in
var body: some View {
NavigationView {
if posts.isEmpty {
Text("Loading")
//.navigationBarTitle("") //this must be empty
.navigationBarHidden(true)
} else {
(REST OF CODE)
}
}
}
Still can't hide it though. The issue is it keeps disappearing when the if statement runs.
The .navigationBarTitle, as well as other similar modifiers, should be used inside NavigationView, like
struct ContentView: View {
var body: some View {
NavigationView {
Text("Loading")
.navigationBarTitle(Text("Home")) // << here !!
}
}
}
Update: if you want to make modifier work for both condition branches wrap condition into some container (VStack, Group, etc.), like
var body: some View {
NavigationView {
Group {
if posts.isEmpty {
Text("Loading")
} else {
(REST OF CODE)
}
}
//.navigationBarTitle("") //this must be empty
.navigationBarHidden(true) // << here !!
}
}
Instead of rendering the image of a menu item as an <img> tag within an anchor, I'd like to add a class to the anchor tag which adds the image as a background image.
At the moment, I'm doing some post-processing with javascript that searches for image urls. If found, they are removed and replaced with a CSS class.
Is there a way to perform this by overriding the Menu or implementing a MenuAdapter?
I've had a look at the MenuAdapter class but it looks like I'd have to re-implement all rendering functionality just to change this small part.
[Note: the reason I'm doing this is because I want to display the images after the text; i struggled to do this using the default rendering.]
ETA: Answered below.
I found the simplest way is to override the Render method of the Menu.
Using this menu, you can put a tooltip and css class, separated by a semi-colon, in the ToolTip property of the menu item:
item.ToolTip = "this is the tip; class1 class2";
Note: This is a simplistic menu that performs as much as I want it to do. It ignores ImageUrl and SeparatorImageUrl.
public class CSSItemMenu : Menu
{
protected override void Render(HtmlTextWriter writer)
{
this.PerformDataBinding();
writer.Write(string.Format("<div id=\"{0}\" class=\"{1}\">", base.ClientID, base.CssClass));
writer.WriteLine();
writer.WriteLine("<ul class=\"level1\">");
foreach (MenuItem item in Items)
{
WriteItem(writer, item, 1);
}
writer.WriteLine("</ul>");
writer.WriteLine("</div>");
}
private static void WriteItem(HtmlTextWriter writer, MenuItem item, int level)
{
writer.WriteLine("<li>");
string title = "";
var userClass = "";
if (!string.IsNullOrEmpty(item.ToolTip))
{
var data = item.ToolTip.Split(';');
title = string.Format(" title=\"{0}\"", data[0].Trim());
if (data.Length > 1)
{
userClass = " " + data[1].Trim();
}
}
var cssClass = string.Format("class = \"popout level{0}{1}\"", level, userClass);
writer.WriteLine(string.Format("<a {0} href=\"{1}\"{2}>{3}</a>", cssClass, item.NavigateUrl, title, item.Text));
if (item.ChildItems.Count > 0)
{
writer.WriteLine(string.Format("<ul class=\"level{0}\">", level + 1));
foreach (MenuItem child in item.ChildItems)
{
WriteItem(writer, child, level + 1);
}
writer.WriteLine("</ul>");
}
writer.WriteLine("</li>");
}
}