compose sonner

撰寫的Sonner

構成多平台的自明吐司組件。

這是Sonner的組成 - Emilkowalski的出色吐司圖書館。

演示

wasmjs演示

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

影片

撰寫 - sonner-small.mp4

特徵

• 與Emilkowalski的反應實現幾乎相同：UI，動畫甚至API。其中包括：
  • 堆放吐司並擴大吐司
  • 不同類型和豐富的顏色
  • 過渡
  • 位置（對齊）
  • 滑動以解散
  • 關閉按鈕和動作按鈕
  • 自定義圖標
  • 持續時間
• 懶惰和表演者，您可以一次展示大量吐司
• 完全可自定義，您可以在上面渲染自己的合併
• 支持材料2和材料3，因為它不依賴於它們

路線圖

• iOS目標。在＃8中完成，感謝 @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.