konstaui / konsta Goto Github PK
View Code? Open in Web Editor NEWMobile UI components made with Tailwind CSS
Home Page: https://konstaui.com
License: MIT License
Mobile UI components made with Tailwind CSS
Home Page: https://konstaui.com
License: MIT License
HMR update not working on released version.
https://github.com/Edsuns/tailwind-mobile
https://github.com/Edsuns/tailwind-mobile.git
.npm run vue
.kitchen-sink/vue/pages/Home.vue
.twm-navbar
tag.Note: My fork just modified the tailwind-mobile version from file:src
to ^0.5.0
and disabled editor.formatOnSave
.
v0.5.0
Svelte support will be added in January
Originally posted by @nolimits4web in #2 (comment)
@nolimits4web Hi. Am just checking to see how far out this still is , and if there is anyway we can contribute. Thanks
I use windi as tailwind alternative https://windicss.org/
It use the same config system as Tailwind it can be interesting to make them compatible
Test and document the usage of windy
No response
No response
https://tailwind-mobile.com/kitchen-sink/react/dist/index.html#/form-inputs
I point out that there is a problem with the Form inputs fields with floating labels.
When the field is empty and therefore the floating label is at its maximum size, an area of extra space is added to the view causing an overflow.
The problem does not occur when all fields are filled and therefore the floating label is at its minimum size.
(overflow hidden)
0.4.5
macOS Safari 11.1.2, macOS Firefox 78.14.0esr, iOS Safari 13.4.1
I can't get konsta to work with nuxt 3.0.0-rc3.
In dev-mode everything is fine, but when i build the app with "nuxt build" I get an Error:
TypeError: Cannot read properties of null (reading 'isCE')
Can someone please help me to fix this?
If I install KONSTA under Vite+Vue and enable Tailwindcss JIT, the style does not seem to be applied well.
Support JIT.
No response
No response
Panels currently are overlaid on other elements by default, and that is the only available mode
It would be nice to have a slide-out panel that displaces the next div (usually the main component) and render it like a sidebar on larger displays , like that of framework7 reveal mode, with visible binding to keep open from a given breakpoint (this we can do with tailwind though).
if there is a css only way to do this. Please suggest as that will be helpful
No response
I tried to extend the Roboto font but I couldn't.
It'd be great if we can extend default fonts.
No response
No response
https://stackblitz.com/edit/vite-fh6u6e
I tried adding simple increment count click handler on one of the buttons in Buttons.svelte
` let count = 0;
function incrementCount() {
count += 1;
}
</script>
was created with unknown prop 'location' Buttons.svelte:3578:92
was created with unknown prop 'navigate' Buttons.svelte:3578:92
counter should increment and should show on top of button.
incremented counter not showing up on button.
0.11.1
chrome, firefox
Row separators are not pixel-perfect on Windows laptops with a scale of %125 (this is the default setup for 15" HD monitors)
This is just a workaround:
.hairline-b:after {
height: 0.5px;
}
No response
No response
<svelte:element this="input"> is self-closing and cannot have content.
Error: <svelte:element this="input"> is self-closing and cannot have content.
at Proxy.validate_void_dynamic_element (/home/ansel/Development/svelte/kudura-app/node_modules/svelte/internal/index.js:2082:15)
at eval (/node_modules/konsta/svelte/components/ListInput.svelte:243:31)
at eval (/node_modules/konsta/svelte/components/ListInput.svelte:245:10)
at Object.inner (ListInput.svelte:198:16)
at eval (/node_modules/konsta/svelte/components/ListItem.svelte:268:33)
at eval (/node_modules/konsta/svelte/components/ListItem.svelte:270:13)
at ListItem.svelte:163:14
at eval (/node_modules/konsta/svelte/components/ListItem.svelte:318:8)
at ListItem.svelte:156:10
at Object.$$render (/home/ansel/Development/svelte/kudura-app/node_modules/svelte/internal/index.js:1758:22)
Hi @nolimits4web How can i help/ contribute to getting out a svelte version . I see there is currently only react version in the source. I thought i could mix tailwind styling with framework 7 component's given that each component exports a className property , but that didn't seem to take any effect. I happened upon this project while searching for a way to do that.
Looks like Ionic is supported for React and Vue, could you please add Ionic support for Svelte?
n/a
No response
No response
https://github.com/Darkle/konstaui-types-issue
The Link component doesnt seem to inherit native attributes.
After you have run npm i
for the repo above and opened it in vscode, you will see a typescript error for the href attribute on the Link component saying: Type '{ href: string; }' is not assignable to type 'IntrinsicAttributes & LinkProps'. Property 'href' does not exist on type 'IntrinsicAttributes & LinkProps'
Checking the generated type for Link I found:
declare class Link extends SvelteComponentTyped<
LinkProps,
{ },
{
'default': {};
}
> {}
If i change it to:
declare class Link extends SvelteComponentTyped<
LinkProps & HTMLProps<HTMLAnchorElement>,
{ },
{
'default': {};
}
> {}
It then works ok.
I think the same issue occurs with other elements too. I guess this part of the script should be changed: https://github.com/konstaui/konsta/blob/master/scripts/build-svelte-types.js#L87
No response
No response
0.11.0
Debian Linux
I think this line, and maybe more will need to be modified to look something like this:
React.FunctionComponent<PropsWithChildren<KonstaProviderProps>>
konsta/src/react/konsta-react.d.ts
Line 25 in 456aa4f
App mypostnord
When the html code for k-toggle is generated, it´s printed as a label, but without the label text and the relationship between the label and the input field that´s placed inside.
It may seem that this creates an error when you use voice over on the phone, nothing happens when you click on it.
It should be possible to toggle a checkbox in VoiceOver mode on iOS.
It is not possible to toggle a checkbox in VoiceOver mode on iOS.
v0.11.1
iOS
App mypostnord
When the html code for k-navbar is generated, an extra div is added at the top of the code that is printed. This is marked below, and begins with the class absolute.
Navigation elements should be clickable when the phone is using VoiceOver mode on mobile phone
Not possible to click on navigation links in VoiceOver mode on mobile phone
v0.11.1
iOS
Izit possible to add this notification component to tailwind mobile?
Because i am developing an existing project, i did tried framework 7 but its heavily depends on the f7-app, and unable to combined with the project, hence, I am not using framework 7.
However i saw tailwind-mobile is possible to combined with any existing project & frameworks & packages. Hence, im here to request notification components.
Sorry, im not sure whats the solutions, need project author & collaborator to advice.
No response
No response
npm run dev causing an error on a new version v0.10.3
if you switch to v0.10.0 - everything works fine
setup:
error message[screenshot lower]:
Cannot find module './config/config-extend.js'
Require stack:
- /Users/luvor/SmallProjects/figaro/figaro-konsta/node_modules/konsta/config.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/tailwind.config.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/node_modules/tailwindcss/lib/index.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/postcss.config.js
10:41:32 PM [vite] Internal server error: Cannot find module './config/config-extend.js'
Require stack:
- /Users/luvor/SmallProjects/figaro/figaro-konsta/node_modules/konsta/config.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/tailwind.config.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/node_modules/tailwindcss/lib/lib/setupTrackingContext.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/node_modules/tailwindcss/lib/index.js
- /Users/luvor/SmallProjects/figaro/figaro-konsta/postcss.config.js
Plugin: vite:css
File: /Users/luvor/SmallProjects/figaro/figaro-konsta/src/App.vue?vue&type=style&index=0&lang.css
at Module._resolveFilename (node:internal/modules/cjs/loader:939:15)
at Module._load (node:internal/modules/cjs/loader:780:27)
at Module.require (node:internal/modules/cjs/loader:1005:19)
at require (node:internal/modules/cjs/helpers:102:18)
at Object.<anonymous> (/Users/luvor/SmallProjects/figaro/figaro-konsta/node_modules/konsta/config.js:2:22)
at Module._compile (node:internal/modules/cjs/loader:1105:14)
at Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
at Module.load (node:internal/modules/cjs/loader:981:32)
at Module._load (node:internal/modules/cjs/loader:827:12)
at Module.require (node:internal/modules/cjs/loader:1005:19)
SolidJs https://www.solidjs.com/ is the fastest front end framework which is better than Reactjs and Sveltejs. There is no mobile UI component framework available for Solidjs.
It would be great If KonstaUI can provide mobile UI components for Solidjs.
No response
No response
https://tailwind-mobile.com/kitchen-sink/react/dist/index.html#/form-inputs
Edit the birthday form field, setting the year to 0001. The day and year will not set correctly. Using the date 01/01/0001 causes a blank field to be displayed.
The inputted date to be displayed
The wrong date or a blank field is being displayed
latest? I didn't make the demo site
Android 11
As title says, when clicking DeleteIcon to clear up the input, the onClear handler is not triggered. The issue could be checked in the official docs in Svelte KitchenSink > ListInputs > Clear Button
GOOGLE.COM
test
No response
No response
test
test
https://tailwind-mobile.com/kitchen-sink/react/dist/index.html#/form-inputs
The password type input field is not hiding the typed characters
The password type input field should hide the typed characters
No response
0.4.4
Google chrome Version 93.0.4577.63 (Official Build) (64-bit)
Followed step by step the docs for the SvelteKit installation (with typescript), Tailwind and Konsta 0.8.0. While running the application or building it, I've got this error:
TypeError [ERR_UNKNOWN_FILE_EXTENSION]: Unknown file extension ".svelte" for C:\Users\Me\Documents\Kit\node_modules\konsta\svelte\components\App.svelte
at new NodeError (node:internal/errors:371:5)
at Object.getFileProtocolModuleFormat [as file:] (node:internal/modules/esm/get_format:87:11)
at defaultGetFormat (node:internal/modules/esm/get_format:102:38)
at defaultLoad (node:internal/modules/esm/load:21:14)
at ESMLoader.load (node:internal/modules/esm/loader:359:26)
at ESMLoader.moduleProvider (node:internal/modules/esm/loader:280:58)
at new ModuleJob (node:internal/modules/esm/module_job:66:26)
at ESMLoader.#createModuleJob (node:internal/modules/esm/loader:297:17)
at ESMLoader.getModuleJob (node:internal/modules/esm/loader:261:34)
at async ModuleWrap. (node:internal/modules/esm/module_job:81:21)
I was able to workaround the issue by applying the following parameter to konsta/package.json
"svelte": "./svelte/konsta-svelte.js"
The basic sheet modal works great, but lacks basic functionality like swipe / pull back to close and swipe to expand.
Framework7 supports it, but i can not use framework7 just for this feature as it comes up with much more.
Sheet modal what supports swipe to close and expand
No response
No response
It would be awesome if you could add support for Angular (Ionic) so that I could use it for a company project that needs Tailwind.
React and Vue for Ionic already exist, so it's probably possible to support Angular for Ionic (hopefully)?
No response
No response
https://github.com/tranhoang1010vn/nextjs-konsta.git
error - SyntaxError: Named export 'AppClasses' not found. The requested module '../../../shared/esm/classes/AppClasses.js'
is a CommonJS module, which may not support all module.exports as named exports.
file:///D:/Repo-Nextjs-QLGV/node_modules/konsta/react/esm/components/App.js:6
import { AppClasses } from '../../../shared/esm/classes/AppClasses.js';
^^^^^^^^^^
SyntaxError: Named export 'AppClasses' not found. The requested module '../../../shared/esm/classes/AppClasses.js' is a CommonJS module, which may not support all module.exports as named exports.
I use dependencies : {
"axios": "^0.26.1",
"konsta": "^0.8.1",
"next": "^12.1.5",
"next-auth": "^4.3.2",
"react": "^18.0.0",
"react-dom": "^18.0.0"
},
No response
No response
0.8.1
Windows 10
cant
Cant bind a click event on svelte, just did a fresh install, cofigure tailwind like the page.
image
Just to be sure i try both methods on:click={() => console.log("HI")} and the image one
click event working
error declaring the click event
0.8.2
windows, Edge
Have a look on this web components concept & functions, etc. https://developer.mozilla.org/en-US/docs/Web/Web_Components
I would suggest to use Vue js to develop web components. Hence you just write a single codebase, it can be used across any framework. https://v3.vuejs.org/guide/web-components.html#web-components-vs-vue-components
Based on my experience on React js, its hooks is very good to use, but its not friendly to write or use web component, we have to build a wrapper to use it with web component, but its still works well with web components, check this out https://reactjs.org/docs/web-components.html
https://konstaui.com/vue/segmented
Active segmented-button getting red.
Active segmented-button is supposed to be white.
No response
0.7.0
Windows 10 / Chrome 97.0.4692.71
`<Link slot="left" onClick={alert(2)} navbar>Back</Link>`
the alert will be called even on a page load (without click trigger)
https://github.com/pi0neerpat/redwood-capacitor-konsta-demo/tree/prerender-konsta-module-issue
This is the beginning of hopefully a longer marriage of mobile support to the RedwoodJS framework (https://redwoodjs.com) via tools like Konsta, Capacitor, and Framework7. I created a demo which I have successfully running on Android https://github.com/pi0neerpat/redwood-capacitor-konsta-demo/tree/prerender-konsta-module-issue
Everything works smoothly until adding prerender (server side rendering https://redwoodjs.com/docs/prerender#prerendering-a-page)
Error [ERR_REQUIRE_ESM]: require() of ES Module /home/dev/repos/redwood-capacitor-konsta-demo/node_modules/konsta/react/cjs/konsta-react.js from /home/dev/repos/redwood-capacitor-konsta-demo/web/src/App.tsx not supported.
konsta-react.js is treated as an ES module file as it is a .js file whose nearest parent package.json contains "type": "module" which declares all .js files in that package scope as ES modules.
Instead rename konsta-react.js to end in .cjs, change the requiring code to use dynamic import() which is available in all CommonJS modules, or change "type": "module" to "type": "commonjs" in /home/dev/repos/redwood-capacitor-konsta-demo/node_modules/konsta/react/package.json to treat all .js files as CommonJS (using .mjs for all ES modules instead).
at Object.newLoader [as .js] (/home/dev/repos/redwood-capacitor-konsta-demo/node_modules/pirates/lib/index.js:141:7)
at Object.<anonymous> (/home/dev/repos/redwood-capacitor-konsta-demo/web/src/App.tsx:12:15)
at Module._compile (/home/dev/repos/redwood-capacitor-konsta-demo/node_modules/pirates/lib/index.js:136:24)
at Object.newLoader [as .tsx] (/home/dev/repos/redwood-capacitor-konsta-demo/node_modules/pirates/lib/index.js:141:7)
at /home/dev/repos/redwood-capacitor-konsta-demo/node_modules/@redwoodjs/prerender/dist/runPrerender.js:52:126
Neither option works
import { KonstaProvider } from 'konsta/react'
// const { KonstaProvider } = require('konsta/react')
The only fix I found was to manually remove "type": "module"
from both konsta/shared/package.json
and konsta/react/package.json
0.10.2
Ubuntu 20
При клике на TOAST ON CENTER, TOAST показывается снизу, а должен по центру.
TOAST должен показаться по центру.
TOAST показывается снизу.
0.4.4
iOS theme
I'm already using Tailwind Mobile in my project and would like to know if page transitions will be supported in the future. Thank you so much!
Add page transition animations with native look and feel.
No response
No response
tailwind mobile + nuxt will be absolute bomb, combining ios theme with SSR is all we need :D
When using Konsta UI with Svelte or Vue and setting default values for inputs in ListInput via defaultValue, the inputs remain empty. See the documentation example:
<ListInput
label="Birthday"
type="date"
defaultValue="2014-04-30"
placeholder="Please choose..."
>
defaultValues should be set for inputs
No response
No response
We have prefix t-
for tailwind utilities. but Konsta wouldnt pick tht automatically and adds so it uses tailwind without prefix
resulting in none of the components styles working
None
No response
No response
@nolimits4web, any update on svelte ?
Svelte support will be added in January
Originally posted by @nolimits4web in #2 (comment)
When using v-for with Segmented Buttons the prop for active is showing up correctly, but the visuals do not show any button as active.
Example for Reproduction:
<k-segmented strong>
<k-segmented-button
v-for="option of [1, 2, 3]"
:key="option"
small
strong
:active="option === 1"
>{{ option }} </k-segmented-button>
</k-segmented>
Aurora theme is needed for desktop & cross platform view, I would like to contribute a PR, izit i just need to replace the tailwind class as screenshot below in each of the components? Can we create the .scss file and apply the tailwind style and reuse the less variable just like how framework 7 https://framework7.io/docs/css-variables.html?
How do i or any interested community to be contributes in this ui library including documentations?
Really love expandable cards of Framework7. But can not use framework7 because of the whole dependencies.
Konsta UI is designed to be used with other frameworks like ionic.
I plan to use it with Ionic, and would like to request the expandable cards feature - similar to the Framework7
Or if you can document, how can it be implemented using popups - but need the similar animation as framework 7
A new expandable card component similar to Framework 7
None
No response
Hello, I just found this project and it looks pretty good, but I don't see how to use it with svelte.
I see the svelte docs are not ready, but can you give some basic pointers?
https://stackblitz.com/edit/react-ts-fnhcsl?file=Hello.tsx
Input onChange event wrong typed.
e: React.ChangeEvent
e: React.FormEvent
^0.5.0
Node v16
Really impressed by Tailwind Mobile. I am just wondering if there's a way to use it without React, Svelte or Vue. Thanks!
warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
warn - Update your configuration file to eliminate this warning.
UI breaks when I change the purge
option to content
when Tailwind CSS v3.0 config is extended with Tailwind Mobile config.
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.