compose sonnerダウンロード-Sonnerソースコードのダウンロードをcompose sonnerます

ソナーを構成します

マルチプラットフォームを構成するための意見のトーストコンポーネント。

これは、Emilkowalskiによる優れたトーストライブラリであるSonnerの実装です。

デモ

wasmjsデモ

https://dokar3.github.io/compose-sonner/

ビデオ

Compose-sonner-small.mp4

特徴

EmilkowalskiのReact実装：UI、アニメーション、さらにはAPIとほぼ同じです。これらには以下が含まれます：
- 積み重ねられたトーストと拡張トースト
- さまざまなタイプと豊かな色
- 遷移
- ポジション（アライメント）
- スワイプダウンして却下します
- ボタンとアクションボタンを閉じます
- カスタムアイコン
- 期間
怠zyでパフォーマンス、あなたは一度に大量のトーストを表示することができます
完全にカスタマイズ可能な場合、あなたはそれに独自のコンポゼルをレンダリングすることができます
材料2と材料3の両方をサポートします。

ロードマップ

iOSターゲット。 @shubhamsinghshubham777に感謝します！
オンラインWASMJSサンプル

使用法

インストール

build.gradle（.kts）

implementation( " io.github.dokar3:sonner:<VERSION> " )

libs.versions.toml

 sonner = { module = " io.github.dokar3:sonner " , version = " <VERSION> " }

基本

 val toaster = rememberToasterState()

Button (onClick = { toaster.show( " Hello world! " ) }) {
    Text ( " Show a toast " )
}

Toaster (state = toaster)

種類

toaster.show(
    message = " Message " ,
    type = ToastType .[ Normal | Success | Info | Warning | Error ],
)

暗いテーマ

toaster.show(
    message = " Message " ,
    darkTheme = true ,
)

位置

 Toaster (
    state = toaster,
    alignment = Alignment .[ TopStart | TopCenter | TopEnd | BottomStart | BottomCener | BottomEnd ],
)

期間

toaster.show(
    message = " Message " ,
    duration = [ ToasterDefaults . DurationLong | 5000 .milliseconds | Duration . INFINITE ],
)

更新

 const val TOAST_ID_LOADING = ANYTHING

toaster.show(message = " Loading " , id = TOAST_ID_LOADING , duration = Duration . INFINITE )

toaster.show(message = " Success " , id = TOAST_ID_LOADING )

却下する

toaster.dismiss(id)
toaster.dismiss(toast)
toaster.dismissAll()

ボタン

 // Enable close buttons
Toaster (
    state = toaster,
    showCloseButton = true ,
)

// Set an action button
toaster.show(
    message = " Message " ,
    action = TextToastAction (
        text = " Dismiss " ,
        onClick = { toaster.dismiss(it) },
    )
)

アイコン

 Toaster (
    state = toaster,
    iconSlot = { toast ->
        // ICON_LOADING can be anything, it's just a mark
        if (toast.icon == ICON_LAODING ) {
            LoadingIcon ()
        } else {
            // Fallback to the default icon slot
            ToasterDefaults .iconSlot(toast)
        }
    },
)

一時停止を却下します

 Toaster (
    state = toaster,
    dismissPause = ToastDismissPause .[ Never | OnNotFront | OnInvisible ],
)

他の

@Composable
fun Toaster (
    contentColor : @Composable (toast : Toast ) -> Color ,
    border : @Composable (toast : Toast ) -> BorderStroke ,
    background : @Composable (toast : Toast ) -> Brush ,
    shape : @Composable (toast : Toast ) -> Shape ,
    elevation : Dp ,
    shadowAmbientColor : Color ,
    shadowSpotColor : Color ,
    contentPadding : PaddingValues ,
    containerPadding : @Composable (toast : Toast ) -> PaddingValues ,
    widthPolicy : @Composable (toast : Toast ) -> ToastWidthPolicy ,
    offset : IntOffet ,
)

ViewModel Uistateと対話します

マッピング関数を定義します

 fun UiMessage. toToast (): Toast = when ( this ) {
    is UiMessage . Error -> Toast (id = id, message = message, type = ToastType . Error )
    is UiMessage . Success -> Toast (id = id, message = message, type = ToastType . Success )
}

それから

 val toaster = rememberToasterState(
    onDismissed = { viewModel.removeUiMessageById(it.id as Long ) },
)

val uiState by viewModel.uiState.collectAsState()

LaunchedEffect (viewModel, toaster) {
    // Listen to messages changes and map to toasts
    val toastsFlow = viewModel.uiState.map { it.uiMessages.map( UiMessage ::toToast) }
    toaster.listenMany(toastsFlow)
}

Toaster (state = toaster)

または、アダプター関数を使用します

@Composable
fun UiMessageToaster (
    messages : List < UiMessage >,
    onRemoveMessage : (id: Long ) -> Unit ,
    modifier : Modifier = Modifier ,
) {
    val toaster = rememberToasterState(
        onToastDismissed = { onRemoveMessage(it.id as Long ) },
    )

    val currentMessages by rememberUpdatedState(messages)

    LaunchedEffect (toaster) {
        // Listen to State<List<UiMessage>> changes and map to toasts
        toaster.listenMany { currentMessages.map( UiMessage ::toToast) }
    }

    Toaster (state = toaster, modifier = modifier)
}

@Composable
fun YourScreen (...) {
    val uiState by viewModel.uiState.collectAsState()

    .. .

    UiMessageToaster (
        messages = uiState.uiMessages,
        onRemoveMessage = { viewModel.removeUiMessageById(it) },
    )
}

ライセンス

 Copyright 2024 dokar3

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

拡大する