irihitech / ursa.avalonia Goto Github PK
View Code? Open in Web Editor NEWHome Page: https://irihitech.github.io/Ursa.Avalonia/
License: MIT License
Home Page: https://irihitech.github.io/Ursa.Avalonia/
License: MIT License
import React from 'react';
import {Badge, Avatar} from '@douyinfe/semi-ui';
() => {
const bgStyle = {
padding: '8px',
};
const style = {
width: '42px',
height: '42px',
borderRadius: '4px',
};
return (
<>
<div style={{padding: '8px', borderRadius: '4px', backgroundColor: 'var(--semi-color-fill-0)'}}>
<div style={{display: 'flex'}}>
<div style={bgStyle}>
<Badge count={'■■■'} theme='solid' type={'primary'}>
<Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='solid' type={'secondary'}>
<Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='solid' type={'tertiary'}>
<Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='solid' type={'success'}>
<Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='solid' type={'warning'}>
<Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='solid' type={'danger'}>
<Avatar color='indigo' shape='square' style={style}>XZ</Avatar>
</Badge>
</div>
</div>
<div style={{display: 'flex'}}>
<div style={bgStyle}>
<Badge count={'■■■'} theme='light' type={'primary'}>
<Avatar color='indigo' shape='square' style={style}>YB</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='light' type={'secondary'}>
<Avatar color='indigo' shape='square' style={style}>YB</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='light' type={'tertiary'}>
<Avatar color='indigo' shape='square' style={style}>YB</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='light' type={'success'}>
<Avatar color='indigo' shape='square' style={style}>YB</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='light' type={'warning'}>
<Avatar color='indigo' shape='square' style={style}>YB</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='light' type={'danger'}>
<Avatar color='indigo' shape='square' style={style}>YB</Avatar>
</Badge>
</div>
</div>
<div style={{display: 'flex'}}>
<div style={bgStyle}>
<Badge count={'■■■'} theme='inverted' type={'primary'}>
<Avatar color='light-green' shape='square' style={style}>LX</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='inverted' type={'secondary'}>
<Avatar color='light-green' shape='square' style={style}>LX</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='inverted' type={'tertiary'}>
<Avatar color='light-green' shape='square' style={style}>LX</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='inverted' type={'success'}>
<Avatar color='light-green' shape='square' style={style}>LX</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='inverted' type={'warning'}>
<Avatar color='light-green' shape='square' style={style}>LX</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge count={'■■■'} theme='inverted' type={'danger'}>
<Avatar color='light-green' shape='square' style={style}>LX</Avatar>
</Badge>
</div>
</div>
<div style={{display: 'flex'}}>
<div style={bgStyle}>
<Badge dot theme='solid' type='primary'>
<Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='solid' type='secondary'>
<Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='solid' type='tertiary'>
<Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='solid' type='success'>
<Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='solid' type='warning'>
<Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='solid' type='danger'>
<Avatar color='light-green' shape='square' style={style}>YZ</Avatar>
</Badge>
</div>
</div>
<div style={{display: 'flex'}}>
<div style={bgStyle}>
<Badge dot theme='light' type='primary'>
<Avatar color='lime' shape='square' style={style}>HW</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='light' type='secondary'>
<Avatar color='lime' shape='square' style={style}>HW</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='light' type='tertiary'>
<Avatar color='lime' shape='square' style={style}>HW</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='light' type='success'>
<Avatar color='lime' shape='square' style={style}>HW</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='light' type='warning'>
<Avatar color='lime' shape='square' style={style}>HW</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='light' type='danger'>
<Avatar color='lime' shape='square' style={style}>HW</Avatar>
</Badge>
</div>
</div>
<div style={{display: 'flex'}}>
<div style={bgStyle}>
<Badge dot theme='inverted' type={'primary'}>
<Avatar color='lime' shape='square' style={style}>XM</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='inverted' type={'secondary'}>
<Avatar color='lime' shape='square' style={style}>XM</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='inverted' type={'tertiary'}>
<Avatar color='lime' shape='square' style={style}>XM</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='inverted' type={'success'}>
<Avatar color='lime' shape='square' style={style}>XM</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='inverted' type={'warning'}>
<Avatar color='lime' shape='square' style={style}>XM</Avatar>
</Badge>
</div>
<div style={bgStyle}>
<Badge dot theme='inverted' type={'danger'}>
<Avatar color='lime' shape='square' style={style}>XM</Avatar>
</Badge>
</div>
</div>
</div>
</>
);
};
ImageViewer
<u:ImageViewer
Scale="0.2"
Source="../Assets/IRIHI.png">
IPv4Box
<u:IPv4Box HorizontalAlignment="Stretch" IPAddress="{Binding Address}"/>
[ObservableProperty] private IPAddress? _address = IPAddress.Parse("192.168.1.1");
Some users need to separate View and ViewModel into different projects, so there should be a mechanism to make DialogService compatible with IOC.
您好,首先Ursa的方向一定是好的,功能也是急的,未来也能给刚接触avalonia的人一个全新的体验。
希望能继续加油!!!
然后是关于Navigation导航的一些意见,在体验上不够流畅,有明显的卡顿和转场动效比较突兀,希望能有更好的体验
请问未来是否有计划去完善DataGrid的功能,例如右侧冻结列、筛选等等(我们也知道DataGrid确实是个大型控件),现在的项目不知道能否等得到相关控件的支持 :)
Example https://api.flutter.dev/flutter/material/RangeSlider-class.html
Default set of contols is missing one, and it is handy in lots of UI tasks
请问DataGrid中如何根据单元格的值来动态修改行颜色?
因为Avalonia中没有DataTrigger的缘故,上述功能是否能实现,能说下思路么?
非常感谢!
如何实现浏览PDF文件啊?
I use the Pagination in my project,and I found a BUG.When I switch PageSize, it triggers a recalculation of CurrentPage.In UpdateButtons, sometimes index is passed in greater than TotalCount, so it is necessary to check if index is greater than TotalCount when assigning the currentIndex field.
Here are my suggestions:
private void UpdateButtons(int index)
{
if (_buttonPanel is null) return;
if (PageSize == 0) return;
// old
int currentIndex = index;
// new
int currentIndex = index <= TotalCount ? index : TotalCount;
......
//
Also, when I use Pagination in my project, I need to refresh the page content when the CurrentPage and PageSize properties change. Since Pagination doesn't have event and command bindings, I need to do a page refresh trigger in the set method of the PageSize and CurrentPage bound properties.
When I switch PageSize, the CurrentPage property changes and then the PageSize property changes, which causes my page to refresh repeatedly. Is there any good way to deal with it?
Maybe we can add a Command here,and Execute Command when the property changed.
When attempting to bind the Tag
property as below:
<u:TagInput Width="550" Tags="{Binding TagInputItems}"/>
public ObservableCollection<string> TagInputItems { get; set; } = ["A", "B"];
The application crashed, and the error log reports the following:
System.NullReferenceException: Object reference not set to an instance of an object.at Ursa.Controls.TagInput.OnTagsPropertyChanged(AvaloniaPropertyChangedEventArgs args)
I hope this message finds you well. I am reaching out to request the addition of two new UI controls to enhance our application's interactivity and user experience.
在 11.0.7 中使用 IDataTemplate 生成 ComboBox, 当使用 Dialog.ShowCustomModalAsync 弹出窗口时,点击 Combo 的下拉列表无法弹出来。同样的代码在 OverlayDialog.ShowCustomModalAsync 下可以正常弹出来。
/*
* 在 View 中主要的代码
*/
<Border BorderThickness="2" BorderBrush="Gray">
<ItemsControl Name="Items" Grid.Row="0" ItemsSource="{Binding SourceItems}" Padding="0" Margin="0">
<ItemsControl.DataTemplates>
<uiExtensions:PropertyDataTemplate />
</ItemsControl.DataTemplates>
</ItemsControl>
</Border>
/*
* ViewModel 中 SourceItems 的示例
*/
vm.SourceItems= {"你好","世界","Helo","World"};
/*
* PropertyDataTemplate (IDataTemplate )中主要的代码
*/
public Control? Build(object? param)
{
var combo = new ComboBox();
combo.MaxDropDownHeight = 300;
combo.ItemsSource = data?.Items ?? new List<object>();
combo.SelectedValue = data.Value;
// hack: bug320, 解决 下拉框不能自己 popup 的问题,
combo.PointerPressed += (sender, args) =>
{
//if (combo.IsDropDownOpen == false)
//{
// combo.IsDropDownOpen = true;
//}
};
// hack; bug320,值选中时更新
combo.SelectionChanged += (sender, args) =>
{
data.Value = combo.SelectedValue;
};
combo.ItemTemplate = data.InnerDataTemplate ?? new TextBlockTemplate();
DockPanel panel = new DockPanel();
panel.Children.Add(combo);
return panel;
}
public class TextBlockTemplate : IDataTemplate
{
public Control? Build(object? param)
{
TextBlock md = new TextBlock();
string str = param?.ToString() ?? "";
md.Text = str;
return md;
}
public bool Match(object? data)
{
return true;
}
}
Icon only button padding is wrong.
Support Orientation.
Consider to remove TextBox from Items, and attach it to the panel individually. This would reduce the brain workload of manipulating tag changes.
你好,在哔哩看到说可以私信你,可以邀请加入 微信 Avalonia 群,
麻烦拉我入群可以吗,谢谢
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.