Блог

я супер новичок в Blazor, и мне нужно создать элемент управления, похожий на тот, что в этом редакторе, то есть, если я выберу текст, я смогу изменить цвет, типографику, курсив и т.д., Но только для этого выбранного элемента(ов). Я попытался сделать это с условием if, чтобы изменить переменную bool при нажатии кнопки B, I или typography, проблема в том, что, конечно, она изменилась на каждый элемент, у которого есть условие if.

Итак, мой вопрос в Blazor: как я могу узнать, какой элемент выбран, чтобы я мог применять эти стили только к этому элементу?

Что у меня есть до сих пор, так это то, что навигационная панель меняется, если выбран текст, отображается полужирным шрифтом, курсивом, а если выбран холст, отображается другая навигационная панель.

 lt;nav hidden="@(canvasToolbar)" class="navbar navbar-light bg-light"gt;  lt;div class="container"gt;  lt;a class="navbar-brand" href="#"gt;  lt;img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24"gt;  TEXT  lt;/agt;  lt;button @onclick="@bold"gt;lt;bgt;Blt;/bgt;lt;/buttongt;  lt;button @onclick="@italic"gt;lt;bgt;Ilt;/bgt;lt;/buttongt;  lt;/divgt; lt;/navgt;  lt;nav hidden="@(textToolbar)" class="navbar navbar-light bg-light"gt;  lt;div class="container-fluid"gt;  lt;a class="navbar-brand" href="#"gt;  lt;img src="/docs/5.1/assets/brand/bootstrap-logo.svg" alt="" width="30" height="24" class="d-inline-block align-text-top"gt;  CANVAS  lt;/agt;  lt;/divgt; lt;/navgt;  lt;p style="color: purple; font-weight:@isBold" @onfocus="@(e =gt; { isBold = true; })" @onclick="@ShowTextToolbar"gt;HHlt;/pgt;   lt;button style="color: red; font-weight:@(isBold ? "bold" : string.Empty)" @onclick="@ShowTextToolbar"gt;Hellolt;/buttongt; lt;div style="color: orange" @onclick="@ShowCanvasToolbar"gt;Show Canvas toolbarlt;/divgt;  @code{  private bool textToolbar { get; set; } = true;  private bool canvasToolbar { get; set; } = false;   private bool isBold { get; set; } = false;  private bool isItalic { get; set; } = false;   [Parameter] public string CssStyles { get; set; }  [Parameter] public EventCallback TextBold { get; set; }   private void ShowTextToolbar()  {  textToolbar = true;  canvasToolbar = false;  }   private void ShowCanvasToolbar()  {  canvasToolbar = true;  textToolbar = false;  }   private async Task bold()  {  isBold = !isBold;  }   private void italic()  {  isItalic = !isItalic;  }  }  

Заранее благодарю вас за вашу помощь 🙂