taiga-family / taiga-ui Goto Github PK
View Code? Open in Web Editor NEWAngular UI Kit and components library for awesome people
Home Page: https://taiga-ui.dev
License: Apache License 2.0
Angular UI Kit and components library for awesome people
Home Page: https://taiga-ui.dev
License: Apache License 2.0
Hi!
When I try to open the page https://taiga-ui.dev/tui-tabs the application becomes broken, UI on holding.
https://stackblitz.com/edit/taiga-starter?file=src%2Fapp%2Fapp.component.html
No TS template:
https://youtu.be/JK0Fp7bQ52w?t=757
Wrong less file:
https://youtu.be/JK0Fp7bQ52w?t=1800
0
as valueselect "Option 0"
https://stackblitz.com/edit/taiga-starter-dgk5ua?file=src%2Fapp%2Fapp.component.html
[valueContent] for 0
value should work the same as for other numbers ("Option 0" and not "0")
Now I am trying to use taiga from devexpress ui kit.
(https://devexpress.github.io/ThemeBuilder/advanced/generic/darkmoon/base.common/)
I read this article .Input change to material appearance .
https://taiga-ui.dev/wrapper
Because of taiga build in ui design it is hard to maintain css and customize to material design.
Is there any way fast apply material design in taiga all components.
The Dialog will not close when clicking on the box shadow and not the background:
Dialog should close
The close button for dialogs seems to be missing regardless of the settings of closeable
input.
A close button is shown in the corner of the dialog.
InternationalInputPhone has a default list of countries with names in Russian. It would be better to have it in Eng with a russian version as an alternative
We need to have a way to display dynamic tables with various data, filters, pagination etc
Here's an approximate example:
https://www.primefaces.org/primeng/showcase/#/table
Using CSS:
https://taiga-ui.dev/tables
Design is ready internally, development should start soon
I would like to contribute to the tests, but most of them are written in Russian.
Tests should be translated to english.
If one opens the given link to the doc page or search and chose some stuff (component/directive/...) or just reload the page the side panel will be not synced with the opened doc page. Sometimes it may be really hard to find related pages inside the side panel since it contains a lot of links and groups.
Would be nice to see synced side panel to easily find related stuff especially when there are exist a few types, eg inputs, charts, etc
will be great to have the same component
Angular language service doesn't provide type checkng for value
produced by expression *tuiLet="someValue$ | async as value"
. The same expression with ngIf works just fine.
I'm guessing tuiLet is missing ngTemplateContextGuard
as described here
The problem occurs in VS Code with Angular Language Service extension.
Hello!
Can't understand how to set dataTransfer
I think setData must set in tuiDragStart, is it true?
But I can't get data in tuiDroppableDragOverChange
source code
https://stackblitz.com/edit/taigacdk?file=src%2Fapp%2Fapp.component.html
will be great to have the same component
Good day!
The question is in the headline without a catch.
I follow your project, I really like it.
I am looking for a library for Angular and yours is very encouraging.
Libraries that I looked at have a number of disadvantages:
I would like to use one ecosystem to build the interface.
I like Quasar (https://quasar.dev/), but he Vue.
And I'm interested in: NX - Angular - NestJs
Question: are you planning Taiga UI - complete ecosystem?
If so, what are the dates?
Thank you :-)
The editor has Russian text.
https://stackblitz.com/edit/taiga-starter-dtl6lb
Create a Token to manipulate Font and Code values
Add a service to detect dark mode preference.
Let's make a package with providers for different languages. It will translate all Taiga UI components with one simple import
How to use:
import {RUSSIAN_PROVIDER} from '@taiga-ui/i18n';
...
{
imports: [TuiRootModule, ...],
providers: [RUSSIAN_PROVIDER],
...
}
export class AppModule {}
For a given file type I would like to display a little icon to make the file easily recognizable. Think of a folder listing on the browser or a simple list of files that could be prefixed with such a component.
A simple icon component wrapper that receives the MIME type as an input and displays the respective icon. A set of icons is predefined (e.g. for image, video, audio, text, ...) bit additional icons can be configured using a provider.
InputPhoneInternational component page on documentation site has broken pics for icons, representing some countries like Russia, USA. But for some countries icons are not broken.
The icons should be visible
Hi, this is a really great project and I would like to implement it in future apps.
What is the the current compatibility status for ionic-angular?
Sometimes we want to be able to have different implementations of dialogs in the same app. We should make DIALOGS
a multi-token and have services contain DIALOG implementation inside.
Sometimes we have something like readonly items we got from DI. They will never change so they will not spoil pureness of methods if we use them. However tuiPure
currently has no access to this
in methods, which is also inconsistent with its getters implementation. We should add access to this
.
be able to use the mixins with SASS
Hi!
I have the example with adaptive grid.
https://gist.githubusercontent.com/AnteaterKit/0f0f3fcf64d3b6db7359e8ccd4ebb83f/raw/ce7031a3148535e039d167f36c0025953b85ec1a/grid
May be add padding-bottom and padding-top in some media queries?
We are in need of contextual buttons that indicate success or danger.
Buttons appearance mode should also support "Success" and "Error" and use the colors already defined in the current colors set.
Last release of angular2-text-mask was about 3 years ago. Currently this project is not maintained. Using this library results in a build-time warning:
Warning: /node_modules/@taiga-ui/kit/ivy_ngcc/fesm2015/taiga-ui-kit-components-input-range.js depends on 'angular2-text-mask'. CommonJS or AMD dependencies can cause optimization bailouts.
For more info see: https://angular.io/guide/build#configuring-commonjs-dependencies
There is a possibility to switch off this warning. But I'm always frustrated when something can cause optimization bailouts. =)
Maybe it would be better to migrate to ngx-mask (https://github.com/JsDaddy/ngx-mask). This project looks alive.
will be great to have the same component
All sizes, except borders and such should be switched from PX to REM.
Content shakes during animation. Adding will-change
will fix such behaviour.
https://taiga-ui.dev/tui-action/Setup
We can to discuss it and I can help. What do you think?
Are you going to implement something from the list below ?
Examples from NgPrime components:
OrganizationChart - https://www.primefaces.org/primeng/showcase/#/organizationchart
Tree - https://www.primefaces.org/primeng/showcase/#/tree
DataGrid with sorting, filtering, editing, local and remote datasource - https://www.primefaces.org/primeng/showcase/#/table
TreeTable - https://www.primefaces.org/primeng/showcase/#/treetable
The drop-down list seems to be a pretty good solution when you have just a few time options. However the drop-down list doesn't seem to be a good fit for a generic time input that should accept all possible times of a day - or in my use-case every 5 minutes between 8:00am and 11:00pm.
So this feature request is to think about a good UI for entering times. Here are some existing solutions:
I hope someone with background in human/machine interaction and visually pleasing interfaces has a ground-breaking idea for a better InputTime visualisation... but the one with the arrows above/below hours and minutes might be a good starting point.
will be great to have the same component
My default gets changed to night mode (because of browser settings).
When I switch to day mode. Not all text is visible.
Browser should be on dark mode.
getting-started
Switch to light. The below happens:
Then
I did realize after investigation that this only happens when:
export const changeDetection = ChangeDetectionStrategy.OnPush;
I would like to adjust the default values for several inputs on different components. In our project for instance, we would like to use the checkbox component in size l
. Given the current implementation, we need to add the size input to every checkbox. It would be nice to globally define the default values via a configuration provider. Similar functionality exists on Angular Material and other frameworks.
import {TUI_CHECKBOX_DEFAULT_OPTIONS} from '@taiga-ui/kit';
...
{
imports: [TuiRootModule, ...],
providers: [{
provide: TUI_CHECKBOX_DEFAULT_OPTIONS,
useValue: {
size: 'l'
}
}],
...
}
export class AppModule {}
The only alternative currently is to set the size input on every checkbox.
Ideally, this would be available for every component and not only for checkboxes. We can help provide PRs if you like the idea.
I had a hard time changing the tuiInput from LTR to RTL and I couldn't change the placeholder.
Hi,
Thanks for this awesome library. I haven't started fully using it yet but planning to. I've just noticed the library is compiled against Angular 9 (https://github.com/TinkoffCreditSystems/taiga-ui/blob/main/package.json#L57) and enabling ivy on stack blitz (https://stackblitz.com/edit/taiga?file=tsconfig.json) results in a failed build. Is there plans to upgrade to Angular 11 and support ivy in the near future?
On mobile, the datepicker of InputDate
immediately closes after it has been opened.
Open the datepicker on mobile at https://taiga-ui.dev/tui-input-date by clicking on the calendar icon.
The datepicker stays open and is usable.
SVG icons not rendering, throwing XSS warning and instead of icons printing SafeValue must use [property]=binding: (see https://g.co/ng/security#xss)
on the page.
What am I missing?
app.module.ts
// ...
providers: [
{
provide: Sanitizer,
useClass: NgDompurifySanitizer,
}
],
// ...
my.component.ts
// ...
import { tuiIconPin, tuiIconCheckList } from '@taiga-ui/icons';
// ...
readonly mapIcon = tuiIconPin;
readonly lstIcon = tuiIconCheckList;
// ...
my.component.html
<!-- ... -->
<tui-tabs>
<button tuiTab
type="button">
<tui-svg [src]="mapIcon"
class="tui-space_right-2"></tui-svg>
Maps
</button>
<button tuiTab
type="button">
<tui-svg [src]="lstIcon"
class="tui-space_right-2"></tui-svg>
Settings
</button>
</tui-tabs>
<!-- ... -->
Rendered icons :)
Let's return setNativeFocused polyfill for IE/Safari with some refactors for Taiga UI
There is no progress indicator like a progress bar or ring in this library. This is quite common in other libraries and should also be implemented in taiga-ui.
The slider can be used with read only, but this is not realy a solution.
This is a good example:
https://ng.ant.design/components/progress/en
We need to add a guide on how to use different icon set. Perhaps a whole section on customisation with instructions on different aspects, such as theme, custom dialogs, etc.
If one quickly wants to reproduce a bug from the demo page. Or play around. Developers intend to copy and paste the HTML, TS, and Style content into StackBlitz.
Most of the time there are module error because other modules were used in the same example.
Would be nice to know all the modules involved in each example. This will help devs understand how modular the Taiga UI approach really is.
Or even better, a StackBlitz for each example ๐
No
Ability to show currency symbol at the beginning of a number input field rather than just a suffix.
The InputNumber component currently displays currency symbol at the end using the [postfix] property, which depending on the country this might be fine, but would be great to have the ability to specify a [prefix] property value where this would be fixed to the left and data entry would occur after this value.
On a smaller screen when the tabs get hidden.
The more
option does not work: (and the background colors seem a bit of)
https://taiga-ui.dev/tui-tabs#complex
Should expand the more options.
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.