Blazor.Components

Блазольные компоненты

Некоторые блазорные компоненты, над которыми я работаю:

• Дерево
• Селектор тегов
• Панель страницы

См. Пример работы: https://blazorcomponents.z6.web.core.windows.net/

Дерево

 < Tree 
    Nodes =" Items " 
    SelectedNode =" SelectedItem " 
    ChildSelector =" item => item.Childs " >
    < TitleTemplate > @context.Text </ TitleTemplate >
</ Tree >

Клиентские зависимости

 < link rel =" stylesheet " href =" _content/MW.Blazor.Tree/styles.css " />
< link rel =" stylesheet " href =" https://use.fontawesome.com/releases/v5.8.1/css/all.css " integrity =" sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf " crossorigin =" anonymous " >

Пример кода
Пример кода (ленивая загрузка)
Живая демонстрация

Функции / задачи

• Общая поддержка данных
• Шаблон предмета
• Стиль (начальная загрузка/шрифт потрясающий)
• Индикатор загрузки поддерево (ленивая нагрузка)
• Отключение выбора узлов
• Один выбор
• Multi Selection (флажки)
• Население событий (Onselect, Onexpand, ...)
• Поддержка EventCallback <>

Изменить журнал

• 1.3
  • Добавить новое свойство «onnodeexpand» для обработки ленивой загрузки
  • Добавить новый стиль 'NodeLoadingClass', чтобы указать на загрузку ветви
• 1.2
  • Добавлено дополнительное свойство «Nodedisabled» для оценки, выбирается ли узел узел
  • Добавлен новый стиль класса «NodetItleLectableClass» (установите, если узел выбирается)
  • Добавлен новый стиль класса «NodetItleDisabledClass» (установите, если узел отключен)
• 1.1.8
  • Добавить свойства по умолчанию для свойства «kidslector»
• 1.1.7
  • Передавать «стиль» ребенка
• 1.1.6
  • Обновление до .NET CORE 3.0 (окончательный)
• 1.1.4
  • Обновление до .NET CORE 3.0-PREVIEW9
• 1.1.3
  • Обновление до .NET CORE 3.0-PREVIEW8
• 1.1.2
  • Обновление до .NET CORE 3.0-PREVIEW6
• 1.1.1
  • Преобразовать из бритвы в Blazor Lib
• 1.1.0
  • Обновление до .NET CORE 3 Preview4
  • Перейти на пространство имен MW.Blazor
  • Реализовать EventCallback
  • Разрыв изменений: selectedNodes ( IList<TItem> ) -> selectedNode ( TItem )

Селектор тегов

 < TagSelector 
    SelectableTags =" @Tags " 
    SelectedTags =" @Selected " 
    Filter =" @((item,term) => item.Contains(term)) " >
    < TagTemplate > @context </ TagTemplate >
</ TagSelector >

Клиентские зависимости

 < link rel =" stylesheet " href =" _content/MW.Blazor.TagSelector/styles.css " />
< script src =" _content/MW.Blazor.TagSelector/interop.js " > </ script >

Пример кода
Живая демонстрация

Функции / задачи

• Общая поддержка данных
• Шаблон предмета
• Автозаполнение
• Выбор через ключи (вверх/вниз/вход)
• Стиль (начальная загрузка)
• Отключение выбора элементов
• Население событий (Onselect, Onerey)
• Поддержка EventCallback <>

Изменить журнал

• 1.2.3
  • Обновление до .NET CORE 3.0 (окончательный)
• 1.2.1
  • Обновление до .NET CORE 3.0-PREVIEW9
• 1.2
  • Добавьте новый обратный вызов «OncreateTag», чтобы поймать пользовательский ввод и создать тег на Fly (выпуск № 1)
• 1.1.3
  • Обновление до .NET CORE 3.0-PREVIEW8
• 1.1.2
  • Обновление до .NET CORE 3.0-PREVIEW6
• 1.1.1
  • Преобразовать из бритвы в Blazor Lib
  • Добавить EventCallback для SelectedTags
• 1.1.0
  • Обновление до .NET CORE 3 Preview4
  • Перейти на пространство имен MW.Blazor
  • Реализовать EventCallback

Панель страницы

 < PagePanel PageIndex =" @CurrentPage " Style =" height:250px " >
    < Page Widths =" 50%;100%;200% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#00ff90 " >
            Page 1
        </ div >
    </ Page >
    < Page Widths =" 50%;30%;20%;50% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#1596c7 " >
            Page 2
        </ div >
    </ Page >
    < Page Widths =" 70%;70%;20%;50% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#b823be " >
            Page 3
        </ div >
    </ Page >
    < Page Widths =" 60%;60%;60%;100% " >
        < div class =" d-flex justify-content-center align-items-center h-100 text-white h4 " style =" background:#ff6a00 " >
            Page 4
        </ div >
    </ Page >
</ PagePanel >

< button onclick =" @(() => CurrentPage--) " > < </ button >
@CurrentPage
< button onclick =" @(() => CurrentPage++) " > > </ button >


@functions { int CurrentPage { get; set; } }

Клиентские зависимости

 < link rel =" stylesheet " href =" _content/MW.Blazor.PagePanel/styles.css " />

Пример кода
Живая демонстрация

Функции / задачи

• Несколько страниц на той же странице
• По умолчанию на свойство «ширины»
• Собственность для перехода
• Упростить свойство «ширина»

Изменить журнал

• 1.1.6
  • Обновление до .NET CORE 3.0 (окончательный)
• 1.1.4
  • Обновление до .NET CORE 3.0-PREVIEW9
• 1.1.3
  • Обновление до .NET CORE 3.0-PREVIEW8
• 1.1.2
  • Обновление до .NET CORE 3.0-PREVIEW6
• 1.1.1
  • Преобразовать из бритвы в Blazor Lib
• 1.1.0
  • Обновление до .NET CORE 3 Preview4
  • Перейти на пространство имен MW.Blazor
  • Используйте CascadeValue для предоставления текущего индекса страницы